Words: Paul Lloyd
Following the launch of its responsive news site (opens in new tab) earlier this year, the BBC continues to send more of its sites the same way. This includes the most recent update to its main TV channel sites, including the website for BBC One. (opens in new tab)
Ste Everington (opens in new tab) is a designer on the project. “We wanted an experience consistent across the devices available, so you can begin to ignore the device and focus on the content,” he explains.
While each channel retains its individual branding, all use a common design framework that adapts itself around video content. This uses breakpoints based on common screen sizes.
“We knew that our framework would have to work across any screen size. But these six breakpoints provided us with a great starting point and gave us something substantial to design and test against.”
The site does provides a number of different layouts though. Indeed, it’s one of the few we’ve seen that makes use of height-based media queries.
Homepage requests/size: 76/516kB mobile, 94/1.13Mb desktop
This showcase was originally published in .net magazine (opens in new tab) issue 232.
Now read these!
- 40 amazing examples of HTML5
- 30 web design secrets to boost your skills!
- 101 CSS and JavaScript tutorials to power up your skills
