I know I’ve posted about it once, maybe even twice, but table-based web designers (myself included)… your days are numbered.

I’m always surprised when I see so many web designers using tables for layout, but I can understand it. Most designers started with tables, and while tabled layouts are so inflexible, they’re quick and easy to create. Making the leap to CSS positioning to create layouts means more to learn, and a potential slowdown in your work before you see the true time benefits.

I previously posted about CSS Zen Garden as one way to test your skills, but this works best if you’ve already got some experience with CSS layouts.

If CSS layouts are totally new to you (though I’ll assume that you have some experience with CSS text styling), think back to how you may have learned HTML. One of the best ways to learn HTML, back in the days of simpler sites, was to download an existing page and look at the code. Play with it. See how all those crazy tags worked.

For CSS layouts, you can do the same thing. But the trick is to start with ones that are written correctly. So avoid choosing any random site and downloading its code. Try existing templates from various free template sites.

Freecsstemplates.org is one of many sites that offers downloadable templates that you can play with to learn CSS layouts (or just use as-is for a quick blog design). At this site, all of the templates comply with W3C standards and contain valid XHTML code.

Templates at freecsstemplates.org comes in many layouts and visual styles.

These templates, and others from many different authors, are also available at opendesigns.org. Just download and start experimenting.

Simpler templates, also with valid code, are available at intensivistation.ch. In these, the code is displayed within each content area—this is great if you want to start new docs from scratch and simply copy, apply, and modify the given code.

When working with these templates at first, pay little attention to the graphics and colors—instead, focus on the positioning of page content areas. The content areas are usually delineated in the HTML code with div tags. Find the corresponding CSS class for the content area you wish to change, and make some subtle changes such as the width or the margin. Then make larger changes, eventually moving a nav bar to the other side of the page or even adding new content areas. Compare multiple templates to learn about different types of properties you can use for placement. And, of course, test them in various browsers. Compile the code you like into a new document for reference, with lots of comments in the code for reminders, and you’ll be all set to create new layouts from scratch.

This entry was posted on Monday, March 3rd, 2008 at 2:47 pm and is filed under RESOURCES, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.