Love you Niq! Without you guys I may have never had the guts to go freelance! And without that I wouldn’t have the amazing travelling life I have now. Thanks for being the most wonderful client I could ever dream of and for making me feel like part of the family. Here’s to many more years of increased sales and shiny new website happiness!

If your site is build with CSS (cascading stylesheets) instead of tables, you can define a look and feel not only for screen, but a completely different one for your website printouts, overhead projector, Braille, handhelds, the list goes on. Yummy Wakame has two stylesheets for font size, two stylesheets defined for screen, one of which is plain and simple if that’s your preference, a print stylesheet and now a very simple handheld stylesheet. Most handheld devices are really basic so I’ll keep it plain for now.

So you’re a web designer or you’re a client about to have your site built. What do you need to know about website longevity?
The coding standard for websites is no longer plain old HTML but XHTML. This is a much stricter coding standard that requires that error-free code is written by your designer/developer. The reason for the strict requirement is to ensure that the website functions and displays correctly across all devices that connect to the web, even those in the future, even really dinky browsers that easily crash when they encounter errors in the code and don’t know what to do with it. It also helps towards making your site accessible to people with disabilities who use specialised equipment and browsers to access your site – something that is becoming more important with new legislation. Also, adhering to web standards when you build sites makes it easier for browser developers to build robust browsers and encourages them to also adhere to web standards, ensuring your site looks the same across all platforms and browsers.

Yummy Wakame is written in XHTML Strict, but it is still acceptable to use XHTML Transitional – a less harsh form of XHTML that still allows most of the HTML tags that designers are fond of using. If you use XHTML Strict, you have to be very inventive and find all kinds of solutions to get your layout to display the way you want to without compromise.

You can still use tables if your site is written with XHTML, but did you know that most handhelds completely butcher sites that use them? At least with stylesheets, if the device can’t figure out how to use the stylesheet, it’ll just ignore it, and the content for the site will just linearize downwards without any design applied. It won’t get all squished up inside a teeny weeny table. It will be completely useable.

It costs a bit more to have your site laid out with CSS instead of tables but it’s so worth it when you consider that a few years down the line you could apply a completely new skin to your site just using CSS without a complete rebuild (assuming of course the person who originally built it knew what they were doing). And you can shell out a bit more and ask for additional stylesheets to be added to your site for printouts and handheld if and when they become more important to you.

If you’re a web designer / producer or developer and you haven’t yet learnt CSS or XHTML, you can’t afford to wait much longer. It will probably take you a good year of constant practice to properly get to grips with CSS and create the sort of layouts you love that work across all browsers.

Here is how I started learning CSS – taking apart other peoples layouts and learning from them:

• CSS Zen Garden and CSS Vault – Get inspired! See what other people are building with CSS
• W3C Schools CSS Tutorial – learn CSS with the Web Standards Consortium’s own online school. Its free.
• A List Apart – CSS and techniques for designing with web standards in mind
• CSS Filters – find out how other browsers react to your fancy CSS styles
• And finally, while you are building your site, check it with the W3C’s CSS Validator. As you encounter errors in your code and learn how to fix them, it’ll teach you faster than anything else.

XHTML is very easy to learn if you can already hand code in HTML. It’ll take you at most a day to get to grips with it. All you need to do is:

1. Choose a small brochure type site you will build in XHTML for a client
2. Do the quick XHTML tutorial on the W3C Schools website.
3. Take what you’ve just learnt and start building your first page in XHTML. If you run into questions, use the XHTML 1.0 Reference to ensure your tags are coded correctly.
4. Once you think you’re done, run your code through the W3C’s XHTML Validator. Going through the errors and correcting them will help cement what you’ve learnt about XHTML.
5. Once the page validates without errors, its safe to continue building all the pages in the site. Remember to check every page through the validator again before the site is complete!

And lastly, getting back to the point of this post, this is a very good article about handheld stylesheets with valuable links and advice.

Hope that helps and good luck!