Responsive Gallery – Summer 2012

Readlists

A service from the smart folk at Arc90 and Readability, Readlists helps you collect articles found on the web and bundle them into a single e-book for reading later.

Although not directly related to Readability (yet doubtless created to demonstrate what’s possible with their API and drive users to the service), Readlists shares a similar vernacular with its literally and highly crafted aesthetic – checkout the custom scrollbars! Tyler Gaw, front-end developer at Arc90: The design process on Readlists was very iterative. I went through three or four full designs, markup and css included, before landing on the one that’s live now.

The site adapts beautifully to the constraints of different devices; note for example how the ‘Read Now/Later’ action appears on hover, but on touch displays is always present.

Given Arc90’s work on this product, can we expect a responsive update to Readability? Readlists has definitely been a playground for a number of new things that I’m hoping to introduce to Readability and a responsive design is high on that list. I’m not sure I know how to make a fixed-width site anymore.

Homepage size

420 kB mobile, 381 kB desktop

---

Contents Magazine

Contents is an online magazine that covers content strategy, online publishing and editorial work, with issues rolling out over a six to eight week period. With a site designed by the father of Responsive Web Design, it warrants closer inspection.

As you’d expect, articles are beautifully typeset and easy to read, with each issue featuring bespoke background imagery that provides a subtle, unobtrusive frame for the text. The use of larger type on the desktop layout is also welcome.

In his recent article The restriction of type, David Bushell suggests that with so much focus on pure content, we’re in danger of losing our license to design. I asked Ethan for his take: Maybe Contents isn’t the best rebuttal to David’s excellent points. But I wonder, though, what he’d consider an example of a successfully ‘branded’ mobile experience. To my mind, the emphasis on content doesn’t exclude an attention to brand: it just forces us to reinvest some attention in the content itself. A typographically-driven identity doesn’t sound like a bad thing.

Homepage size

550 kB mobile, 808 kB desktop

---

SVT Nyheter

Last issue we looked at the BBC’s new responsive news site that’s designed specifically for mobiles and tablets (at least for now). Providing an opportunity for comparison, Sweden’s national broadcaster SVT have recently redesigned their news website too. Unlike the BBC, their site works on all devices. SVT’s lead interaction designer, Johan Hallberg: In a world with a growing number of devices and screen sizes, we want to create sites that are both user friendly and technically scalable. For us responsive design is a step in that direction.

The resulting design is clean and smart; although having stories open in place can be a little disorientating. While the SVT site one-ups the BBC with a responsive site that works across devices, there seems to be little optimisation for mobile. On narrower screens, pages show the same number of stories, features and photos, which can result in downloads of around 1 MB. Hallberg: There are always compromises on the way to making technology and content ambitions work together. It takes iterative and incremental development to go from good to great.

Homepage size

1.05 MB mobile, 1.05 MB desktop