Maximum visibility for web design

Article

Rob Dinsdale shares the simple principles behind the maximum visibility approach to modern web design, helping to ensure the success of web build projects.

We start with our clients' content (words and pictures)
Using only semantic html/xhtml mark-up, we make sure that this content makes complete sense. This is the most important bit - it is the only bit that will be seen by:
1. search engines
2. users with many mobile devices
3. users with vision-disabilities who use assistive technologies that allow web pages to be "read" to them etc
4. other external systems
As such, when the content is seen "as is", it must make complete sense and tell the full story.
Next, using separate CSS files and images, we add the graphic-design elements (the presentation, including page layout, colours, fonts sizes etc). This allows us to make our clients' websites appear attractive and on-brand, whilst allowing users (and search engines) who can't "see" those sites, to still make full sense of their content.
Finally we "layer-over" the behaviour, typically, non-html technologies, such as Flash, JavaScript, audio, and video. Search engines, many mobile devices and most assistive technologies make little or no sense of most non-html technologies, so it is important to ensure that meaningful, well-structured content underpins all such behavioural-enhancements.

The layered approach

This layered approach is called progressive enhancement and allows all users (and search engines) to access your content in an appropriate manner.

At all times, we ensure that great attention is given to keeping everything accessible, usually in line with the W3C's priority 2 ("AA") recommendations, using valid mark-up and CSS.

The business benefits of adopting the maximum visibility approach:

A far wider audience will be able to use your website

Maximum visibility means making your content available to as wide an audience as possible:

Desktop users
Mobile users
Disabled users
Search Engines
External systems

Your search engine rankings will be greatly improved

Progressive enhancement is at the heart of "natural search optimisation". To be effective, it is important to:

Adopt the progressive enhancement approach
ensure that your content makes complete sense and tells the full story
ensure that it is written in a way that reflects (and includes) the words and phrases that users are typing into Google to find your sort of content

Easier/cheaper code maintenance

By separating the page into content and semantic mark-up (XHTML), presentation (CSS) and behaviour (DOM Scripting), it is far easier and cheaper to make changes to one or other aspect of the page or website, without affecting other aspects. For example, to make a site-wide change of page background and text colour from, say, black text on white to white text on blue, it would only be necessary to update a single CSS file to effect the change site-wide.

Easier/cheaper re-branding

Unlike a site where the content, presentation and behaviour are interwoven into every page, sites built on the principles of progressive enhancement are far easier to re-brand (the re-branding often only affects a small handful of files) or white-label (multiple sites with differing presentations, but based on the same content/functionality).

Leaner code

Progressive enhancement methods result in smaller file sizes, files that can be more easily cached and faster page delivery speeds.

Works in “all” browsers/mobile devices

The principles of progressive enhancement are such that where a particular technology is unavailable to a user (such as CSS and JavaScript in an older mobile phone), then the user will still be able to experience the full content of your website, semantically marked-up. This means that your website will still be usable even in very old, text-only browsers.

Future proof

By placing well marked-up, semantic content at the heart of your website, the progressive enhancement approach ensures that your site will represent you well for years to come.

Meets legal requirements

Possibly the worst reason for adopting the progressive enhancement approach, but often the first time an organisation becomes aware of accessibility is in reference to the DDA, and the possible legal implications. The maximum visibility approach, with accessibility at its core ensures that this is addressed by default.