In this series of joomla tutorials, we'll be building a valid joomla template. Joomla is an open source Content Management System (CMS) that is freely (literally) available and supported by a large on-line community. The site will actually be live on-line at livesite.compassdesigns.net from the very beginning, you'll be able to see the different stages as the design develops. As this is a CSS designed site, you'll be able to slowly see the raw joomla design get styled step by step.

Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website

Joomla Design for Web Standards

You may have seen words such as "web standards" or "CSS" or even "accessibility". They are often all used together in some sort of commentary about a "design for the future rather than the past".

What do we mean by that?

We'll discuss it more in another article, but many web pages are designed for older browsers. How so? 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 //x/ 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 (WC3), whose Director, Tim Berners-Lee has the distinction of actually inventing the world wide web in 1989 (how's that on a resume!).

Cascading style sheets or CSS was developed a few years ago that made styling easier for web designers. You have all styles in a separate file and they are applied to the whole site. Rrecently is has been part of a movement to separate content from presentation. This is another thing we'll visit later, right now we'll just note that using CSS is key to building a valid Joomla website that meets WC3 standards.

Accessibility, sometimes mistakenly called usability, is an attempt for a page to be accessible to all possible viewers. Usually this is chosen to mean such examples as someone that is blind (uses a screen reader) or old (struggles with small fonts/delicate mouse based navigation). I use these two as examples as they are the ones quoted most often (don't shoot the messenger!). I take a much broader view and include viewers with or without disabilities, young or old, or even non-human, such as search engine spiders!

Trying to get your joomla website to meet these standards can be hard. Any sort of CMS generates its content dynamically, which can mean code gets put in that invalidates your site, the joomla design is never constant.

Overview of a Joomla Design

There is no "right way" to create a website, it depends on the designer's own background. Those more graphical make an "image" of a page in a graphics program like Photoshop and then break up the images to use (known as slice and dice). More technologically inclined designers will often just jump straight into the CSS and start coding. As a goal of this project is to have the process be as transparent as possible for people to see, we'll use a process with lots of small steps. We'll have two other twists in the joomla design process:

• We will put up a site a raw content very early in the process, normally this would come as one of the last stages.
• We will design a basic 3 column CSS joomla template first and then adapt to our desired design. We are doing this so that it's possible to see a "universal layout" and see how it can be adapted to different needs.

So, with those two points in mind, here is our modified design process.

1. Outline and discuss website criteria.
2. Install Joomla with no CSS, a raw joomla design with no styling, publish onto web.
3. Create basic position 3 column CSS layout.
4. Adapt 3 column CSS joomla template and complete any further styling.
5. Adapt this Joomla design to achieve desired site functionality.
6. Take comments generated by community and create detailed guide to building a valid Joomla website.

The URL is http://livesite.compassdesigns.net. We'll start with a fresh Joomla website install. We'll use this section of this website to place the articles discussing the process. We'll also use a comment tool so that anyone can make comments. Hopefully this will be a learning experience for us all.

Summary:

• Joomla is a free, powerful content management system, we'll be using it to build a valid Joomla template that meets WC3 standards.
• Web Standards describe a set of rules for all web browsers to use to interpret web pages. CSS is a design protocol that is closely tied to web standards.
• Getting a joomla design to meet W3C standards and validate can be difficult.
• Microsoft needs to be taken out back and shot.

A preview from our next joomla tutorial

Tutorial 2: Installing Joomla, doctype and the blank joomla template
In this article we will look quickly at installing joomla and then spend most of our time discussing the joomla doctype and how it relates to a valid joomla site. We'll also briefly look at how to construct a basic or blank joomla template with the index.php file.

© 2005 Compass Design/Barrie North, December 2005.
Barrie creates valid joomla template designs at his consultancy, Compass Design
Please if you'd like to use this article on your site