Wednesday, 9th August 2006XHTML, CSS & Accessibility Standards - What's it all about?

XHTML & CSS are not reinventing the internet but they are improving standards, accesibility, organic search engine ranking, download times, raising the dead, solving the enegry crisis . . .

There is a great deal of hype on the internet about web design standards and accesibility standards. If you are web developer, you should already know this - if you do not, read on and follow the links. If you are considering comissioning a website and would like advice, read on. All the information below is my own personal take on web design standards - there are many voices out there so why not get a second and third opinion - the internet is free!

Introduction

I was working on a joint project with a fellow web designer a few years back - he was handling the website front end (the visible website) and I was developing the backend database and content management system. The project flowed well, the designs he showed me were great, the backend came together nicely at which point I needed to make some changes to the front end - downloaded and opened the pages and was immediately struck by how little code there was (a knock on effect of which was how quickly the pages downloaded). Upon closer examination I also realised that I didn't really understand how anything was laid out as there was no code for the way the page looked. I messaged him immediately, demanding some explanation for his witchery of web design. He explained that the page was done in XHTML and only contained the information, the design and layout of the page was done using CSS. I said "Say what?". He told me to read Designing with Web Standards by Jeffrey Zeldman and follow my nose.

What follows is my take, a couple of years on, of what these mean.

In the Beginning

It all began with the Internet and in todays society, the Internet is the World Wide Web - as it happens the World Wide Web is simply a service that runs on the Internet, just as Sky One is just a channel being broadcast to your TV. When the Internet was first born 1st January 1983, the was no World Wide Web - its language - "HTML" was just a twinkle in its inventors (Tim Berners-Lee's) eye. The first services to be run over the Internet are barely recognisible in anything we used today. When Berners-Lee introduced HTML to the Internet and built the first website in 1991, he opened the doorway to what we now know as "The Net" and what followed was a deluge of websites built in all shapes an sizes, built with all manor of tit bits of HTML. In 1994, Berner's Lee created the W3C - the World Wide Web Consortium to try and being order to the web, standards to the programmers and to enable the internet to move forward.

What is HTML?

HTML (Hyper Text Markup language) is a very simple markup language. In its most basic form its a way of formatting and linking text. The idea of a 'mark up language' can sound quite daunting but its actually very simple, for example to embolden the text below, I have simply put tags either side of it, for example

This should be bold!

Would be display as This should be bold!

To have a look at the HTML for this page (well - in this case XHTML) go to VIEW > Page source in your Internet browser.

What is XHTML?

To cut to the chase, XHTML is a newer, stricter version of HTML - a "standard" released by the W3C that has been adopted by most modern browser makers to help promote better made webpages, for more details on this, view the The Benefits of XHTML & CSS at the bottom of this article.

What is CSS?

CSS ( Cascading Style Sheets ) were developed primarily to allow all the design & layout code for web pages to be stored seperate from the content (which is stored in HTML or XHTML). The introduction of CSS also extended the possibilities of what was possible but poor adherance to standards by various browser makers (such as Microsoft) meant web designers didn't dare use the new features as what worked in one browser rarely worked the same in another. With the advent of XHTML, the application of CSS was much more predicatable across browsers and XHTML's stricter syntax was perfect for storing the content in its pure form (more like a Word Document).

The Benefits of XHTML & CSS

• XHTML is a stricter standard strictly adhered to by modern browsers (well - Microsoft do their best), this is the basis making everything else possible (read on)
• Web Pages designed with XHTML and CSS are generally a smaller download.
• XHTML requires that information be formatted 'well' in terms of structure, this has many benefits:
  • XHTML makes it easy to seperate content from design - a good thing
  • Screen Readers for blind and partcially sighted people have an easier time with well formatted XHTML.
  • Search Engines prefer clean code with more content than design code.
  • Search Engines have a limit to how much text they will process - XHTML uses less code so more content can be ranked (only relevant in very large documents)
• XHTML & CSS combined make it very easy to produce websites that are accessible from various devices (PCs, Mobile Phones, PDAs, etc).
• As the content is seperate, its easy to have multiple designs or layout for the same webpage - you could have one website that appears normally on a PC, text only on a mobile phone and a fast loading small version for PDAs (Personal Digital Assitants).

In Summary

As with everything, the Internet is an ever changing beast and as with all new technologies, keeping up just stops you being left behind - if you don't keep up you don't stand on even ground with your competitors, let alone ahead of them.  If all of the benefits listed above don't convince you, more food for thought is the accessibility of your website - U.S. Laws passed in 1998 stated that all Federal websites must be accessible by people with disabilities - how long before this becomes law for all commercial websites?