Show sidebar

Souped-up CSS

Categories: Our work, Useful/interesting

Since last writing about CSS we've developed our very own CSS framework – and we call it Soup.

Based upon Inuit.css (version 4.5.5) we've extended, adapted, and generally built-up a library of re-usable objects to form a framework that works well for us. Inuit is very lightweight and makes no design decisions whatsoever, so it made sense to start from there – as well as it coming from Harry Roberts (who gave us the talk on CSS).

So why not just use Inuit as a base for each project? Why make more stuff to sit on top of it?

Well, we found that as good as it is having Inuit not making any design decisions, there are some basics that we start with across many projects.

Forms are a good example here – we'll always want a certain set of base styles for all web forms across a site, and they'll have similar design functions – such as a 'normal' and a 'focussed' state – so it seemed sensible to extend Inuit's form setup; all it takes is colour and/or font changes (and any other specific alterations, if required) to quickly create a nicely designed form.

As we tend to use a similar typographical setup with respect to font sizes and vertical rhythm, we also added this into Soup – along with icons, buttons and a bunch of other helpers.

Another part of our extending Inuit to match our own needs is on the responsive side of things. We tend to use a mobile-first approach, initially including only the styles that a mobile device would need, then adding-in extra styling in a separate file for bigger devices (thanks Jeremy Keith).

Finally the other major aspect of Soup is the JavaScript; we include a few things from Twitter's Bootstrap as well as validation, some polyfills and a few other bits and bobs we use a lot of the time.

This approach of having a simple starting setup has saved us a lot of time over the past 6 months of using it. For example, combining this frontend Soup with our backend ExpressionEngine boilerplate helped us get dropletpay.com designed and built in under 2 weeks.

Here's to moving onwards and upwards with the recent release and stabilisation of Inuit version 5!

Design of the Year 2013

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



Image: Design Museum

Tomorrow, the Design Museum will announce the over-all winner of Design of the Year 2013 – a celebration of the past year's very best Architecture, Digital, Fashion, Furniture, Graphics, Product and Transport design.

The winner will be chosen from this shortlist of category winners:

Architecture: Tour Bois-Le-Prêtre, Paris / Designed by Frédéric Druot, Anne Lacaton and Jean-Philippe Vassal

Digital: gov.uk / Designed by Government Digital Service

Fashion: Diana Vreeland: The Eye Has to Travel / Directed by Lisa Immordino Vreeland

Furniture: Medici chair / Designed by Konstantin Grcic for Mattiazzi

Graphics: Venice Architecture Biennale identity / Designed by John Morgan Studio

Product: Kit Yamoyo / Designed by ColaLife and PI Global

Transport: Morph folding wheel / Designed by Vitamins for Maddak Inc.

As a graphic designer, I obviously have a particular interest in the Graphics and Digital categories. John Morgan Studio's brand identity for the Venice Architecture Biennale is just my sort of thing; simple, elegant, well-executed and, once you've seen it, there could be no other solution. It's perfect. And James big-upped (bigged-up?) the government's new website not so long ago in this blog post – and it is a fantastic example of simple, thoughtful, useful design. But neither of these would be my Design of the Year.

Although I'm a fan of Heatherwick Studio's Olympic Cauldron which was longlisted in the Product category, my personal choice for Design of the Year is the one which took the cauldron out of the running – ColaLife's Kit Yamoyo.

Image: Simon Berry

An exceptionally deserving and clever category winner, each Kit Yamoyo contains single-dose packs of oral rehydration salts (diarrhoea is the second-biggest killer of under-5s in sub-Saharan Africa), and the wedge-shaped pods also double as measuring cups for adding the correct amount of water to dilute each sachet.

So, what's the link with cola? And why the weird shape? The pods are wedge-shaped to fit into the spaces between Coke bottles in crates, enabling them to be transported and distributed using Coca-Cola's extensive networks across the region. Ingenious!


A Kit Yamoyo promoter hands out vouchers to mothers. Image: Simon Berry

The story of how the idea came about is a must-read and, as the ColaLife folks say, "It must be the first time that an anti-diarrhoea kit takes centre stage as a design icon."

Design for good at its very best.

(I'll update this post with the official winner once the announcement's been made.)

UPDATE

And the *actual* winner is … gov.uk. Congratulations! (And kudos for getting a press release about the win sorted so quickly an' all.)

I stick by my personal choice of Kit Yamoyo, but the Government's new website was always James' pick; and there is something rather nice about a website winning this gong, I reckon. Especially as many of the GDS Team's (award-winning) design principles run through the work that we do – it's sound stuff!

If you want a closer look at the nominees, they're being exhibited at the Design Museum until 7th July. Although the winner can obviously be seen on an internet connection near you.

The power of television

Categories: Extra-curricular, Learning things, Our work, Silly

For the past couple of weeks, my Tuesday nights between 8pm and about 10pm have been spent monitoring the impact of television. This is not a round-about way of saying I've just been sat there watching the telebox – oh, no; this is work! (Ish)

The very talented Lauren is currently doing rather well on BBC2's The Great British Sewing Bee and, having built the website for her haberdashery Guthrie & Ghani (have a look at the case study), we decided to monitor visits in real-time as we anticipated a traffic spike while the show was on-air. And we were right … sort of.


The site was viewed on a range of different devices and, right, spot the episode spikes within 'hourly views'. Zoiks!

FUN FACTS:

  • There was a massive spike in visits on the day the first episode aired – although the following day actually saw an increase in daily visits to the website.
  • Even discounting the on-air spikes, average daily traffic to the site has increased by a whopping 1000% since the first episode.
  • Episode 2 encouraged 13% more visits than episode 1. (The second episode also got slightly higher ratings – 2.57m compared with last week's 2.56m.)
  • During the show, there were spikes in activity on the website just after Lauren appeared on-screen, and just after she tweeted – particularly if the tweet included a link to the site (unsurprisingly).
  • There was a noticeable increase in activity on Guthrie & Ghani during the programme's 'history of sewing' item … which, ummm, may perchance suggest that some folks aren't hugely enamoured with this part of the show?!

So our hypothesis was correct, that a prime-time TV show would impact the website while on-air – but what we hadn't anticipated was that the number of concurrent users would actually reach its peak about 10 minutes after the end of each programme. I guess it's not that surprising – as people rush to their computers once the show's finished to find out more – but not something that had occurred to us before it happened.

Same again next week – Lauren, pictured above with those troublesome trousers, is still in the running for the title Britain's Best Amateur Sewer (shame about that homonym). Be sure to watch the next installment of The Great British Sewing Bee, BBC2, Tuesday, 8pm to see how she gets on. 

And while you do that, remember I'll be sat on a sofa with the TV on but actually watching my laptop, tabbing repeatedly between umpteen browser windows monitoring real-time stats, following who's tweeting what … and no doubt subconsciously learning a bit about sewing at the same time. That is the power of televsion.