Web Development, idealistic or realistic

By | May 18, 2007

The building of a website is split up in several stages. The first is the design by a graphic designer, but this article isn’t about that. Then you have the developers. And there are two types. And they end up clashing, mostly not in a good way :).

So what two types am I talking about. Well you have the idealists that like to do most all by the rules. Which means intensive use of CSS and using DIV elements to build up the lay-out of the site. And then you have the ‘realist’. The group of developers that build using dirty tricks like tables for layout.

Now let me start with saying that both can get the same results. But the way that they do it is very different. So why do I call one a realist and the other a idealist. Easy the realist will achieve fast results. You can do almost anything with tables if you want to.

Having said that it’s also a dirty way. Tables are meant for displaying numbers, not entire websites. This is also the standpoint of the idealist that will try to do everything with DIV elements, which is doable but takes a lot more time.

Website LayoutLet’s play with a little example, I love examples! We have a simple website with two columns and a header. See nice little image to the side ;).

Now you can do this two ways. With tables (the realist) or DIV elements (the idealist). Both get the same result.

First the way of the realist:
<table>
  <tr>
     <td collspan='2'>Dark-Yellow cell</td>
  </tr>
 <tr>
   <td width='150'>
       <table height='300' width='100%'>
            <tr>
               <td>Yellow cell</td>
            </tr>
        </table>
   <td width='auto'>Red cell</td>
 </tr>
</table>

The second way is that of the idealist. Which in my eyes looks a lot better and is easier to maintain.
<style>
  #container {
     position: relative;
     width: 100%;
  }
  #navcell  {
     width: 150px;
     position: absolute;
     top: 0px;
     left: 0px;
  }
  #content {
     margin-left: 150px;
     width: 100%;
  }

</style>
<div>Dark-Yellow Cell</div>
<div id='container'>
   <div id='navcell'>Yellow Cell</div>
   <div id='content'>Red Cell</div>
</div>

You may have guessed it, but I personally love developing as an idealist. It’s so much cleaner. And a whole lot easier to modify the entire website by just changing a few stylesheets.

Leave a Reply