BBC
Future Media
All‑new identity and look‑and‑feel for the BBC's portfolio of online services to embrace new responsive approaches to web development, starting with the development and release of their award‑winning homepage.
In Detail
Fifteen years ago, the BBC launched the fourth major version of their homepage: the first stage and the bellwether in a systemic rollout of its new online identity, a new look and feel for its portfolio of online services, and a full modernisation of its online technologies.
Sitting in the top fifty most visited websites globally, the BBC homepage serves as the gateway through which over four million daily visitors access this new and updated portfolio of services. Over the following eighteen months, the new homepage was joined by releases of all‑new versions of their News, Sport, and Weather platforms, all built on the same foundations and technologies.
My experience with the BBC spans several years over countless projects and mediums. I started in the development of their interactive educational games for the now‑defunct BBC Jam (formerly the BBC Digital Curriculum) in 2006. Four years later, and for the following two years following that, I joined their Future Media & Technology team as the sole UI developer responsible for the execution and optimisation of the HTML, CSS and JavaScript used in their new platforms (Homepage, News, Sports, and Weather).
At the time, more than 15% of the website visitors were still using IE6, and a partnership between the BBC and Blackberry years earlier meant that there were tens of thousands of people accessing the page every day via the shortcut which had come pre‑installed on the dashboard of their outdated, greyscale Blackberry mobile device. It is fair to say this presented a number of unique and complex challenges that are rarely faced outside of websites on this scale.
Using HTML5, CSS and Glow (before transitioning back to vanilla JavaScript), the new platform sat on top of various standalone PHP modules, themselves fed by a Java back‑end. Development involved total refactoring of the previous codebase, introducing a new shareable responsive framework, touch‑event enhancement, and working interdepartmentally to ensure that these were applied consistently across the various online properties. The sites also had to adhere to stringent guidelines and accessibility requirements and be considerate of the audience's needs and preferences.
This work went on to be nominated – and win – the Design Museum Designs of the Year Digital Award 2012. The platforms continue to adapt, respond and grow as a gateway to the rest of the BBC's online services.
Since my time with FM&T, I have been asked to develop and optimise several show‑specific and commercial BBC Worldwide microsites and maintain a close relationship with the Corporation.
Homepage
The BBC homepage is one of the most‑visited websites in the UK. But, in 2011, they were finding that visitors often bounced away again without delving further into the wider BBC website or other BBC online properties. The unique key challenge that a website like the BBC faces is that the audience is vast and varied: from barely‑literate toddlers up to my great gran. Therefore, the principal focus in the all‑new version was to improve the user experience on‑site and help those user journeys whilst also being the first step in the release of a new online identity.
This was achieved by introducing a content‑card layout within a complex (for its time) HTML5 carousel. Each slide within the carousel represented (and was populated exclusively from) a portion of the BBC: iPlayer, News, Weather, etc. Below this were further explorative links to deeper within the site. After launch, the bounce rate on the homepage dropped by nearly 85%.
Variants & Interactions
Hosting such a broad assortment of different media types and sources, careful thought had to be given to how the card ‑ and their contents ‑ were laid out and how these would respond when interacted with. Unfortunately, whilst HTML5 was now freely supported, things like CSS animations were still a long way off, which meant falling back on BBC Glow for development.
Weather
Aside from the new design language and prerequisite responsiveness, the all‑new version of the BBC Weather website (launched in late 2012) used a new set of icons and a set of background images to depict weather conditions. These became animated ambient themes, powered by the current weather conditions and have been tweaked frequently over the years from static imagery to animated videos, back to (blurred) static imagery.
News
At the end of 2013, the updated version of BBC News was released. A couple of years earlier, there had been a minor overhaul to introduce video, but this was the big one that brought News under the same new identity and responsive approach as the rest of the BBC's online portfolio.
Further Homepage Development
Now on its fifth major revision since the version in 2011 was released, the homepage carousel has been replaced with a more static approach: the page is now considerably longer with a mixture of content from the different properties. Most importantly, the responsive version developed in 2011 but unreleased due to limited device support has finally broken cover.
