Timberway.com - HTML, XHTML, CSS, Table-less Web Design Tutorial

HTML, XHTML, CSS, Table-less Web Design Tutorial

If you have been struggling with HTML/XHTMl/CSS/table-less designs - or thinking about it - here's a really nice tutorial by Nate Steiner over at design in-flight.

Nate describes how he creates standards-based HTML/XHTML/CSS web sites. It's a good tutorial that goes step-by-step through his thought processes from initial comps through creating the structure, the graphics, and the CSS, then going on to testing the design.

Although Timberway.com validates as valid HTML/XHTML code with valid CSS, it is not yet a table-less design.  I have experimented some with table-less designs, and they can be challenging.  I remember how I once spent days converting a graphics-intensive template whose layout was table-based to an HTML/XHTML/CSS/table-less design.  It looked great!  Then I made the mistake of checking it in another browser on another PC.  Graphics were out of alignment, position was off...it looked terrible.  After many hours, even days of trying to get it to work, I finally gave up.  With much chagrin, I returned to table-based web page design.

But I have kept learning, reading classics like Designing With Web Standards, by Jeffrey Zeldman.  One day soon I'll take the plunge to a table-less HTML/XHTML/CSS web site design for Timberway.com.

There are a number of advantages to table-less HTML/XHTML/CSS web design:

• Lean pages that load fast in a browser
• Structural markup that uses HTML/XHTML as it was meant to be used - to define structure, not design
• CSS to specify design, allowing the appearance of an entire web site to be changed by editing one CSS file
• Accessibility

If you're also looking at HTML/XHTMl/CSS/table-less designs - and especially if you are struggling with it - you will probably benefit from reading Nate's article:  Soup to Nuts: Making a CSS-based layout start to finish...

Technorati tags: HTML XHTML CSS Table-less Web Design