Website Standards

Why standards-based design is important

In the early days of the World Wide Web, website design was about knowing the tricks of the trade to work around the limitations of the various web-browsers, each one of which had a different idea of how to present things on the screen. This led to the development of workarounds that looked OK on the screen but made websites inaccessible to the visually impaired and indeed to automated cataloguing tools such as Google. Furthermore, updates to browsers would often break websites which then had to be redesigned in a hurry at the owner’s considerable expense.

However, those days are gone, web browsers have evolved and this evolution has led to the development of standards for website design. We are now at a stage where it is not only practical, but necessary, to design a website using Web Standards. This means that your website works the same on all browsers and meets the requirements for accessibility and automated cataloguing and will keep on working in the future.

However, a quick look at the Internet today shows that this standards-based approach is taking time to catch on, and only a small proportion of web sites are using this modern approach. Indeed, there are still websites that only work properly in one browser and many more are unusable for people with any kind of visual impairment. Many are invisible to search engines and there are many SEO (Search Engine Optimisation) companies charging good money to make your site searchable by simply making the site standards-compliant.

This is where I work differently from the majority. I am one of the new breed of web designers that use a standards-based approach that is accessible and clear. This means you don’t lose customers through incompatibility or lack of accessibility, and redesign for SEO is not necessary because it has already been done.

There is a strong argument that all new website designs should meet these standards. The arguments for this are presented in an article by the World-Wide Web Consortium (W3C), the international organisation for web standards.

There are four standards that I consider essential and therefore the minimum requirement:

Web Accessibility Initiative (WAI)

wcag1AAA The Web Accessibility Initiative (WAI) sets out guidelines for making a website accessible to a wider range of people, not just those with 20/20 vision who can use both a mouse and a keyboard. An essential part of this approach is to separate out the informational content from the appearance. Then the appearance can be changed for different users, without changing the informational content. The standard requires the use of two other standards to meet these needs: HTML and CSS. These are described in the next two sections.

A side-effect of meeting the WAI standard is that it makes your website easy to understand by search engines, and is the first, essential step in Search-Engine Optimisation (SEO).

HyperText Markup Language (HTML)

valid-html401 The HyperText Markup Language (HTML) standard defines how to write the textual and visual informational content of the website in a form that can be interpreted by visual and aural readers, printers, search engines, indexing services and so on. HTML structures a document into a form that can be processed by both people and machines.

Most websites fail to meet even this most basic of standards.

Cascading Style Sheets (CSS)

valid-css2 The Cascading Style Sheets (CSS) standard defines how to specify the appearance of a website so that it works on any browser on any computer. It also allows the separation of the appearance and the content, a requirement for using aids for accessibility. CSS also allows a page to be laid out differently on paper and on the screen – as demonstrated by this website (try printing, or print-previewing, any page).

Of course this also means that it is possible to create an appearance that is audible rather than visual, making the website accessible to the visually impaired.

Google Webmaster Guidelines

google Google has defined a set of guidelines for website design that will work well with their search engine. Using these guidelines maximises the chance of people finding your website using Google. These guidelines will also give good results on other search engines such as Yahoo and MSN. Meeting this standard is the second step to Search-Engine Optimisation (SEO).

My Approach

Very few websites meet these standards: most confuse appearance and content, are inaccessible by aural aids, cannot be indexed by automatic tools and could break at any time due to browser upgrades. They may look pretty but they do not work. My designs do meet these standards.

What I bring to web design is over 20 years experience of programming, so I am accustomed to working in the disciplined and structured way that is necessary to meet the simultaneous demands of these four standards.

Contrary to popular belief, it is easy to design websites that conform to standards without making them boring or limited.

Web Technologies

I use 6 key technologies in my design approach, all chosen because they are standardised, open-source, well-established and therefore well-tested and the best in the business. These 6 technologies are:

HTML – The HyperText Markup Language
defines how to write the textual and visual informational content of the website in a form that can be interpreted by visual and aural readers, printers, search engines, indexing services and so on. HTML structures a document into a form that can be processed by both people and machines.
CSS – Cascading Style Sheets
defines how to specify the appearance of a website so that it works on any browser on any computer. It also allows the separation of the appearance and the content, a requirement for using aids for accessibility. CSS also allows a page to be laid out differently on paper and on the screen – as demonstrated by this website (try printing, or print-previewing, any page).
JavaScript
a client-side scripting language used to perform small tasks on the browser itself to enhance the usability of the website.
PHP – Hypertext Preprocessor
a server-side scripting language used to generate dynamic pages and act as the interface to a back-end database.
MySQL
a server-side database used for the efficient storage, indexing and access of data for dynamic content. This can include the site content, lists of users, customer orders etc.
AJAX – Asynchronous JavaScript and XML
a technique for combining all the other five technologies to design web applications.