c1- Creating a W3C valid Joomla template for Joomla PDF Print E-mail

Tutorial 1: Creating a W3C valid Joomla template for your Joomla website

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

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.

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 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 (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.


  • 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.

Related articles(beta):

Add as favourites (0)

  Be first to comment this article
RSS comments

Write Comment
  • Please keep the topic of messages relevant to the subject of the article.
  • Personal verbal attacks will be deleted.
  • Please don't use comments to plug your web site. Such material will be removed.
  • Just ensure to *Refresh* your browser for a new security code to be displayed prior to clicking on the 'Send' button.
  • Keep in mind that the above process only applies if you simply entered the wrong security code.

:) :grin ;) 8) :p
:roll :eek :upset :zzz :sigh
:? :cry :( :x
Code:* Code

Powered by AkoComment Tweaked Special Edition v.1.4.2

Tag it:
Furl it!

Joomla books

Are you secure?

Try BitDefender antivirus scan online for free!

Satisfied?Click below to buy world's best anti virus

Buy Antivirus software
© 2008 TeachMeJoomla
Joomla! is Free Software released under the GNU/GPL License.