| In this series of articles, 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 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.
- 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.
|
