This is my second attempt at web designing. Here I have discussed some aspects that I have tried to keep in mind while building this site. Please leave your comments on the feedback page.

About this site

The tools

I have almost hand-coded the entire site. No, I didn't do that in Notepad though. I used Macromedia Dreamweaver MX 2004. I like this tool because it's really CSS aware, and produces great code whenever I am not hand coding (such as when inserting a table and so on). Also, its code-completion and web-page validation features are really top notch. However I had to fall back to good old VIM after I had created my template as by then, the trial had expired :(

For creating the CSS, I used the same tool. I tried TopStyle and found it to be really good. But I couldn't use it for long as it was an evaluation version.

The Techniques

If you are new to CSS, then at the very beginning, you should be aware of the following two approaches to designing the layout of your pages:

  1. The Conventional Approach : Using tables for layout, and entering content in the table cells.
  2. The New Approach : Using div's for layout, and laying out the content using CSS-Positioning.

I used the second method for my site. There are several reasons for opting for a CSS based layout, but ease of coding definitely isn't one of them! You will find several sites discussing these reasons but here's what I feel the most important ones are:

  1. Separating content from presentation: This is always a good thing, it makes the code much more coherent, and easier to manage. Consider having a 100 page website laid using tables. If you have to change the font in one table cell or the table layout itself, you would have to do that for all the 100 pages separately. Whereas, if you used CSS, all you would have to do was simply change the single CSS file!
  2. Lesser download time: Once the CSS file is downloaded, (about 5KB for this site), all the pages use the same presentation information from it. A large saving in download time is achieved.
  3. People with disabilties: People using screen readers are benefited from the CSS approach as the content is usually in a single div, and can be read out coherently. Screen readers do a miserable job if content is spread across various table cells.
  4. Varying capabilities of user-agents: Increasingly, browsers on computers are not the only way by which content is accessed. Mobile handsets, TVs are some other devices where complex table layouts may fail miserably. With CSS, we may apply the styles to only certain types of user-agents, allowing graceful degradation for other types of agents.

This site in particular uses an absolutely positioned div for the menu system on the top left part of the screen. There is a floated box on the top right containing a summary of the page. The main content div is centered. Of course, there are the usual header and footer divs as well.

View/Download the CSS used in this site!

The CSS on this site is licensed under a Creative Commons License.

The Disclaimer

Though this is my second attempt at web-designing, I definitely have a long way to go. I am somewhat a newbie as far as CSS, especially CSS-Positioning is concerned. But I hope the information presented here, or in the CSS files itself, will help you if you are like I was when I started off with CSS. Please leave your feedbacks, comments, suggestions or rants here.