Today we’re announcing BBC iWonder, a bold new brand whose mission is to unlock the learning potential of all BBC content.

We know that people's curiosity is often sparked by BBC programmes, and also by the world around them. BBC iWonder is for these curious minds, and at its' heart is a new content format, interactive guides. Guides will invite people to lean forward, and actively explore a range of factual and education topics from Science and Natural History, Arts, History, Religion and Ethics, Food and more. In this blog post, I’ll outline the features of iWonder interactive guides, as well as what to expect from this new format in the near future.

Interactive guides on three screens

A new way to tell stories on the web

Interactive guides take a different approach to presenting content compared to traditional web articles or TV and radio programmes online. They organise video and audio, rich infographics, written summaries, and activities into stories that make the most of our interactive medium. We know from plenty of research that people learn better by doing, and we’ve designed our guides to be “sit forward,” placing a user’s interactions with the content at the core of the experience. Interactive guides take the audience through a series of steps that ask them to look at multiple perspectives of intriguing questions, always with the chance to reflect on the significance of the story at the end.

The initial set of interactive guides mark the start of the World War One season on the BBC and are presented by experts including Dan Snow, Kate Adie, Ian McMillan and Neil Oliver. For more on these read Executive Producer Tim Plyming’s blog post.

A multi-screen modern media landscape

More and more of our audiences are accessing our content via mobile and tablet devices. In fact, for the first time this past Christmas, the proportion of people visiting the BBC Food website from a tablet or smartphone was larger than those visiting from a PC. This trend is set to continue. With the look and feel of “native mobile applications” getting ever more immersive, our audience’s expectations of accessing content on their phones and tablets is high. Expecting our users to struggle to navigate a full “desktop” website on a tiny screen isn’t acceptable any longer.

We all instinctively know that learning is not something that happens at a single time or place only, sitting quietly at a desk or with a PC. Our guides display beautifully no matter what screen size you view them on, accompanying you as you move through your life - at school, home or work, while you're on the go, or while you wait for something else to happen.

To achieve this, our team has employed responsive web design from our first lines of code. With responsive web design, the devil is in the detail. On mobile especially, response times are absolutely crucial. If a web page takes longer than a couple of seconds to load, you’ve already lost a huge percentage of potential browsers. To keep response times down to a minimum, we’ve had to develop a system that loads in just the essential components of the page at the right times. Mobile-sized images download first, then when the page’s Javascript detects the browser’s capabilities, higher-resolution images get ‘loaded in dynamically.’ This can mean the difference of up to a mega-byte’s worth of content for a browser to download. At that page weight, a mobile browser can become agonisingly slow.

For pictures with a dense amount of information on them, such as infographics, it’s important not just to resize a smaller version of a big image, but to load in a completely different image that’s best for that screen. Usually this means a more “zoomed in” view right for mobile. Our system elegantly handles all this image swapping without the user ever noticing. Try reducing the width of your browser window to see it in action at the link above.

We’ve strived for this ‘invisible’ elegance in other places too. For instance, we load in the correct media player for any device behind the scenes, so that visitors on an iPhone don’t get served a Flash player, which won’t work on their Apple device. In this way, everyone should get exactly the same high-quality experience, all the time.

The BBC also has a firm commitment to both web accessibilityand backwards compatibility, making our experiences just as pleasing on older browsers such as Internet Explorer 8 as on newer, more capable web browsers. We’ve taken care to ensure that for users with Javascript turned off, or for those using screen readers, all the content is both available and understandable.

Being able to repeatedly produce immersive experiences

Over the past year or so, many highly engaging web experiences have delighted web audiences, such as the New York Times’ Snowfall story. When our development team first set out to imagine what our interactive guides experience should be, we looked at those examples with a degree of envy. But we also noticed that most seemed to be “one-offs” and didn't work well on mobile devices. We were adamant that we wanted our new format to have all the qualities of this class of highly immersive story - but tailored for every device - whilst being straightforward for our editorial teams to reproduce quickly and repeatedly.

Those were the three main principles which guided our development, and are the reason the iWonder interactive guides represent such a giant leap forward in the BBC's ability to inspire and support learning. Our editorial colleagues now have a toolkit that lets them to put together and publish these rich stories in hours or days, rather than the weeks that it might have taken just a year or so ago. And whereas in the past, each rich story experience would require its own bespoke code and design, there's now just one codebase to maintain and add features to.

