Writing
Tuesday 31 May 2005
Royal Society of Chemistry's new website
The Royal Society of Chemistry recently re-launched their website with tasty XHTML/CSS templates constructed by me. As with a previous project, Wood Mackenzie, design was by Wilson Fletcher and the turning of the static templates into a functioning website was done in-house.
Every time I do a new site I think the HTML/CSS gets better. This time I’ve done my best to keep the HTML as generic as possible, with few page-specific styles, something made much easier when the design is as clean and consistent as this is.
The simplest demonstration of the complexity being in the CSS, rather than the HTML, is the differently coloured sections of the site. The structure of the page is defined in a global stylesheet but all colour information is stored in a separate stylesheet for each section of the site. Simple enough, and it keeps the HTML identical from one section of the site to the next.
Another example: the two tinted panels on this page (one, titled ‘Publications’ is within the larger panel) are both divs with a class of “hilite”. The colours of these is first determined by the section-specific stylesheet. Then their colours vary depending on whether they’re nested or not.
Similarly, double columns within the main content area are always set up using the same HTML — a div for each column. The widths of the columns is set by the CSS according to whether those divs are within tinted blocks or not, and which layout the page is using (determined by the class of the <body> element). These columns also be nested, so the right-hand column in the main content could have two more columns within it, using the same classes.
The downside to making the HTML so generic is that the CSS becomes increasingly complicated, but I like to think this is more than worth it. Once things had settled down it was a delight to build another template with simple, generic classes and have the page Just Work.
Commenting is disabled on posts once they’re 30 days old.