Boots Expert: Progressive enhancement
The Boots Expert site is no longer active - expertatboots.com redirects to a products page.
This Boots microsite, featuring blogging, tag clouds, allowed me the opportunity to go through my ideas on CSS systems analysis.
Despite there being only one front-end developer on this project, it was useful to go through the steps of dividing the design into:
- functional
- stylistic
- modular
- and semantic
units.
This helped keep the CSS structure neat and understandable and the output HTML tidy: for example, all hex codes for any colour theme are stored in one CSS file ordered by section. The sections are controlled by an id on the body tag.
Microformats
This project used microformats in a useful way in the mark up of the tag cloud
Microformats enable other applications, search engine spiders and future developers the opportunity to get computer readable data from human readable information.
The microformats in the tag cloud show what the page content is about to blog search engines, for example. The tag coud uses font size to show how much the topics are written about – the tag cloud degrades to show that information without styling.
Javascript enhancement
For the links to products within the Boots website and the FAQ section, I employed a technique called progressive enhancement.
I built the modules so that they looked good both with and without styling and made sense, too, with headings used as headings.
I then enhanced the modules using javascript so that headings become clickable links that show and hide sections using graceful animation. The modules work with and without javascript and styling, and with the use of a keyboard only.
