Tasks for the BBC Homepage developers are tracked on the team sprint board

Eighteen months ago we launched the current version of the BBC Homepage. Essentially a "lift and shift" of the previous version, it allowed us to move from an older technology stack onto the one built on PHP - a consistent, shared infrastructure that is now used across BBC Online to enable seamless transition between our products.

Then, a few months ago we started work on a new version of the homepage which we launched in beta mode two weeks ago. My colleague James explained our approach in a post at the time - our aim was to arrive at a location-and-time-aware page which showcased more of BBC Online. At least, that was the aim of the visual and interaction aspects of the page. On the more technical side of things, we had other challenges to contend with, which I summarise below.

We’ve aimed to create a stable page that will keep on trucking no matter what happens. Of course, we hope that everything will always work in the way that it’s designed to, but as due diligence we have mitigated against the potential for things to go wrong.

There are two main ways that we do this.

Firstly, we make sure we listen for things going wrong. I know that this sounds fairly obvious, but listening for exceptions and dealing with them rather than simply assuming that everything will always work means that we end up providing a much more dependable experience for the user. So if the new pan-BBC locator widget tells us that something is wrong and we shouldn’t use it at that time, it won’t be displayed. The rest of the page, however, will keep working and users won’t be faced with an error for the entire page.

Another thing we did on the new homepage to mitigate against total failure was to allow each individual area of the homepage to be generated as a separate component. This makes a lot of sense for a variety of reasons, but one of the most critical is that it allows each individual area of the homepage to care about its own problems, and not be bothered with the rest.

For example, when we ask the weather module to display itself, all that cares about is weather. We give it a few pieces of information about what it should display, it then calls the BBC Weather product for that data and displays results. It doesn't care about what's on TV, or whether that's having problems. And frankly, why should it? So, if the ‘What’s On’ module, for example, fails for some reason then it will show a failure but not impact the wider page.

Surfacing the breadth of BBC Online

The most visually exciting area of the page – the carousel – is also one of the areas that required the most developmental input. This carousel is used to surface the breadth of content that the BBC has to offer in a way that wasn’t possible on the previous homepage. My colleague Steve Gibbons in BBC User Experience & Design will blog soon on the way we approached this area from an interaction perspective.

Each area of the BBC that has content surfaced on the new homepage will produce content feeds, which the homepage then parses to ensure that the content will appear correctly on the page.

Within the carousel there are various different “holes” that feed items can fit into – widescreen, portrait, headline and blog post. When the data is parsed, various attributes are examined to determine whether or not the content will “fit” into a specific hole that’s available.

For example, the left-most BBC iPlayer slot is expected to contain a widescreen image. The homepage parses the BBC iPlayer Highlights feed, looking for the newest item that contains a widescreen image of the correct aspect ratio, resizes the image to the correct size for our homepage, and then adds it to our final display feed. The homepage front-end then reads this final feed, and displays the items to our visitors.

Work continues with our colleagues who produce content to ensure that all the feeds contain the correct images and text attributes necessary to display them for the homepage, but it’s good to know that the homepage will cope if anything in the feed isn’t quite right.

Guaranteeing a quality experience for all users

With so many things on the page being movable and reflecting real-time updates, there was potential to get carried away, and complicate the experience for our visitors with slower connections and browsers, and for those who use assistive technologies. With that in mind, our first iteration of the new homepage focused exclusively on making the page work in what we like to call "core mode". At that point in the development cycle, we pretended that JavaScript did not exist. Instead, we simply made sure that every feature on the page would work for everyone, generally with full page refreshes taking the place of an AJAX call.

What this means is that the page will always work, whether or not your browser's JavaScript parser has kicked in yet or not.

Once the page was working as intended, we then layered on the JavaScript. The nice thing at this point was that because we had already built the page to work, we could make the JavaScript fairly stupid. It would ask the server for some mark-up, the server would provide it, and the JavaScript would insert it into the page. As an anthropomorphised meerkat might say - "Simples".

A BBC Homepage product with localisation at its core

As well as ensuring that the homepage would stay running and be able to display information to all our users, there was also the requirement to make sure that we'd be able to localise it to provide native language support for Welsh and Gaelic speakers. Whilst this functionality is not yet complete in the beta of the homepage, it is something that we have baked into the codebase from the outset, to ensure that we will be able to support all of our visitors once the new homepage replaces the existing version. This was a decision we made early on, since it's a lot more difficult to add support for localisation later on in a project.

Ultimately, we intend to turn on localisation on the homepage such that if the user has explicitly set their location we’ll show them news, weather, TV and Radio programmes local to them. As well as this, we expect to automatically set the user’s location to their largest local city if they don’t explicitly set their location.

Next steps

Obviously this blog post only covers a few of the technical challenges in building the new BBC Homepage. There are many other things that we have done (including establishing ways of working with our development co-team in Cardiff) and a whole host of things we're still intending to do before we launch in full, based on your feedback on the beta version. As Randy Bachman once sang, "You ain't seen nothing yet".

Neil Crosby is a Senior Developer, BBC Future Media within James Thornett's Homepage and Search department.