Joomla! 1.5: A User's Guide: Building a Successful Joomla! Powered Website

W3C and Tableless Design

Usability, accessibility, and search engine optimization (SEO) are all phrases used to describe high-quality web pages on the Internet today. In reality, there is a significant amount of overlap between usability, accessibility, and SEO, and a web page that demonstrates the characteristics of one typically does so for all three (see Figure 9.2). The easiest way to achieve these three goals is to use the framework laid out in the W3C web standards.

For example, someone who has poor vision can easily read a site that is structured semantically with HTML or XHTML (the XHTML explains the document's content, not how it looks) through a screen reader. It can also be easily read by a search engine spider. Google is effectively blind in how it reads a website; it's as though it is using a screen reader.

Click here for larger image
Figure 9.2 - The overlap between usability, accessibility, and SEO.

Web standards put into place a common set of "rules" for all web browsers to use to display a web page. The main organization pushing these standards is the W3C, whose director, Tin Berners-Lee, is credited with inventing the Web in 1989.

To 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 World Wide Web was born. Each generation has introduced new features, and the manufacturers have come up with different, sometimes proprietary, tags (names) for those features. Each browser has tended to have a different syntax, or "dialect," and quirks for implementing the same base HTML language. New browsers have appeared, and some old ones have disappeared (remember Netscape?).

Current W3C standards serve to (hopefully) push manufacturers to release more compliant browsers that read the same language and display pages more consistently so that designers can design to a single common platform.

Another complicating factor is that historically, different browser makers (such as Microsoft) tend to have their browsers interpret HTML/XHTML in slightly different ways. This has led to web designers having to design their websites to support older browsers rather than new ones. Designers and website owners have often decided that it's important that a web page appear properly in these "legacy" browsers. The W3C standards outlined for web page code have been developed to achieve consistency. A site that incorporates the W3C's web standards has a good foundation for making itself accessible, usable, and optimized for search engines. Think of these as building codes for your house: A website built with them is stronger and safer and coincides with users' expectations. You can check your pages with the W3C's HTML validation service (validator.w3.org). It's easy and free (just make sure you use the correct DOCTYPE when you try to validate your code; see http://www.compassdesigns.net/tutorials/82- installing-joomla-doctype-and-the-blank-joomla- template.html). At its simplest, a site that meets W3C validation is likely to also use semantic HTML or XHTML and separate its content from presentation by using CSS.

Ask five designers what web standards are, and you will get five different answers. But most agree that web standards are based on using valid code, whether HTML or XHTML (or others), in the manner specified in the latest version of the standards.

Semantically Correct Code

As mentioned earlier, being semantically correct means that the HTML or XHTML tags in a web page describe only content, not presentation. In particular, this means structured organization of H1 tags, H2 tags, and so on and using tables only for tabular data, not for layout. One area where Joomla template designers compromise slightly on being purely semantically correct is the convention of naming the left and right columns of a two- or three-column layout as, well, left and right instead of the more semantically correct sidebar or sidecolumn. If these are only position names used in the template's PHP, they are technically correct. If they are also used to define matching classes in the HTML and CSS, it's a forgivable convenience to have everything associated with displaying the page's left column named or classed as left. In the examples that follow, you will see that the position of left is styled with the class sidebar and right is sidebar-2, which is semantically correct code.

Cascading Style Sheets (CSS)

Closely related to making code semantically correct is using CSS to control the look and layout of a web page. CSS is a simple mechanism for adding style (for example, fonts, colors, spacing) to Web documents (see http://www.w3.org/Style/ CSS/). CSS exist parallel to the HTML and XHTML code and let you completely separate content (code) from presentation (CSS). To see this in action, check out CSS Zen Garden (http://www.csszengarden.com), a site where the same XHTML content is displayed in different and unique ways, just by changing the CSS file. The resulting pages look very different but have exactly the same core content.

Designing Joomla-powered sites currently presents considerable challenges in terms of meeting validation standards. In the first series of Joomla releases, 1.0.X, the code used a significant number 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 many third-party developers of components and modules are still using tables to generate their layouts.

Fortunately, the Joomla core development team recognized this issue with Joomla. In Joomla 1.5, it's possible for template designers to completely override the output of the core (called a view) and strip out the tables or customize the layout—in whatever way they want.

Care can still be taken when creating a template to make sure it is accessible (for example, scalable font sizes), usable (clear navigation), and optimized for search engines (source ordered).

Stop by next week where we'll look at creating our own Joomla! CSS template.

The Localhost Design Process

What Is a Joomla! Template?