Creating responsive web services
Simon Rooney, acting creative director of the BBC’s user experience and design team, outlines the design process for creating responsive web services for different screen sizes
The BBC uses responsive design to deliver web content to four main types of device: basic feature phones, smart phones, tablets and desktop PCs. The BBC User Experience team (UX&D) have been working on a single responsive design strategy that can be used across all these devices. One of the key objectives was to create a responsive grid which consolidated all the approaches being used across the BBC.
A single model
Previously, two approaches were used to render the global navigation and content containment of BBC Web services - Mobilesque and Barlesque.
Mobilesque was used for viewing BBC web services on mobile phones. It had its own global navigation design specification, with the content container flush to the viewport width. Margin settings were created within the content space.
Barlesque was used for viewing BBC web services on PCs, and again had an individual design specification, with content appearing flush to the container width. Margin padding was outside the content space.
In a responsive context, the differences between the two make transitioning from one approach to the other difficult. Equally, however, trying to adapt just one of the approaches into a scalable solution that can be viewed across all devices resulted in alignment issues and irregular layouts.
BBC News and BBC iPlayer
For a solution, the team looked at how the BBC’s responsive products such as News and BBC iPlayer were using grids, and noted how the two grids used different break points.
The BBC News grid consisted of fixed margins and gutters with 12 fluid columns. Breakpoints were designated to cover the following 3 groups: basic feature phone up to smart phone (144 – 479 pixels), smartphone up to tablet (480 – 639 pixels), and high-end tablets (640 – 976 pixels). For the latter group, another 32 pixels were added to the margin to provide a wider spatial buffer. This helped mitigate text legibility problems by managing the line length of articles when viewed on tablets.
The BBC iPlayer grid was more fluid, with varying numbers of columns. The breakpoints covered four groups, starting with smart phones between 320 – 599 pixels (feature phones up to 320 pixels are not supported by this grid). The tablet breakpoint was set at 600 pixels, tablet-to-desktop at 770, and desktop at 1025 pixels and above.
To see how the layouts for News and BBC iPlayer might provide a guideline for a single containment model, the UX team mapped the product layouts for both against a basic grid structure to assess the number of columns required at the critical viewport width. Scaling up layouts for News had the added complexity of advertising on the page for international versions, which the grid would need to accommodate.
One flexible grid
The resulting model was a flexible 12 column grid, with margin and gutter dimensions adjusted according to 4 breakpoints, so that both the global toolbar and the content align across the different types of device.
Group 1 ranges from 240 up to 399 pixels, covering feature phones through to portrait smart phones. Along with the standard 12 scalable columns, it has a fixed 8 pixel margin and 8 pixel gutters, which are fixed to help control the proportional values used in the vertical spacing (as this cannot be easily scaled using percentages).
Group 2 ranges from 400 pixels up to 599, covering some landscape smartphones and portrait tablets. The grid has a fixed 16 pixel margin and fixed 8 pixel gutters.
Group 3 ranges from 600 up 1007 pixels, covering landscape tablets and some desktop monitors. It has a fixed 16 pixel margin and fixed 16 pixel gutters.
As the viewport width increases beyond 900 pixels in Group 3, content is able to reflow/move from the original primary container (effectively the full 12 column width used in Groups 1 and 2) to a Secondary Container, made up of 4 of the 12 columns on the right. This layout change helps to control the line-length legibility of text content in the primary container.
Group 4 ranges from 1008 pixels upwards, covering landscape tablets and larger monitor screens. It has a fixed 16 pixel margin and fixed 16 pixel gutters. This group can be divided into two variants: 4a Fixed, and 4b Flexible.
In the 4a Fixed version, the grid stays at 1008px, remaining centred in the browser viewport if it should expand beyond this measure. This maintains a maximum content area of 976px that corresponds with legacy desktop formats. This option affords some control of the content width, should it appear in wide monitor screens where a full width presentation is undesirable.
Group 4b, currently under consideration, is a flexible grid covering some landscape tablets plus monitor screens that determine content width by viewport width availability. This grid is able to scale up from 1008 pixels, while continuing to stay flush to the device screen edge. This makes it better suited to tablets in landscape orientation that are wider than 1008px (e.g. 1024 and 1280), as it makes full use of the available viewport width.
At present the UX&D team are working closely with other BBC teams to stress-test the scalable margin. The next phase is to look in detail at responsive typography and collate best-practice recommendations for responsive layout design.