Responsive Design Day

Responsive web design is all about creating websites and apps that automatically adapt so that they are displayed at their best in the environment they are being viewed in – whatever the device or browser being used. In this guest blog Chris Ware, front-end tech lead at the Financial Times, discusses the BBC Academy's recent Responsive Design Day.

Last week, we took part in a Responsive Design Day at the BBC’s White City complex in West London, with a view to exchanging ideas and best practice for building responsive and adaptive web applications.

The day was primarily internal-facing, with many of the BBC Future Media technical product teams showcasing their work on responsive design and implementation through a morning of short presentations. We saw product presentations on BBC iPlayer, Weather, Radio, Music and Knowledge & Learning, as well as from the Frameworks and UX guys.

It was fascinating to see how each of the teams had come up with their own way of tackling challenges specific to their product. For example, web developer Jamie Knight talked about how users want different things from radio on mobile devices compared to desktop. When mobile, it tends to be about listening to live broadcasts; whereas on the desktop it’s all about catching up with programmes you’ve 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).

It was an excellent opportunity to be open about development practices, technical hurdles and how to foster a culture of best practice between teams and companies

Other teams saw the problem slightly differently and had alternative solutions.

There were also common themes running through each of the products - for example, how best to define layout breakpoints when using CSS media queries for a multitude of devices. 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 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 interaction, no touch for desktop browsers).

The afternoon was taken up with some breakout sessions around fostering a responsive design culture and community, tooling and testing approaches, client-side versus server-side adaptive behaviour and common design patterns.

Andrew Betts from our Labs team then followed up with a 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 from the BBC Academy and Gary O’Connor from BBC Future Media 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 of 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.

This post also appears on the FT Labs site.