BBC Responsive Design Day

Chris Ware is the Front End Tech Lead at the Financial Times. He has a keen interest in creating high performance websites and a passion for automated functional testing, and is guest posting on the Labs blog.

Last week we took park in a Responsive Design Day at the BBC at their White City complex in West London with a view to exchange ideas and best practices for building responsive and adaptive web applications. The day was primarily internally-facing, with many of the BBC Future Media techncial product teams showcasing their work on responsive design and implementation through a morning of short presentations. We saw product presentations on iPlayer, Weather, Radio and Music and the Knowledge and Learning and the Frameworks and UX guys.

It was fascinating to see how each of the teams has come up with their own ways of tackling challenges specific to their product. For example, Jamie Knight talked about how users want different things from the radio offering on mobile devices compared to desktop. When mobile, it tends to be about listening to live broadcast, whereas on the desktop it’s all about catching up with programmes you missed. The challenge is to implement a single responsive design when you’ve got two distinct use cases (answer: you don’t – you maintain two solutions and then make each one responsive to a degree). Other teams saw the problem slightly differently and had alternative solutions.

There were also common themes running through each of the products – how best to define layout breakpoints when using CSS media queries for a multitude of devices, for example. It quickly gets unwieldy, so the iPlayer team simplifies this to just use viewport width and nothing else. Other examples include how to reflow and resize content in a flexible grid layout, or how to serve optimised scalable images and how to handle dependency management on the client so that you only download the minimum and necessary resources for that device (answer: using a JavaScript loader and packaging libraries; for example, low interaction, no touch for feature phones; high interactive, no touch for desktop browsers etc.)

The afternoon was taken up with some breakout sessions around fostering a responsive design culture and community, tooling and testing approaches, clientside vs serverside adaptive behaviour and common design patterns.

Andrew Betts from our Labs team then followed up with his talk on how to implement reliable offline web apps which gave a great close to the day and encouraged people to think about how HTML5 responsive design, offline, progressive enhancement and consideration for devices from feature phones through mobile and tablet up to desktop and connected TV all hang together to create slick, made-for-me apps.

Some really great ideas came out of the day and it was an excellent opportunity for collaboration, sharing ideas and just being open about development practices, technical hurdles and how to foster a culture of best practice between teams and companies. Enormous credit is due to Andy Wilson and Gary O’Connor from the BBC for inviting us and putting together a smooth day of tech talks. Andrew and I were both amused to see that the talks were being filmed from four camera angles (including a roving camera) and edited in real time. If only all tech talks could have the BBC’s production resources!

We’re looking forward to inviting the BBC back to FT Labs later this month to continue with our cross-fertilisation of ideas. We’re also planning an Education themed hack day with our colleagues at Pearson later in the year. With all these events, diversity is absolutely key to the success of the day – the more we can learn from each other, the faster we can all move forward, so if you’re interested in taking part, let us know.