Overusing CSS Trickery

When the web began its metamorphosis from academic curiosity to global playground most websites were pretty basic. They were mostly grey pages sporting black text and, very occasionally, the odd image. The more daring web-designers deployed bulleted lists and even interactive forms for soliciting feedback.

In those days every new gimmick was seized upon by web-developers who were determined to make the most of this exciting new media. As time progressed we began to see some real horrors appearing:

First came the background graphic, invariably a fussy, garish image that would be repeated throughout the page. Web-designers who favoured such backgrounds also seemed to have a penchant for text in primary colours which, when overlaid on the background, made their pages basically unusable.

Then the animated GIF put in an appearance. The animated GIF was a virus, a plague, and it permeated the Internet almost overnight. Virtually every page had an animated image on it somewhere, and there were often more than one.

Java widgets were next - we got scrollers, animated lakes with real-time reflections and all kinds of other abominations.

Webmasters also played (thankfully briefly) with embedded audio tracks. This was a terrible mistake. The music was often set to loop indefinitely and, while some webmasters provided controls to stop the track, many didn't. Users didn't stay long and these sites were forced to abandon their soundtracks.

Anyone remember frames? They were the next big thing in the designer's armoury. Web usability took a nosedive when these were deployed yet no-one bar Jakob Nielsen seemed to notice and they soon proliferated faster than North Korea's military expansion plan.

Macromedia's Flash then hit the streets. Suddenly websites the world over adopted this new technology and we entered the age of the 3D, animated splash screen. Soon whole websites were made with Flash and download times shot through the roof as quickly as accessibility flew out the window.

Today, fortunately, the above are now used much more conservatively - in most cases. Most web-designers these days seem to be working towards standards-compliant, well-formed XHTML and CSS based designs. It looks like 2004 will be the year of the stylesheet.

Now I think this is great. We have well-formed web-pages, we have structured documents and we have content seperated from presentation. But the move to XHTML/CSS has given the gizmo-loving web-designer new toys to play with.

You may have noticed that several websites today have options for changing the entire style of the site via a pull-down-menu or other widget. I cannot understand the motivation behind this. Do such controls enhance the website in any way? Does the website become more usable because its design can be changed? I think not.

When I come across such controls my first thought is "indecisive designer", my second is "arrogant designer". The implication of such controls is either that the designer couldn't settle on a single design or that he is so impressed with his own design skills that he can't resist the opportunity to showcase them to the world.

I have not come across a single case where such switchers offer an obvious benefit to the user. They are merely clutter, consuming valuable screen real estate. They are also an opportunity missed. A stylesheet switcher is great for providing alternative views of content, a text only view for example. But they rarely seem to used in this way. So I would suggest that designers rethink this strategy and use their stylesheet switchers to benefit the user rather than to flatter their own egos.

Another widget that's making a frequent appearance is the text-size switcher. Now, I do appreciate the usefulness of this control and no-one can argue with the validity of providing the user with an option to enlarge (or reduce) the text to suit his or her own needs. However, these controls are not required on the web-page. All modern browsers provide the user with a standard control for adjusting the text size (in Mozilla it's [Ctrl +]/[Ctrl -], in MSIE it's available via the "View" > "Text Size" menu). Don't duplicate controls: the users who require this functionality tend to know about the browser options, they don't need the controls on the web-page. If such controls become a de-facto standard then we'll all have to implement them, but they are not. Style widgets have the potential to become the web's next animated GIF, but this needn't be the case if web-designers act now.

As Vincent Flanders once famously said, "Would amazon.com use that design element on its website?" The logic follows that, since amazon.com has probably spent more time and money researching what works on a website than anyone else, if they don't do something then you probably shouldn't either. It's worth thinking about.