Responsive Gallery – January 2013

Quartz

Quartz is a ‘digitally native’ news site that covers business and technology in view of a global economy emerging from financial crisis.

The website is intriguing, not least because it looks and behaves much like a native app, but in way that doesn’t feel alien to the web. Editor in Chief, Kevin Delaney, told us that this was a key aspect of the site: We wanted to create a product tailored to mobile and tablet devices, while having a site that was accessible via the free and open web. For the design, his team took an unusual approach: We started with tablet as the primary design reference and then, with the architecture in place, designed for mobile and desktop. This worked well, and we’re likely to adopt it for future projects.

Websites that try to mimic native applications tend to fall apart on the web. Quartz however is truly web native, adapting well to the different environments; it works just as well with JavaScript disabled for example. It’s blazingly fast, too: We worked hard to optimise the performance of the site, limiting the number of data calls we make, knowing that some people will be accessing our site via non-optimal data connections.

Homepage requests/size

67/1.06 MB mobile, 68/1.09 MB desktop

---

Nominet

Nominet is the registry for the .uk country code domain who also provide a number of other infrastructure and domain support services. Their recently refreshed website was designed by Nomensa and developed internally by their web team led by Al Power.

We asked Al why Nominet choose a responsive approach. The responsive route provided us with a framework to prioritise features with stakeholders, forced us to keep things simple, and display our content in a nicer way on a variety of devices.

Having the site designed by an external agency might have proven problematic, so the success of the project relied on face-to-face communication: Sitting developers and designers down together very early on to brainstorm over several days really helped iron out some initial challenges.

Reflecting on responsive design in more general terms, Al told us: There are some really interesting discussions regarding responsive design, and as a developer it’s easy to get obsessed with these things. However you have to get the basics right first: keeping content as simple and relevant to users as possible.

Homepage requests/size

52/568 kB mobile, 54/578 kB desktop

---

SB Nation

SB Nation is a growing online sports community. The main site is backed up by a network of smaller fan-centric sites (e.g stumptownfooty.com) that publish more localised content, with all sites sharing a common design language. Design and development was done in-house by the product team at SB Nation’s parent company, Vox Media.

The move to a responsive layout for these sites came as part of a larger scale redesign, which included the creation of a consistent identity system. All 315 blogs now have beautiful badge-like logos, each designed by Fraser Davidson. The new design language is bold and original, and allows for a number of beautifully art directed articles too. Such rich, extensive and image-led content comes with a hefty price however; large downloads, and sometimes delays in being able to see the content. This is particularly true of the homepage, although given its richness, we were surprised to see it come in at just under 2 MB.

Homepage requests/size

75/804 kB mobile, 66/2.11 MB desktop