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.
- Outline and discuss website criteria.
- Install Joomla with no CSS, a raw joomla design with no styling, publish
onto web. - Create basic position 3 column CSS layout.
- Adapt 3 column CSS joomla template and complete any further styling.
- Adapt this Joomla design to achieve desired site functionality.
- 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.
Important Note!
This tutorial series was written in 2005. Since then I have developed some official documentation for Joomla template design.
It uses a superior CSS layout strategy that does not reply on absolute
positioning, which allows easier clearing of the footer. You can find
out more at:
www.compassdesigns.net/tutorials/joomla-tutorials/joomla-template-tutorial.html
www.compassdesigns.net/joomla-library/joomla/the-official-joomla-template-tutorial.html
Compass Designs 