Making BBC One's website responsive

Words: Paul Lloyd

Following the launch of its responsive news site 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.

Ste Everington 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 issue 232.

Now read these!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.