Why technical details matters

How your site is developed initially can make a vast difference to various 'users' and to yourself:

  • Your users - when your site loads like a rocket, or creeps into view like a squashed slug
  • Your users - when the site 'breaks' in some web browsers
  • Your users - when they can't find what they are looking for
  • Your users - when they have different forms of disability and can't use your site
  • Your users - when they use various handheld devices and can't access parts of your site
  • Google, Yahoo, MSN etc - when old fashioned coding stops them understanding or indexing your site
  • Yourself - when time comes to develop the site further
  • Your pocket - when your site becomes really popular, and you have to pay heavy bandwidth charges on 'unslimmed' graphics

Modern coding techniques make it much easier to develop and maintain fast loading websites that are usable, accessible and search engine friendly. These qualities are all derived from standards based coding.

We will discuss web standards, the benefits of place style information into style sheets, and then look at the reasons for accessibility.

Web standards

Standards based coding is a style of coding that has come to the fore in the last couple of years or so. In an age where upholding standards is not fashionable, this may sound deeply retro. In truth, it is actually vastly liberating and well worth understanding.

In essence, Standards based means using HTML as it was designed – to define the logical structure of a page, and then controlling the appearance of the content via separate ‘style sheets’.

Benefits of being standards compliant

The benefits of using standards based coding are immense:

  • Sites will be compatible with future browsers [since the makers are finally committed to following the standards]
  • Easy to maintain and extend
  • Provide an excellent basis for accessibility
  • Search engines [being blind] love the well structured content
  • Pages are much faster to load

I can’t think of any drawback to this approach – the trouble is that many website developers are stuck in the past with tools that churn out tables based garbage. On the surface they look fine, but underneath….

History of HTML

[a little history of the decline and the rise of the web]

The web was originally developed for scientific purposes – communicating data between teams. As originally envisaged, it was seen as lots of formally structured papers [headings, text, tables and pictures] in a nice linear sequence, with key sections joined by hyperlinks to other relevant pages.

This was all done a very simple language called HTML. Unlike, say English or Chinese or even French, all the elements of this language are defined by a committee – the World Wide Web Committee or W3C for short. The early web browsers understood HTML and would display the pages quite happily.

All was well, lots of simple pages. But then two very bad things happened.

Browser makers competed to added new, exciting and non standard features. So a web site would look brilliant in one browser and total garbage in another – so the poor designers had to create different versions of their sites for different browsers. Versions that broke when the browsers were updated!

About this time along came the graphic designers, they saw the web pages and hated them for being so visually boring. To get the effects they wanted they used HTML but not as it was meant to be used.

Heading tags, for example, were used not to split up the text logically, but because different headings got different graphic effects. Worse, they used tables to control layouts. And tables within tables. And tables within tables within tables, even up to six levels deep – a horrible mess to create and even worse to update.

Colour and font information for these tables had to be defined for each cell in the table – leading to a massive redundancy – and vast amounts of time wasting if a change typography was required.

Looking at the source code for these pages [an easy matter – pull down the ‘view’ menu and select the source code option], it was almost impossible to see the actual content, buried as it was in the styling information.

The only solution to this mess was to go back to basics and use HTML as designed, purely for defining the logical structure of the page.

Stylesheets [CSS]

So, in standards based coding, HTML should be used simply to mark out the logical structure of a web-page, any hyper links etc. What then controls how it looks?

A key question given that the fundamentally visual nature of most web-pages. What owner would be happy if there was no control over layout, colour or typography in their site!?

W3C to the rescue! All this style info is [or should be] held in separate style sheet files. The style information is written in another simple language common known as CSS [Cascading Style Sheets ] which offers control over the final appearance of the page in your browser. CSS does not alter the content of a page, but it can make vast differences to it appearance.

The brilliant thing is that this one style sheet can apply to the entire site. This single file controls the house style for hundreds or thousands of pages. A single edit can change the font used in headers from Georgia to Garamond, its colour from black to charcoal grey.

Accessibility

The accessibility options in this site are described in another page. Here we are more interested in why you should be concerned about accessibility.

Most people's reaction, when accessibility is first suggested, goes something like this:

'politically correct humbug - websites are not like buildings or cars or things - they have to be seen. Blind people can't see, so why should I bother - indeed how can I - it's all meaningless drivel.'

Well - here are several things you might like to consider:

  • Google is a blind user. When Google indexes your site, it simply reads the text [if any], graphics are ignored. Some navigation methods are impenetrable to search engines. Can you afford to turn Google away?
  • Disability covers a complete spectrum of 'possibilities', including motor impairment as well as visual impairement. Most visually impaired people can see to some extend. Completely blind users use screen reader software to get into your site. Why turn a significant portion of the population away?
  • Your sight will probably get worse as you get older - think forward - why turn yourself or your friends and family away?
  • Accessibility is increasingly becoming a legal requirement. Why encourage the lawyers?
  • Accessibility also means making sites available to people with varying technologies, e.g. handheld devices. Why turn away a growing number of users?

In short, accessibility is a prize well worth striving for. If considered from the beginning it is moderately easy to do - but retro fitting accessibility can be really difficult - in some cases requiring a major site redesign.

Alternate styles

There are a number of different layouts or 'skins' for this site: company, rainbow, child, calm, stormy, austere, high contrast and more...

ExpressionEngine

This site is powered by the brilliant ExpressionEngine CMS.