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!

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.

Nine

Categories: Learning things, Our work

 

Nine lives, dressed to the nines, cloud nine, a stitch in time saves nine, nine-to-five, the whole nine yards … errrrr … nine years since the last all-new Corvette … ummm … Fluorine has the atomic no. 9 … okay, this is getting tenuous (but I knew A Level Chemistry would come in handy one day).

 

I've been thinking about the number nine because this Saturday, 19 January, Supercool turns nine years old. Nine! That's a lot of years!

Over these years we've been lucky enough to work with loads of great people on some really interesting projects – and every year we learn more and more, helping make us better and better at what we do. It's a pretty darn good job, all-told. Like I said – lucky.

The last batch was ace, so here's to the next nine years.

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.