Responsive Gallery – March 2013

An Event Apart

An Event Apart is a conference series that takes places every year in the United States. For ‘people who make websites’, each edition is hosted by web luminaries Jeffery Zeldman and Eric Meyer.

The fixed layout of the previous site had made it difficult to promote a growing number of events, and also prevented the site from becoming a destination where videos and other educational content could be suitably presented.

The new site was designed by Mike Pick at Monkey Do, and developed by Tim Murtaugh. As well as developing a more flexible foundation, the opportunity was also taken to evolve An Event Apart’s brand, separating it from its parent, A List Apart. With a less literary quality, the bold sans serif Freight Sans Pro is offset by Pacifico, a playful cursive font. Location imagery is abstractly cropped and given monotone blue washes, and an orange accent colour is used for headings, links and buttons. The combination of these elements is sublime.

A key feature of the new design is a responsive carousel on the home page that showcases upcoming events. Not only does this expand and contract as the page is resized, but also as new events are added. Using RESS (Responsive Design + Server Side Components), means users of smaller devices can avoid downloading components they don’t need.

Homepage requests/size

31/488 kB mobile, 38/468 kB desktop

---

The Next Web

The Next Web is an online publication that covers Internet technology, business and culture. This has always been a beautiful site, if one overburdened with display advertising. Their recent refresh, designed by Pascal Verstegen takes things to the next level, with its flat aesthetic, two-colour palette and sleek Benton Sans typeface.

The redesign stemmed from a deep personal desire to be able to easily skim through the latest stories just as you would with a high-quality newspaper. said Zee Kane, The Next Web’s CEO. You can now browse the site with keyboard shortcuts, while a timeline—displayed on the left on wider screens (available from a menu item on narrower displays) highlights significant stories from the last 24 hours. That said, the site still delivers a hefty payload on mobile, so there’s more work to be done to make it a truly efficient reading experience.

It’s interesting to view this redesign within the wider context of online news publications, many of which are adapting to the multi-device landscape by adopting innovative new layouts; Mashable is another notable example.

Homepage requests/size

192/2.32 MB mobile, 208/1.61 MB desktop

---

The Guardian

Similar to the work being done at BBC News, the Guardian recently relaunched their own mobile site with responsive underpinnings. Like the BBC’s offering, this site is limited to mobile and tablets right now, with the intention for this to replace the main site in time.

The refreshed site, designing and developed in-house, brings the mobile site inline with the Guardian’s celebrated brand by using the same custom Egyptian font used elsewhere by the newspaper. This alone makes the site feel like a premium product, but other little design details help too.

The new site is unashamedly mobile first. It lives on its own m.guardian.co.uk domain and is optimised primarily for phone and tablet devices. says Andy Hume, Software Architect at the Guardian. In many ways the real challenge is starting now, as we begin the design process to scale up to a point where it can match the richness and scope of the full Guardian website.

Homepage requests/size

56/688 kB mobile, 53/594 kB desktop