Responsive Gallery – September 2012

Passenger Focus

Passenger Focus is a consumer watchdog that protects the interests of rail and bus passengers in the UK. They will no doubt appreciate a new site which adapts to whichever device they Happen to be using, be it on the go, or at their desk.

While the site, designed by Browser, is a little utilitarian and includes a header that quite crowded at its fullest width, the underlying layout is incredibly smart and fluid.

Like many adopting a responsive approach, images were a particular concern. David Bushell: We could have easily thrown together a full-width rotating hero full of dynamic train photography and smiling commuters. Instead we created a design that doesn’t rely on raster graphics. They’re part of the supporting cast. This, in addition to SVG vector images used for logos and icons, means the site shines on high resolution displays.

Homepage requests/size

19/389kB mobile, 29/483kB desktop

---

O Music Awards

The O Music Awards is an ongoing awards show presented by Viacom, that honours the intersections of music and technology. The most recent event took place during a 24-hour cross-country, record-breaking road trip with the Flaming Lips.

‘Offbeat and outrageous’, the Happy Cog designed site features an eclectic collection of grunge imagery and illustration. Much of this features on page backgrounds, where an intriguing parallax effect can be seen as you scroll down the page. This is possibly the most beautiful site featured in this gallery, so I was tempted to award it Responsive Site of the Month.

But, and this is a big, unfortunate but. When I visited the site on my phone, I endured a painful wait as the page slowly downloaded all these images (some almost 2 MB in size). Compressing and reducing the number of assets, use of image sprites and conditional loading techniques would have improved the performance massively, yet without such optimisations, the responsive layout is of little consequence.

Homepage requests/size

128/5.05 MB mobile, 176/5.67 MB desktop

---

BBC TV

Following the launch of the responsive news site earlier this year (featured in issue 230), the BBC continues to make more of its sites responsive. This includes the most recent update to its four main TV channel sites (for example bbc.co.uk/bbcone/).

Ste Everington is one of the designers working on this project: We wanted to design an experience that is consistent across the thousands of different devices available, so that you can begin to ignore the device you’re viewing it on and focus more on the content.

While each channel retains its individual branding, all use a common design framework that adapts itself around video content. This framework uses breakpoints based on common screen sizes. We knew that our framework would ultimately have to work across any screen size. However, these six breakpoints provided us a great starting point and gave us something substantial to design and test against.

Even with such device-centred breakpoints, the site still provides a number of different layouts. Indeed, this is one of the few sites I’ve seen that makes use of height-based media queries.

Homepage requests/size

76/516 kB mobile, 94/1.13 MB desktop