Show sidebar

Feeling a bit green

Categories: Silly, Useful/interesting

It's that time of year when Pantone reveal their 'Color [sic] of the Year', and in 2013 we should be looking out for up-and-coming hue PANTONE 17-5641 Emerald, apparently.

Why? Because, according to Pantone's website, the "vivid, verdant green, enhances our sense of well-being … by inspiring insight, as well as promoting balance and harmony."

I'm not that convinced by the whole thing really, but perhaps there is something useful about it, in that it helps folks to stop and think about colours and colour trends; which is a pretty fundamental part of what we deal with as designers.

So, get ready to witness rails of clothing resembling forests, and a glut of references to The Wizard of Oz's Emerald City in the coming year.

Old and new

Categories: Our work

Have you noticed anything different about our website recently?

Hopefully not a huge amount if you only ever look at it on a desktop or laptop computer. (Other than the change of fonts and a slight re-jig of the Work page.)

Under the hood, however, it's a different story as a while back we did an absolute tonne of development for tablet and mobile devices.

We didn't feel the need for a complete re-working of the site as we're still happy with the design – we made sure it'd last us a good few years – but simply wanted it to work better on hand-held devices. 

And now it does!

The website is responsive; so when you visit it on a mobile, for example, there's no need to do that pinching action thing to be able to read content – the clever coding magic* displays everything appropriately; vastly improving user-experience.

With growing numbers of people accessing the web through their mobile, this is really important; got to think of the future and all that. And responsive design is something we do for clients, so it makes sense for our own site to be responsive as well.

We've always had a 'little and often' approach to the site's development which helps us feel free to play around with new ideas, and to make regular improvements in line with new techy developments. Plus, working on our own stuff needs to be fitted around client projects, so 'little and often' is a perfectly practical approach too.

The new-and-(invisibly)-improved site has been live for some time now, so I admit to not being terribly responsive writing this post – but it remains that we're pretty darn chuffed with our newly responsive old webite.

*It may be apparent that I'm not the technical one in the office.

The current state of design

Categories: Events, Learning things, Nice stuff, Useful/interesting

Gov.uk was officially switched on yesterday, replacing direct.gov and Business Link. It's all part of the government's 'single domain strategy' – a move which will eventually bring all government sites into one place.

Gov.uk crown logo

As part of Supercool's 'Conference Tour 2012', Josh and I went to the Theory of (R)Evolution conference run by Shropgeek the other week. There were lots of good talks but the one that really stood out for me was by Paul Annett, Creative Lead at Government Digital Services (GDS).

GDS was set up in 2011 to revolutionise the way government carries out its digital projects, and how we interact with the government online. The idea has been to change the approach from large, lengthy (and pricey) outsourced IT contracts and move more in-house; to be more efficient and transparent.

Although GDS is a relatively new department, it already has some staggering stats:

  • They've closed down 1,500 government-run websites – so far. The plan is close down around half of the remaining 600 or so. 
  • Long-term contracts have meant that it has previously cost up to £50,000 to change one line of code on a live site. (Red tape is really expensive.)
  • Currently, 1 in 3 phonecalls to government agencies are about a failed online transaction. By eliminating these calls, it's hoped that call-centre costs will be reduced by £1 billion.
  • Despite now using Gmail and, what you might think would be prohibitively expensive, iPhones and Apple Macs, GDS's overall IT costs are already 80% less than those of direct.gov.

The most interesting part of the talk for me, however, was hearing about their approach to design. Just the idea of a government project using words like 'design', 'usability' and 'user-experience' is virtually unheard of in this country – but Gov.uk is showing some real innovation.

Paul took us through the GDS design principles; a brilliantly articulated guide for any large development project. Loosely it's about keeping projects small (as in cutting out any 'bloat'), simple, open and agile. 

An example of the design principles in action

The design principles also include a style guide for written content, which is something even small organisations can follow with regard to writing good web copy.

Of course whilst the Gov.uk site is all shiny and new, content will be tidy, and easy to both find and understand. It'll be interesting to see if, and how, that changes as more content is added over time.

But at the moment it feels a bit weird to be so proud of the government's website.

Better CSS

Categories: Events, Learning things, Useful/interesting

Recently James and I went to Canvas Conf and listened to a number of great talks on web development. We particularly got a lot out of Harry Roberts’ (Senior UI Developer for BSkyB) talk 'Big CSS' which focussed on writing maintainable CSS for big projects. While we predominantly write CSS for relatively small projects we still came away with some very useful ideas and practices that will help us do what we do better.

With CSS we'd always tend to write a rough set of styles that broadly cover the whole project, setting up basic things like a reset, typography, header and footer etc. and then write the rest of the CSS as specific chunks of code that do one thing.

Instead of doing this however we’re realizing that we can break down a lot of that stuff so it's more re-usable, so more efficient. Take, for instance, a list of links that supplements an article; there are many abstractions to this one object that we can break out and re-use:

  • A vertical list without bullets.
  • It has links inside.
  • It might have icons on the left of each link.

We can then apply some or all of those abstractions to another object, like a list of downloads, which would have all of the above plus an additional rule for the filesize meta-data that forms part of each link.

Another aspect we took away from Harry's talk was how important it is to structure your CSS sensibly. Firstly, we have to get out of the pattern of writing our CSS in the same order as the markup ... that just doesn’t make the best use of the cascade!

So instead I think we’ll be following something along the lines of this:

  1. Table of contents
  2. Reset
  3. Typography
  4. Structural framework
  5. Generic objects
  6. Specific components
  7. Style trumps

All the while we can be picking and choosing from our growing library of abstractions.

The final part of all this is comments. We came away determined to use more comments in our CSS; the uses comments can have are endless but for us I think the following practices will be fairly revolutionary:

  • Linking markup to the CSS by adding in blocks of HTML as reference.
  • Explaining weird bits of code or specific techniques used.
  • Linking back to an abstraction when overriding something further down the cascade or in another file.

So over the next few months, we’ll be steadily building a little CSS framework that works for us, with lots of abstractions that we can re-use and a structure that makes sense.