Responsive Gallery – July 2012

Kiwibank

Banks aren’t the most likeable organisations, but I’m developing a soft spot for Kiwibank, a New Zealand-based bank that competes against larger Australian-based rivals.

Their latest advertising campaign suggests they’re willing to stand up for something new “and even a bit crazy”, and in the world of banking, a responsive website is just that. With mobile traffic pushing past 10%, Kiwibank asked Springload to help them become device agnostic. Springload founder and Director Bron Thomson: The fixed-width paradigm has run its course – last year we noticed that 20 people tried to join Kiwibank from their PlayStation 3.

Only the homepage is responsive currently, meaning journeys into the site can feel disjointed. Kiwibank’s social media team have been really open with customers about the changes we’re making, and why says Thomson. The design rests heavily on good copy, beautifully typeset in Meta Serif. Content is really important. We’ve banned Lorem Ipsum, and Kiwibank’s copywriting team work in our office a couple of days a week. Navigation on smaller screens is accessed via an ‘off-canvas‘ menu that slides in from the right, similar to apps like Facebook and Path. It’s clear this is no ordinary bank – can they open a branch in the UK please?

Homepage size

428kB mobile, 487kB desktop¹

---

dConstruct 2012

dConstruct returns for its eighth year in September, with another stellar line-up taking to the stage in Brighton. This year speakers will be Playing with the Future and historian, author and television presenter James Burke will keynote the event.

dConstruct has a history of playing with the future. The 2010 site was one of the first to experiment with media queries, and digging into that code is like responsive design archaeology – we’ve come so far in just a few years!

This year’s site was designed by Bevan Stephens. I wanted the desktop design to be unconventional and break out of the grid, with the mobile layout focused on ease of use. His design gives a knowing wink to the ‘new aesthetic’ while muting the green associated with previous events. Futura may be an obvious typographic choice, but subtle usage in the logo and navigation means it doesn’t feel forced. Mobile users will find another ‘off-canvas’ menu, this time appearing from the top of the page.

Conference curator Jeremy Keith wanted the site to be truly responsive: it should not only look great, but feel great too, and nothing affects the feel of a site more than performance. A minimal amount of JavaScript, monochrome images and a little conditional loading makes the site feel super speedy.

Homepage size

237kB mobile, 233kB desktop^1:1

---

ZURB

It’s easy to think of Silicon Valley as filled with pointless start-ups building apps to rate hamsters, but it’s also home to innovative design agencies like ZURB. Alongside work for clients, they build applications to help others design great products too, through prototyping, rapid iteration and user feedback.

The company has grown considerably in the last three years, so their website needed to catch up. The redesigned site retains the unique ‘ZURB’ feel but augmented with large photography, iconic sketches and bold colours. All combine to produce a really engaging experience.

ZURB have taken an interesting approach on internal pages however, combining different sections onto long single pages, navigated via a left-hand menu. Yet this breaks down on smaller screens where the navigation disappears, and a few pages are almost 2MB in size. Still, much of the site remains lightweight – quite a feat given the large imagery and amount of content provided.

Homepage size

532kB mobile, 546kB desktop^1:2

---

Footnotes

1. Page download sizes measured using Charles Proxy with desktop Safari set at 1024px and mobile Safari at 320px. ↩︎ ↩︎ ↩︎