the random thoughts of a programmer

I tend to spend a lot of my time advocating web standards and really like it when people get it right. However, a lot of people are from the old school of table-based layouts and really just don’t get it when it comes to web design. Probably the most common and, in my opinion, the most frustrating mistake is that people tend to over-mark-up their page. I have seen some good layouts that are just a hideous mass of spaghetti code markup underneath because the designer kept thinking along the lines “DIV and CSS.”

I find it very depressing as a standards advocate to unwrap some of the layouts that I have been asked to work with. The concepts are always great and it shows that the layout designers are very skilled people who just don’t simply understand what it means to properly employ web standards. I have seen the same problem in my own early works so I know that its just part of the learning process.

The solution is really quite simple. Designers need to break out of the mindset that they are the same old people who used to do table based layouts who are now forced to use DIV tags and CSS and move into the mindset that they are being given information that they need to use their talents to make look great.

The best way to start the process that I have found is to just take the information, completely disregard any layout constraints the information may have in the future and mark it up with the tags that make the most sense to you. In this way you can see on-screen what exactly the information is going to look like. This also gives you the chance to get the information layout right, using the right heading tags, using lists where lists are appropriate, etc… In this way you have also laid out the baseline user experience for any old browser, text-based or screen-reader users of your site. The goal in the “information design” phase should be to make your information make sense and flow down a page properly.

After you have made the information make sense using the bare-minimum semantic markup then you can move into applying the stylesheet to the document. At this point you want to “freeze” your HTML and just focus on stylesheet changes. I find this easiest to do in Firefox because it offers the most standards-compliant view of your styles and it supports the more advanced CSS2 and CSS3 selectors.

Once the information has been structured with HTML and the style laid out with CSS you can go back and add hacks to make the page work with every designers nemesis, IE. The way to do this in most cases is with a conditional comment and in a worst case some unobtrusive javascript.

While I realize that it is not always possible to achieve an advanced layout using purely semantic HTML, it is a beautiful thing when it happens. Taking the time up-front to properly structure your information in markup will go a long way towards making it easier to apply a style and making the end result easy to maintain.

The moral of the story, design for the information, not in spite of it.