Responsive Gallery – August 2012

BBC News Mobile

For many years, the BBC News website was embarrassingly dated and accompanied by a range of different editions: mobile, PDA and text-only. A redesign in 2010 introduced the BBC’s Global Experience Language (GEL), heralding a fresh new design direction for the BBC’s digital services. Now, the mobile news site hopes to take the BBC towards a responsive future.

Chris Russell heads up the BBC News product. In parts of the world, the vast majority of users access the internet via a small screen and a keypad. This need for universality is why BBC News is enthusiastically developing responsive design solutions.

Such enthusiasm can be found on Responsive News, a blog that’s accompanied the development of the mobile site, describing in detail some of the innovative approaches the team has taken. Developer, Tom Maslen: Around 80 significant browsers/operating system combinations regularly use our service across the globe, and there’s a long tail of hundreds more.

Ultimately, the mobile site is intended to replace the ‘full-fat’ site. Yet, by taking a mobile first approach, the site has been designed to work across this broadening device landscape from the very start. This is progressive enhancement made real. Every device receives an initial payload of just 21 kB before a JavaScript application detects whether the baseline experience should be enhanced, based on the capabilities of the device.

The result? The site is blisteringly fast – and it looks great too. In that respect, this could be the most important responsive redesign of the year.

Homepage size

148 kB mobile, 242 kB desktop

---

Weightshift

Weightshift is a small digital design studio in San Francisco that’s worked with big clients like Microsoft, WordPress and Mozilla.

I’ve spent many hours studying previous versions of this site, my jaw dropped as I admired the level of craft and attention to detail applied. So when I noticed that the site had relaunched with a responsive design, I was keen to study it further.

The new design is noticeably lighter and more sparse compared to its predecessors. I wondered if this was the result of designing for smaller screens, which can encourage focus. Studio founder and principal, Naz Hamid: The aesthetic idea we had was to be ‘airy’. Coupled with the desire to focus on the content, we devised the central column focus, which aligned nicely with the mobile-first approach.

Photoshop saw little involvement in a largely browser-driven design process: Designing in code allowed us to iterate quickly and fail, but also succeed faster. You get the ‘feel’ of something almost immediately than if you were to design a static composition. This approach lead to the site mixing both fluid and adaptive layouts: We opted for a 50/50 approach. Breakpoint-static for wide screens, 960 and iPads but fully fluid for mobile phones.

Homepage size

640 kB mobile, 640 kB desktop

---

SALT

SALT is a collaboration between two surfers, Tyler Wolff and Nabil Samadani, who decided to bring well crafted surfboards to the thriving surf scene they discovered in New York City.

The website is visually arresting, with a home page that announces itself with beautiful full-canvas photography. Yet delving further into site, reveals an equally inspiring aesthetic composed of considered typography, a purposeful grid and seductive product photography.

The use of full-canvas photography has it’s cost, and the homepage is a hefty 1.3 MB. Responsive image techniques can be fiddly to work with, but would pay dividends here. However, the minimal aesthetic of the internal pages offsets this somewhat.

Homepage size

1.34 MB mobile, 1.34 MB desktop