Does my website have an optimal user interface and user experience across devices? This is a question countless companies and web developers continue to ask themselves. Responsive web design created a lot of buzz in 2012, and will continue to become the new norm for brands of all sizes. Oliver Lindberg, of Net Magazine, recently put together a list of the top 25 responsive sites launched in 2012. Here are the highlights:
“Never have I seen Futura used so bravely!” exclaims designer, speaker and author Elliot Jay Stocks of Edenspiekermann’s work for Berlin-based music software developer Ableton. “It works, though, combined with bold imagery and a vibrant colour palette.”
Stephanie Rieger, designer and co-owner of Yiibu, a wee mobile design consultancy based in Edinburgh, agrees: “This [is a] gorgeous, fun and delightfully on-brand site. Parts of the site are a bit heavy but given the audience, the nature of the brand and the need to incorporate music and video, I think they’ve done an awesome job. Be sure to hunt for the many little creative (and practical) design touches – like rotating column labels on a software comparison table to better fit smaller screens.”
2. Adobe & HTML
“This site, which showcases Adobe’s web-related products, is actually more of an adaptive layout rather than a real responsive design,” explains designer and developer Stephen Hay. “Performance could be significantly improved, and I’m not fond of the navigation taking up most of the space at the top of the page on mobile. The reason I mention this site here is that both the adaptive layout and the content signal that Adobe, behemoth of print design software, is beginning to acknowledge the modern web and the needs of its designers. Adobe, with its design roots, has an opportunity to turn this site into a graphically appealing, full-blown responsive design.”
3. An Event Apart
“The freshly redesigned An Event Apart is not only gorgeous but also wonderfully crafted,” says Tim Kadlec, web developer and author of Implementing Responsive Design. “[The developers] use SVG icons when they can, and fall back to PNGs if they have to. Images are lazy-loaded as they come into view. For example, as you scroll down an events page you can see the speaker images subtly fading in. All this plus an appealing and clean design!”
4. BBC News
“The best responsive site of 2012 was the BBC News mobile website,” says Paul Robert Lloyd, designer at Clearleft and author of .net’s monthly Responsive column. “While it doesn’t yet scale up to desktop browsers in terms of layout, it’s responsive in the truest sense of the word.
“Designed with a mobile-first mentality, it scales to meet different device characteristics beautifully. It is a fantastic example of progressive enhancement. There’s lots of discussion around responsive images, but the BBC’s approach is starkly pragmatic. The markup references just a single image, that for the headline story, and conditional loading means only more capable devices receive the highly optimised images for other stories. The site is not only accessible from any device but blazingly fast, too.
“In the next year, I’d like to see greater focus on performance over visual design and layout. In that regard, the BBC News mobile site is a great example for others to follow.”
5. Build 2012
“One of my favourite parts of the year is to see what Andy McMillan and Kyle Meyer come up with for the new Build conference site,” enthuses Reagan Ray, lead designer and one third of Paravel. “They went responsive for the 2012 version and I think it’s their best effort to date. Can’t wait to see 2013.”
“Contents magazine may have an unfair advantage with Ethan Marcotte himself as their creative director – but nobody said my choices had to be fair,” says Mat Marquis, designer/developer working at Filament Group in Boston and founder and chair of the Responsive Images Community Group for the W3C.
“Contents boasts beautiful typography and an overall design that keeps their content – as one might expect – front and centre at any size. The design is backed by per-issue illustrations that wrap around the copy in differing ways depending on the breakpoint. The illustrations enhance the design, but never serve as a distraction. It’s a genuine pleasure to read, and that’s really what this ‘web design’ stuff is all about.”
“Again: choosing a site with Chris Coyier’s name on it feels a little like cheating, but fair’s fair – the guy is a beast, and he did a hell of a job with this redesign,” Mat Marquis laughs. “Chris manages an insane amount of useful information on his site and he does so with a design that’s not only logical and usable at every screen size, but has a ton of personality.
“Honorable mention here goes to Chris’ codepen.io (not yet fully responsive when editing) which is an incredibly useful tool for creating quick demos and test cases. There’s some amazing work on there.”
“Currys may not have what we consider to be the level of design a lot of agency and personal sites have, but I’m picking it for its significance to the wider uptake of responsive design techniques. It’s the first truly large-scale ecommerce site I’ve seen that’s embraced responsive design,” explains James Young, creative director at Offroadcode and author of ‘The top responsive web design problems … and how to avoid them!’.
“It provides a good experience on a range of devices while dealing with a massive amount of content and products of all shapes and sizes, and includes an easy-to-use buying process – all within a single codebase that’s clearly been well considered by the Currys web team.”
9. dConstruct 2012
“Apart from the incredible speaker lineup, the dConstruct site itself is a beautifully crafted responsive experience,” says Ben Callahan, president of small Ohio-based agency Sparkbox. “My favourite detail of the site is the navigation. Note the added iconography for a smaller viewport experience. This shows that real care was given to the touch target area and signifies an implicit value [placed on] those users viewing the site on smaller devices – a mobile-first mentality. Well done @clearleft!”
“When a site with the media complexity of Disney went responsive, it really showcased the validity of the approach for delivering multimedia content on the web,” remembers Scott Jehl, web designer/developer at Filament Group. “The site’s understated, clean design highlights the rich imagery from Disney movies and television that can be viewed inline on the site, and a nice use of Ajax and history.pushState makes for subtle, non-jarring page transitions. The site also layers nice contextual interactivity, such as gesture-driven carousels for touch devices and off-canvas page-pushing navigation on small screens.”
Others on the list include The Next Web, Starbucks and many more. See the full list here. Don’t forget, the best way to test for responsive design is through in-the-wild testing. With real world tests you can ensure your site renders correctly every time and on every device.