Compass Designs .net

W3C and Tableless Design

Usability, accessibility and search engine optimization are all phrases used to describe high quality web pages in today's world wide web. In reality, there is a significant amount of overlap between them and a web page that demonstrates the characteristics of one does so for all three. The easiest way to achieve these three goals is to do so using the framework laid out in the W3C web standards.

For example, a site that is (x)html semantically structured (the xhtml explains the document, not how it looks) will be easily read in a screen reader by someone who has poor vision. It will also be easily read by a search engine spider. Google is effectively blind in how it reads your web site

A site that is validates to the World Wide Web Consortium's (W3C) web standards has a much better foundation for making it accessible, usable and search engine optimized. Think of these as building codes for your house. A web site built with them is stronger and safer. You can check your pages with the W3C's HTML validation service. for free. At its simplest, a site that meets W3C validation uses semantic (x)html and separates content from presentation using CSS.

To help you understand where web standards came from, some history is helpful. Many web pages are actually designed for older browsers. Why? Browsers have continually evolved since the www started. New ones have appeared and old ones have disappeared (remember Netscape?). Another complicating factor is that different browser makers (like Microsoft) tend to have their browsers interpret html/xhtml in slightly different ways. This has lead to web designers having to design their websites to support older browsers rather than new ones. It's often decided that the web page needs to appear properly to these "legacy" browsers.

Web standards put into place a common set of "rules" for all web browsers to use to show a web page. The main organization pushing these standards is the World Wide Web Consortium (W3C), whose Director, Tim Berners-Lee has the distinction of actually inventing the world wide web in 1989.

Ask five designers what web standards are and you will get five answers. But most agree that they are based on the following:

• Valid code, whether html or xhtml (or others)
  Earlier we used an example of building codes for construction. The standards outlined for the code that makes a web page have been developed to achieve consistency. It's easy to check your code at validator.w3.org. Make sure you use the correct DOCTYPE when you try and validate your code. This article at Compass Design describes a valid Joomla doctype.
• Semantically Correct Code
  We mentioned before that being semantic means that the (x)html in the web page describes only content, not presentation. In particular this means structured organization of h1/h2 etc tags and only using tables for tabular data, not to layout a web page.
• Cascading Style Sheets (CSS)
  Closely related to having semantic code, is using cascading style sheets to control the look and layout of your web page. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. (Source: www.w3.org/Style/CSS/). They exist parallel to the (x)html code and so let you completely separate content (semantic code) form presentation (CSS). The best example of this is CSS Zen Garden, a site where the same semantic xhtml is shaped in different and unique ways with different CSS. The result is pages that look very different but have the same core content.

Designing Joomla powered sites currently presents considerable challenges to meet validation standards. In the current series of releases, 1.0.X, the code uses a significant amount of tables to output its pages. This isn't really using CSS for presentation, nor does it produce semantically correct code. This problem is compounded by the fact that very few 3rd party developers are using CSS either, most use table to generate their code too. However, tableless is not the same as valid. Its quite possible to have a site that uses tables to validate, it just makes it harder. A useful thread on the Joomla forums go into this in more detail:

Easy tricks to remove many tables from the standard output of Joomla!

Fortunately, the Joomla Core Development team recognize this issue of Joomla. While in 1.1 there will be no changes towards removing tables from the core, a roadmap has be defined that begins to address this in the 1.2 release and on.

Regardless, care can still be taken when creating a template so that it is accessible (e.g. scalable font sizes), usable (e.g. clear navigation) and optimized for search engines (e.g. source ordered).