The BBC homepage as you’ve never seen it before

jpg versions

(HTML versions, ep2, ep3, ep4, ep5)

Last Sunday saw the final Planet Earth Special homepage go live and last week was spent chewing over the data, some of which I can reveal now. (Some of this is lifted from a report produced by the BBC feedback guy, Doug, so kudos to him)

As you can see from the designs I wanted a massive HD style treatment, landmark series, three years in the making, incredible images, sort of feel. So I commandeered some of the banner space and ate into that rather than leave the banner there and push content down, plus it wouldn’t really work colourwise,

Here is some of the design work that led to the final design..

Polar Bear

As you can see, the prototype was before I had any assets, or even an idea of the running order of the show. It’s also using the Dalek template and a generic Earth image, and it’s light text on a dark background. The reason for this is a: the underlying picture is dark, so light text has to come into play, and b: when I’ve used white text on normal homepage treatments, they seem to do really well. In this example not all the text is coloured properly, but it gives you an idea.

As different assets came in the idea evolved. The transparency is how we’ve been laying the text box over images since the 2002 redesign, so it wasn’t that much of a leap to apply it to the entire page. The other good thing about this is that it allows portrait format images to be used. I particularly like the Angel Falls one, where the water cascades under the browse box, when the boxes went solid this image just dies. With anything like this there’s always a bun fight over who gets the best editorial images and which ones are the killer ones. At one point, the polar bear sequence was considered the money shot, indeed the Radio Times went with this image. Then the whole leopard thing came up, only 40 left in the wild.. and I just felt I had to go with that. The hippo was another option for the fresh water ep, but there’s lots of shots like that, and I thought the underwater cayman was more compelling.

Sadly the transparent effect would have required a complete recode of the page as we’d have done it with 24 bit semitransparent PNGs, so all the boxes had to be solid. Some of the PNG thinking made it into the final design though in the form of the BBC tiles laid over the image. This was more than just an artistic choice. The tiles had the H1 tag, so the page would work semantically… This is normally done by the logo, but I’d removed that.. So it was a case of finding a design solution to an HTMLy problem that wasn’t even on my radar. And I think we found a pretty elegant one, thanks in part to our coders who are really nice guys n gals.

So, the final page was all set to go. At the bottom of the page we placed a one-off link labelled “About today’s homepage design” which linked through  to a bespoke feedback form requesting feedback. This page featured a 1 to 5 on “How does this special design compare with the normal homepage?” and two text boxes labelled “Is there anything you would change about the special homepage?” and “Any other comments about the two designs?”. You can still see it here

Some of the following results are from the final 4 weeks. On the first week we simply had a comments box which did not gather the level of detail required, there was also a technical problem with the first week’s treatment going live.

 In total over the final 4 weeks we received 547 responses from the public.We also received 59 specific responses regarding the layout structure of the page, this was split with 43 commenting that they didn’t like the “large white space” and felt we should “scale to fit their monitor” at the right hand side of the page and 16 commenting that “they had to scroll down the page”.
It should be noted that this extra scrolling was actually a perceived difference and that there was very little difference in vertical positioning of news and sport compared with the normal homepage, particularly when a semi permanent panel is used as it was around the time of the first (and I think 2nd one). Also the ‘large white space is there everyday! As is always right justified, the darker colours just highlighted this fact.

On the first two of the special homepage we received a number of comments regarding the dark lines between boxes. A number of people perceived these as being black rather than part of the background image. This is because the 2nd image (mountains) and the third image ( the cayman) had darker lower areas, and it’s those that I extended down the page. There was no real way around this.. As we had to have light boxes on top, with dark text on top of that..  Perhaps the bars wouldn’t have been so strong had my original design been the one we used as the image underneath would still have been visable through the transparent content boxes. This effect was much less noticable for the orange desert one.
For the one on 26th March (and all the ones following) I asked the CSD to reduced the cell spacing to 3 pixels, this is reflected in the level of feedback. With hindsight I’d have done this for the first two as well. But it’s a good example of why this feeding back is so important, we tweaked the design after each session based on very specific live date coming in, plus it’s a lesson in listening to your audience.

