BBC News mobile website redesign
In a world where BBC audiences have an ever increasing variety of viewing experiences, familiarity between platforms can be hard to find. In the past, creating parity between those platforms has been costly and hard to implement - given the number of devices BBC is required to support.
This project, which is currently underway, utilises responsive design for the first time at the BBC to create an optimal mobile reading experience that scales across multiple devices. Low-end mobiles, smartphones, tablets will be targeted initially, with new 'layers' of the design added to optimise for desktop & IPTV added over time - eventually migrating traffic completely from the current desktop website.
- Product development, UI design, information design, responsive HTML & CSS patterns
Responsive design requires using the same content structure for all devices, which provides a challenge when taking popular features from the desktop BBC News site (in this case, pan-article navigation) and refactoring them for the ergonomic considerations of a compact device.
Navigation menu for smartphones
Another consequence of a compact screen is that the more compelling your content becomes, the faster your user will move away from your UI chrome. This gives you two options; either have your chrome follow the user as they scroll (tricky to implement in HTML, quickly makes the screen claustrophobic) or position your key UI elements in the reading-line of the page.
Traditionally the BBC News weather widget has provided an overview forecast for the next 3 days, targeting the needs of the average desktop user (predominantly office-based & planning ahead). The new widget uses a variable granularity to cater for mobile contexts, providing detailed forecasts for the immediate future (so that the user can see whether they should take an umbrella to the park) whilst retaining the overview forecast for the next couple of days.
Responsive design is still relatively untested when it comes to large, sprawling websites with multiple development teams working in a fast paced environment. A great deal of the work on this project has been creating frameworks and methodologies that will enable consistent, efficient & reliable UX whilst keeping the code lightweight and suitable for bandwidth-restricted mobile devices.
The team has started publicly blogging about the project here. A post I wrote about my work with fluid grids and interface scaling was widely shared & discussed across Twitter by designers such as Erik Spiekermann (FontShop), Oliver Reichenstein (Information Architects) and senior teams at Twitter and Vimeo.