Following on from the mammoth project that was the new City of London site came the brief for a redesigned City of London Police site. With a head packed full of lessons-learned and a raft of new techniques I was itching to use it was back to the drawing board and out with the trusty pen and paper.
To kick things off I met with the Police to discuss their existing site, what they liked and didn’t like about it and what their audience needed.
Following that meeting I produced two design concepts and a range of template designs for each. One was quite heavy and blocky while the other made use of white space and soft edges to define the page.
After discussing the merits of both ideas they opted for the subtler design so my next task was to start work on the design guidelines.
Now usually the guidelines are an after-thought as I’m keen to get into coding but this time I took the PSD files I’d already created and used them draw up a document outlining the page structure, global elements, colour palette, image dimensions, fonts and font sizes. This proved to be a really useful tool for me as it helped answer a lot of questions that came up as I created new layouts and helped to keep everything consistent.
With the guidelines completed and the main templates designed in Photoshop it was time to start coding.
Having just read Adaptive Web Design by Aaron Gustafson I was keen to try out his technique of splitting a CSS file into three distinct blocks, namely: typography, layout and colour.
The main reason for using this approach is that the layout section is contained within a media query so any older browsers that don’t understand the complex layout styles would still get the colour and typography settings and as long as the HTML I produced was semantic and linearised well would still generate a decent user experience.
At first I was constantly asking myself where this entry should go and which section does this live in but after a while it clicked and I was soon building a style sheet that was lean and efficient but still easy to modify and maintain (I hope, we’ll see how I find it in six months’ time).
Another benefit of this approach is that potential stacks are much easier to spot. By that I mean styles that share common elements that can be grouped so, for example, all my
font-weight: bold declarations are together in the typography section, all my
float: left declarations are in the layout section and all the
font-color: #333 declarations are, you guessed it, in the colour section. There’s very little repetition which makes it a dream to work with especially if the Police ever decide to change a colour or a font.
Of course, this could be further improved by using a pre-processor but my SASS for Web Designers book is next on the reading list so that’ll have to wait for now.
I was also able to make use of a few CSS3 techniques I’d not used before: a keyframe animation for buttons and to highlight recommended search results, text rotation for the hide page panic button, SVG filters to turn coloured images grayscale and then back to colour when hovered on to keep the sprite file small, border-radius for rounded corners, some nth-child selectors to handle widths and margins rather than applying specific classes and header and footer elements with multiple background images.
Lastly (although this really should’ve come first) the whole thing sits in 960px grid and I used Khoi Vinh’s technique for creating relative rather than fixed units, as outlined in his book Ordering Disorder: Grid Principles for Web Design, for the elements that sat inside the page container.
For example, a call to action panel that the PSD tells me is 840px wide becomes 87.5% wide once it’s coded up (840 / 960 = 0.875 and once you move the decimal point two places becomes 87.5).
Doing it like this means that if the design is ever scaled up (say for widescreen displays or TV) or down (for tablets and smartphones) the proportions remain the same because each value is a percentage of the overall width. Of course there would still need to be some adjustment made as screen space increased or decreased but the job is half done if and when phase two comes along.
As well as using a grid for vertical alignment I wanted a consistent
line-height to govern the horizontal alignment, or rhythm as it's sometimes called, for which I used an 18px baseline and made sure every element's height was divisible by eighteen - not always as easy as it sounds.
As we got closer the go-live date I wanted to feel as though I was still in control of the CSS and had stuck to the principles I’d set out with. So often a project gets rushed out the door as the deadline looms and then comes back to haunt me when it comes to updates and maintenance but this time was different and I really feel as though the skills I’ve put into practice in this site will be used again and again in other projects.
- Twitter integration