In the coming months, we’re adding a collection of activities that will sit within the guide format's sequence of ‘steps’. Look out for visual quizzes, clickable infographics, and plenty of other digital toys to play with, as the library of options available to our production team grows.

I'd love you to know what you think, so please do leave a comment.

Andy Pipes is Executive Product Manager, Knowledge and Learning

Comments

This entry is now closed for comments.

  • Comment number 12. Posted by Adrian Murphy

    on 13 Feb 2014 11:46

    Looks great. Well done.

    • This entry is now closed for comments. Number of positive ratings for comment 12: 0
    • This entry is now closed for comments. Number of negative ratings for comment 12: 0
    Loading…
  • Comment number 11. Posted by Andy_Pipes_BBC

    on 30 Jan 2014 13:48

    @Steve Day unfortunately I can't see what you are referring to. Are you able to explain please? Perhaps an image or link you meant to post in your comment was removed?

  • Comment number 10. Posted by Chris Dymond

    on 29 Jan 2014 14:08

    I think this is a really big deal. If you've managed to make interactive factual programming on portable screens genuinely fast and cheap, it's huge. Gamechanger. Well done! :)

    • This entry is now closed for comments. Number of positive ratings for comment 10: 0
    • This entry is now closed for comments. Number of negative ratings for comment 10: 0
    Loading…
  • Comment number 9. Posted by Steve Day

    on 27 Jan 2014 11:11

    Andy, will the below not solve the compatibility mode issue?



    That's what I use on our internal apps that happily decide to run in compatibility mode.

    • This entry is now closed for comments. Number of positive ratings for comment 9: 0
    • This entry is now closed for comments. Number of negative ratings for comment 9: 0
    Loading…
  • Comment number 8. Posted by Andy_Pipes_BBC

    on 23 Jan 2014 16:02

    @Gary Hello. Yes, you're right, we're not trying to be controversial :) and CSS media queries is how we're accomplishing some of the 'capability sniffing' - and writing some Javascript to fill in the gaps. We also have clocked the issue of not being able to close the video player, and will be correcting that in the next month or so. Thanks, Andy

  • Comment number 7. Posted by Mahesh

    on 23 Jan 2014 15:57

    @ KernowChris - Thanks for the input. But I feel, test team has performed pretty extensive testing on guides.

    • This entry is now closed for comments. Number of positive ratings for comment 7: 0
    • This entry is now closed for comments. Number of negative ratings for comment 7: 0
    Loading…
  • Comment number 6. Posted by Pongo

    on 23 Jan 2014 15:38

    Nice idea... and very much needed to aggregate the non news articles the BBC has to offer. But as a teacher I think you're missing a trick. This isn't very child friendly and there's no link to any curriculum stuff or even the Horrible Histories shows that really help address a child's curiosity.Seems children haven't been thought of at all in this new service.

    • This entry is now closed for comments. Number of positive ratings for comment 6: 0
    • This entry is now closed for comments. Number of negative ratings for comment 6: 0
    Loading…
  • Comment number 5. Posted by Gary Fuller

    on 21 Jan 2014 14:21

    An interesting idea. You seem mainly to be using CSS3 media queries to get the size change effects in Chrome (which isn't that controversial). The fact that there seems to be no way to close the video down once it is opened is highly annoying however. Still, I like the idea of simple blocks of bold coloured content that resizes based on screen width.

    • This entry is now closed for comments. Number of positive ratings for comment 5: 1
    • This entry is now closed for comments. Number of negative ratings for comment 5: 0
    Loading…
  • Comment number 4. Posted by KernowChris

    on 20 Jan 2014 14:01

    Excellent product.

    Hope the maintenance work is better than the BBC Sport App revision, Which was reported as having faults within hours of launch, before Christmas, and still remains un-fixed.

    These things need testing to destruction and more, something I feel is being neglected in the publishing process at present.

    • This entry is now closed for comments. Number of positive ratings for comment 4: 0
    • This entry is now closed for comments. Number of negative ratings for comment 4: 0
    Loading…
  • Comment number 3. Posted by Andy_Pipes_BBC

    on 20 Jan 2014 11:35

    Hello @Kevin. Good to see that you were able to identify the problem and fix it yourself. You're right in that at the moment, Compatibility Mode (or the "Intranet" mode of Windows RT tablets) is not supported by our product. However, we are looking at ways that this lack of support can be better flagged up for the user if they have that setting switched on.

More comments

More Posts

Previous