5 Tips for coding xhtml/css layouts

These are few tips that have helped me out in the transition from table-based web design to standards compliant css based layouts.

1) Read Thenoodleincident’s design rant.
This is the article that finally made it ‘click’ in my head about using css for layouts; it explains it clearly and in-depth on the thinking behind separating style from content.

2) Dont over-complicate layouts
Use larger images with more detail in as backgrounds and lay transparent divs over the top - this way gives you more room for browser incompatibilities and other quirks that you will learn to recognize and or avoid in future.

3) Dont go div mad!
You’re not recreating table layouts with divs; you don’t need a different div for every single area - you can for example use other elements to get your desired effect. Ie You can position and style paragraphs and other page elements - it doesn’t always have to be a div!

4) Semantics - how things should be done
This is something extremely important to the structure of your html, always use the correct html elements - if its a list of things, mark it up as a list - this includes your navigation. If its pairs of things, use a definition list - remember don’t worry what the default definition list looks like - you can style it how you want, you’d be surprised at the effects you can get. Use your headers ( h1, h2 etc) correctly - don’t just apply a bold style to normal text, mark it as a header and style that in your css.

5) Browser check as you go along.
Rather than creating your whole layout, then checking it and finding that its screwed in one or more browsers, which you then fix and breaks in something else. Create the header section, browser check it and fix anything that’s wrong. Then create the nav, do the same. Create the body, do the same. By breaking it down like this you don’t have to wade through loads of code and styles to find the problem. Think Manageable chunks.

If you liked this Dig it!