Website updates pt2

If HTML is used to structure modern websites then CSS is used to give them their look and feel. Without it they look like plain paper documents, in fact very similar to early web pages.

As with HTML, the technology is being updated with CSS3 being the latest version though not every browser supports these features. This means that there has to be either a fallback for older browsers or that site isn't dependent on the use of the new features, this is known as progressive enhancement. An example would be drop shadows: these are a visual effect that doesn't affect the usage or behaviour of the site so adding them is nice for those browsers that can handle them but other browsers will still work fine if look a little plain.

With (semi) major updates it's nice, though not essential, to give a new look and feel to the site, partly to indicate that the site has been updated and partly to avoid being seen as stale. The changes are minor on the surface: the main menu text is "reflected" and the call-out boxes have a vertical background gradient, but this time the changes have really been about how the styles are generated. The work needed to create a CSS stylesheet for a web site is often rather intensive and with three stylesheets needed for desktop, tablet and phone this work increases at least three fold as you need to ensure some consistency between the devices.

There are several tools and methodologies around to ease this work but I settled on the SASS/Compass combination. This allows you to define a set of values at the start of the file then use them later on rather than rewriting the value every time. You can also perform "mathematical" operations, making colours lighter or darker for example. All this leads to a consistency in the stylesheet which didn't really exist in those I'd created before.

A further benefit is that a lot of the "cruft" that had built up is no longer needed so the CSS is smaller. However I removed all of the CSS that was embedded in individual pages and included that so the resulting size isn't as small as it could have been.

One of the "hot phrases" in current website design is "responsive layout" which is perhaps the antithesis of early web pages that were intended to be "pixel perfect" on every device. Using new features in CSS3 it is now possible to have the browser adapt the layout to match the device or size of window: wide desktop screens might get 3 columns, narrower screens and tablets get the data in two columns and for mobile phones it is presented in a single column. You can even account for changes in how a tablet or phone is being held - portrait or orientation. No change to the core structure of the page is required but the visitor gets a site that is better suited to how they are viewing it.

The next posting will look at the Javascript changes.