Other stuff
2 people that felt we should have used moving images and 1 person who said they were pleased we didn’t use moving images
9 people explicitly mentioned we should keep the design for everyday use
8 people explicitly said we should only do this for special occasions
2 people said we should move away from a table layout (Amen!)
1 person mentioned we should make the boxes slightly transparent (This may have been an insider?)
1 person checked our w3 validation.

Out of 547 votes 62.5% of people said they either “Preferred the special homepage but would change some things” or “Preferred the special page” this compares to 29.5% who “Prefer the normal homepage” or “Prefer the normal homepage but would change some things” with 8% sitting on the fence.

Where next? Well we should deffo look in to a scaling CSS driven design for future use given the prevalence of high resolution displays. We’ve done this on the new TV page. And we should and will continue to ask our users to get involved and give us their thoughts… more on that soon!

6 Responses to “The BBC homepage as you’ve never seen it before”

  1. 1 Keith April 11, 2006 at 3:53 am

    The changes in design looks great, gives it a far more…’m not really sure of the right word. ‘Epic’ comes to mind, it feels alive compared to the standard which is rather dead, just a collection of boxes sitting on a static background. Well anyway, top job.

    Question though. How did you plan to achieve the semi-transparent effect in IE6 and below? The only decent way ‘ve found is a particularly nasty hack using a transparent GIF, DXImageTransform and a slab of JavaScript that applies it all. I suspect it works alright for one or two elements on the page, but ‘m having to print out individual squares many times over which results in a great slowdown in IE (a minute to finish rendering the page).

  2. 2 Fraser April 11, 2006 at 11:46 am

    Hi, I’m the friendly senior coder guy associated with this. 🙂

    The solution for PNG opacity on Win IE6 and 5.5 indeed uses the DXImageTransform, but it doesn’t use any JavaScript. Instead it uses valid CSS and IE’s conditional comments. Its still a work in progress solution, and there are some very odd bugs in IE6 and 5.5’s use of PNG’s but it seems to work pretty well so far, and I haven’t noticed any performance issues. However, it does require a substantial change to the Homepage code in order to work (read: complete re-write).

    Unfortunately we don’t have the development time, resource or ultimately money to re-write the Homepage to use the proposed solution. Thus the pages that did eventually go live for the Planet Earth promotions, based on these designs, did not feature the transparent parts of the design in their full glory, although we did use a few bits of PNG transparent jiggerypokery for the promo’s themselves.

    To say that I’ve been eager to re-write the homepage properly for years is a slight understatement – I have in fact produces several prototype re-writes, but unfortunately most of them have never seen the light of day. Damn thee infernal internal red tape!

  3. 3 Keith April 12, 2006 at 10:50 am

    g’day 🙂

    I’ll have to take a look at this, it could solve a big problem for me. By any chance, could you enlighten me further on the odd bugs in IE6/5.5 that you found?

    A pity about the Hompage. Maybe they’ll let you do a rewrite for IE 9 :p

  4. 4 Fraser April 20, 2006 at 2:17 pm

    This investigation highlights a possible way of doing it, and elabotares on one of the main probelms I discovered – links becoming unclickable.

    I have written an internal (to the BBC) document on PNG’s, but its not externally available.

  5. 5 Martin April 21, 2006 at 5:15 pm

    >> Damn thee infernal internal red tape!

    I can’t help but feel a pang of guilt having in the past been a bearer of much of the infernal internal red-tape

  6. 6 Keith April 28, 2006 at 5:56 am

    Thanks, I think I ran across that about a year ago when I was researching the JavaScript solution, not sure why I didn’t adopt it instead. I’ve applied the new hack and it’s working like a charm, cheers.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This blog is no longer being updated

I've left it here for historical purposes. Please visit my new blog at


These are my personal views and not those of Channel 4 or the BBC
April 2006
« Mar   May »

%d bloggers like this: