ΒιΆΉΤΌΕΔ News on mobile: responsive design
The ΒιΆΉΤΌΕΔ News mobile site responsively adapts to a tablet
As Head of Product I am responsible for the way in which we deliver ΒιΆΉΤΌΕΔ News to people on desktop computers, mobile phones, tablet devices and televisions connected to the internet or red button, the four screens of our ΒιΆΉΤΌΕΔ Online strategy.
If you're one of the large and rapidly growing number of people who use ΒιΆΉΤΌΕΔ News Online on more than one digital device, youβre likely to start noticing some changes in the next few weeks and months.
In particular, the minority of users who still use the mobile web browser version of our product will see it change, and Iβll explain how that is part of a wider βunder the bonnetβ project which will ultimately benefit the News Online product as a whole, on all screens.
Now please don't get me wrong. People using that mobile browser site are still a sizeable and significant minority (and I include myself in those numbers). However it is from an age before the modern mobile phones that many of us have, and the changes will replace it with a site which is easier to use on a touch screen device.
Kate Milner from my team has written about these changes, while my editorial colleague Steve Herrmann has also blogged.
We believe this is one of the most innovative and largest scale uses of a new approach to creating web applications - -Μύthat the web has seen, which will ultimately enable us to deliver a better ΒιΆΉΤΌΕΔ News experience, tailored according to how and where you are using it but which is also familiar and consistent.
So my aim here is to introduce the reasons behind what we're doing.
Complexity
As I say, I still use our mobile site. I really do still prefer to simply scroll up and down than the pinching and zooming required to use the main ΒιΆΉΤΌΕΔ News website optimised for the PC. However, I am in a minority. More of our smartphone users now choose the "full fat" recipe of the original ΒιΆΉΤΌΕΔ News website.
I also use our mobile app, as millions do, especially on my tablet. This serves a different need - to quickly get latest headlines - while the website offers greater breadth, depth and explanation of the news.
At that point I want to stop and make an observation. Isn't this all rather complicated? I really don't believe using our product should involve such a range of complex options and questions:
- Which device and software?
- Screen size?
- Portrait or landscape?
- App or "browser"?
- 3G or wifi?
- In the UK or elsewhere?
My brain hurts! I love the convenience of the mobile web as much as anyone, but part of me is looking back with fondness to when the internet was more or less the shape of a personal computer screen, and all we had to do every couple of years was widen the website!
Our challenge now is that the internet comes in all shapes and sizes. Social media sites, email, mapping, banking and all those useful things allow us to seamlessly move from our mobiles to our computers and back again. Increasingly we use tablets and the TV for the web too. And we all just expect everything to work.
Simple innovation
One of the solutions to these challenges is responsive design.
Like many ideas, the thinking behind responsive design is brilliantly simple. Basically, you come to our website, we do the hard work and ask your device all those tricky questions, before delivering a page in the best shape and size, with the most "features", that your device can support.
And like all great technologies, it's easier said than done, and we're blessed with a really talented development team who have driven this innovation. The ΒιΆΉΤΌΕΔ certainly isn't the first to use responsive design, but we do believe we're the first big news site to start to use it for such a large audience, certainly in the UK.
The need is growing rapidly. In an average week, the ΒιΆΉΤΌΕΔ News mobile websites and apps are visited by around 9.7m users worldwide on mobile and tablet devices. That represents about 26% of the total traffic to ΒιΆΉΤΌΕΔ News Online.
And, for the ΒιΆΉΤΌΕΔ, it's not all about the shiny, expensive phones either. In parts of the world, the vast majority of web users don't have a PC or access to the latest fashionable device. For them, the internet is accessed via a small screen and a keypad, but is crucially important to their lives.
This need for universality is another reason why ΒιΆΉΤΌΕΔ News is enthusiastically developing responsive design solutions. Unlike many competitors, we are not a business that can target only those audiences who can afford a certain kind of smartphone or tablet. We have an obligation to deliver our core product to screens of all kinds of shapes and sizes. ΒιΆΉΤΌΕΔ Online has a strategy to deliver to four screens, and that is exactly what responsive design offers.
Our roadmap
You're probably now asking what the plan is and when you can expect change? That's probably for another blog post, since we have a lot of work to do yet. However I can say that:
- This new "mobile" site will work for tablets and computers from day one, and will even offer some basic resizing and reshaping. We'd love your feedback if you use it on any device.
- Our plan is to gradually "optimise" and deliver essential features roughly in order of device size and complexity, starting with the smallest and simplest. So the first imminent step is designed for mobile phones but available to all.
- More features will be delivered to offer mobile and tablet users a better experience with all the advantages of the "full fat" site but none of the awkwardness.
- Eventually, the main website will be delivered in this way too but that is still some way off, and it will be a gradual, step-by-step process rather too complex to go into now, but which we will return to in the future.
Chris Russell is Head of Product for ΒιΆΉΤΌΕΔ News Online
Comment number 1.
At 27th Mar 2012, masterville wrote:"My brain hurts!" Oh dear.
Complain about this comment (Comment number 1)
Comment number 2.
At 27th Mar 2012, JamesRogers wrote:Promise me one thing: use HTML5 and do not use adobe flash.
Complain about this comment (Comment number 2)
Comment number 3.
At 27th Mar 2012, JamesRogers wrote:Is there any policy on doing public beta tests first. The new desktop homepage did a beta, the new desktop sports page did not do a beta, the new mobile olympics site did no do a beta, the new mobile homepage does do a beta, and now this new mobile news site did not do a beta. I do know the ΒιΆΉΤΌΕΔ as having policies. Could anyone inform us on the policy regarding public beta websites?
Complain about this comment (Comment number 3)
Comment number 4.
At 27th Mar 2012, foolonthehill wrote:Actually (and in contrast to my comments on the mobile homepage) on first glance I think this looks like a great new site, so thank you. There's a very good balance of headlines, update time and 'intros', (nearly - see below) excellent use of images, and it's very easy to scan and navigate with short scrolls.
It's only the MASSIVE image in the middle, and the slightly too large top banners that I object to. What a shame that the photo for a single main news item needs to take up half the page. Personally, I'm much agreed with your love for the old site, which does the job I need and am very happy without lots of images, but I also appreciate the need to get closer to the 'full-fat' version. But the sub-items further down the page show a well-managed division between image and text (especially in landscape) - why can't the "big news" item do likewise?
And please let's thin down the headers - on my phone in landscape, with the address bar showing, I can only just see the first headline on the page!
Complain about this comment (Comment number 4)
Comment number 5.
At 27th Mar 2012, Deadmetal wrote:The new design is awful. The headers are too big and it's not as easy to navigate. I suppose people will get used to it but it doesn't work.
Complain about this comment (Comment number 5)
Comment number 6.
At 28th Mar 2012, ChrisBrack wrote:The new mobile news page design is terrible. Far from being innovative and a step forward it is a move back into the dark ages. The previous design was one of the best around and I would have recommended it to anyone, news was there at your fingertips you could easily scan and select what you wanted to read. This retro take it back to the 90's approach is useless, there is far to much scrolling making users essentially search for news stories it's so un-user friendly.
It seems to me to be a classic case of developers trying to be clever without actually looking at what their users require.
Complain about this comment (Comment number 6)
Comment number 7.
At 28th Mar 2012, Charlie wrote:I just hope you provide a way t override the back-end server decision making. For instance, my mobile device (a Nokia N9 with MeeGo-Harmattan, Webkit2 browser, pretty much full HTML5 support including H.264 codec) is on par if not superior to the iPhone yet your web site won't serve me with HTML5/H.264 videos (neither will the iPlayer site). Consequently I dread to think what my device will be served if you add even more "intelligence" to the ΒιΆΉΤΌΕΔ back-end.
So when it comes to the ΒιΆΉΤΌΕΔ News website "working out the capabilities" of my device (and getting it wrong) at least allow me the option to override the server decisions in order that I can still view the full fat website that I know my phone supports perfectly well.
Complain about this comment (Comment number 7)
Comment number 8.
At 29th Mar 2012, JunkkMale wrote:Caption: The ΒιΆΉΤΌΕΔ News mobile site responsively adapts to a tablet
I need to be very careful how I write this, as near any comment I make, even citing ΒιΆΉΤΌΕΔ URLs, gets modded out instantly as 'off topic'.
Given I have several complaints on accuracy at ECU level regarding headlines across the ΒιΆΉΤΌΕΔ news offering, mostly involving compromise to headline message for admitted reasons for space demands across new media platforms, how does the ΒιΆΉΤΌΕΔ justify the basic notion that 'fitting' constrained spaces is a priority over accuracy?
Complain about this comment (Comment number 8)
Comment number 9.
At 29th Mar 2012, Green Soap wrote:Your responsive design doesn't actually work...
As you can see, the bottom row is obscured.
Try again. Or better still, turn the clock back to one that worked.
Complain about this comment (Comment number 9)
Comment number 10.
At 29th Mar 2012, Nick wrote:Well congratulations ΒιΆΉΤΌΕΔ another web page ruined for the users. Please consider the following :-
Too many pictures for a mobile device. If the user is not in a 3G area these take ages to load. Please remember there are users who donβt live in London β the vast majority of the north of Britain does not have fast data speeds ! The users of the ΒιΆΉΤΌΕΔ news site can read so txt is quicker and provides the info in half the space. Please please consider users without access to high speed data. The ΒιΆΉΤΌΕΔ should be access for all β not just access for those who live in cities.
Banners pictures and txt too big. Why ??? Just look at the βSyria to dominate summitβ article The βΒιΆΉΤΌΕΔβ βNewsβ and βWorldβ banners take a third of the page. A picture then takes another third (what does this picture add to the telling of the news β nothing). Then we get something to read.... Compare this to the main site news page. The main site has a higher % txt than the mobile site. This is a classic case of βFormβ over βFunctionβ Doh....
Complain about this comment (Comment number 10)
Comment number 11.
At 30th Mar 2012, JamesRogers wrote:There is one question somewhere else on this blog that I also want to see answered:
How come we users get less info on screen when our screen size increases. See this picture, where users with smaller screens see more info, and people with the largest screens only see the headline and photo.
/blogs/bbcinternet/2012/03/27/three_phones_595.jpg
Complain about this comment (Comment number 11)
Comment number 12.
At 30th Mar 2012, U14179821 wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 12)
Comment number 13.
At 1st Apr 2012, Bob wrote:Having seen the new mobile site can I suggest you put the following on a poster in your developer's office:
a) Just because you can does not mean you should!
b) Function is more important than form!!
c) If it aint broke, don't fix it!!!
Now can we have the old site back please which was clear, clean, easy to navigate and quickly got you to the article you wanted.
Complain about this comment (Comment number 13)
Comment number 14.
At 2nd Apr 2012, sirpajmcgyver wrote:device and software: htc desire s
Screen size: 480 x 800 pixels, 3.7 inches
Portrait or landscape: both
App or "browser": browser
3G or wifi: wifi
In the UK or elsewhere: ireland
I like it on my phone. i think the main article img is a bit big!. ran a test to see how long it would take me to get to sport and weather. took about 2 secs to find it. but you might want to make the header/menu fixed for quick access. this can be done through JS cause i know how apple mobile browser hates it.
Might be cool if you had a different grid layout for tablet devices so you could fit 4 articles in a horizontal line or use a Isotope type design for top stories. if you CMS could pull up different CSS and templates based on device useragent.
works well tho. Took me 20secs to find myself the first time. which is grand. Are the top stories going to be relevant to your geo location? ie N-ireland, US and so forth?
Complain about this comment (Comment number 14)
Comment number 15.
At 2nd Apr 2012, BluesBerry wrote:I've noticed that more & more commentary pages are twitter only. I find this frustrating because I don't want to join twitter (or Facebook). So my capability to provide my opinion appears to be declining, steadily. I suppose it's easier for editors to plop in one-liners on twitter, but I wonder about the quality of input from twitters or Facebook users. Maybe you could provide from stats.
Also I am finding that the commentary pages are becoming less & less important topics - as though someone doesn't want to know what we, the public, think about some very important topics e.g. such as latest election results Myanmar, Syrian opposition groups...
Also, I have noticed that some commentary pages are months old, and probably no longer in use; so why don't you clean house?
Lastly, I find it frustrating to find a site closed for commentary when I finally find a topic that I'd like to get my teeth into. Isn't there someway that you could indicate closed for commentary on the editorial listing vs me having to go to the site only to find out it's closed for comments?
Have you thought of opening all topics for commentary, or is that just too much for your staff?
Thanks for your attention,
Frustrated.
Complain about this comment (Comment number 15)
Comment number 16.
At 2nd Apr 2012, noyon wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 16)
Comment number 17.
At 3rd Apr 2012, Lydia Dusbin wrote:I never saw the original design. I quite like the new one. I doubt I'll ever use it though as I use other news sites in preference, and the ΒιΆΉΤΌΕΔ's news is better served by the standalone app.
Complain about this comment (Comment number 17)
Comment number 18.
At 4th Apr 2012, Stu Wolf wrote:I understand responsive design, and this article is making my head hurt. Simple concept, though complicated to implement. The site knows what size screen you're using and customizes the interface for the the device your viewing it on. Why is this articles so vague and overly complicated?
Complain about this comment (Comment number 18)
Comment number 19.
At 5th Apr 2012, ChrisRussell_ΒιΆΉΤΌΕΔ wrote:Thanks for all your comments. Here are a few answers for people.
JamesRogers - there is no set policy on doing public beta tests. It's not something I object to but we find it is more difficult on a large and complex product like News where we have many different product features and pages. We will make our product development more a case of gradual improvement and adding new features than big re-launches and redesigns in future, which means a full scale beta will be less necessary. We have also done some multi-variate and A/B testing recently, showing a proportion of the audience a change on part of our web pages to test their response, and this is very useful when done at the right time.
Foolonthehill and sirpajmcgyver β on the larger tablet and desktop devices, the main image is indeed rather βMASSIVEβ. As we adapt responsive design for bigger screens I expect we will be changing this and offering different views, such as a different grid. Thatβs the beauty of what responsive design can offer us β improvement for one device but keep it simpler for smaller devices. Weβre already looking at banner size too. And Geolocation is also on our roadmap.
Nick and others commenting about images and screen sizes β Kate Milner has given an answer to these here: /blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html?postId=112171253 but this site really does display differently for different devices and connection speeds.
Milhousevh β weβre working on better video support, and the βfull fatβ site remains available for your use.
BluesBerry β Iβll pass on your comments to my editorial colleagues. Suffice to say they do have to prioritise which stories you can comment on. We do have comments on the roadmap for the responsive design site too incidentally.
Lydia Dusbin β I hope you continue to enjoy the app. We find some people do have a preference which is why we support both the app and a mobile website.
Tengsted - we have only found that bug on one device (Nokia N8) and we're looking into it.
Complain about this comment (Comment number 19)
Comment number 20.
At 5th Apr 2012, JunkkMale wrote:'19. At 09:39 5th Apr 2012, ChrisRussell_ΒιΆΉΤΌΕΔ -
BluesBerry β Iβll pass on your comments to my editorial colleagues. Suffice to say they do have to prioritise which stories you can comment on.
'Prioritise' how, rather being the elephant in the room still.
Control of what goes in, or what does not, is a lot of control.
Newsnight's blog has shut down and all points are twitter of FaceBook. And looking just today at the latter it is the Wild West, only in short chunks. Nifty.
Complain about this comment (Comment number 20)
Comment number 21.
At 7th Apr 2012, JunkkMale wrote:Fitting things on mobiles does present issues. Consider these:
/news/uk-politics-17642736
'George Osborne 'happy' to reveal politicians' tax data'
'Osborne 'very happy' for government to consider publishing MPs personal tax returns'
Not sure, but those headlines seem to be saying rather different things.
Getting a reputation for 'fitting' vs. accuracy seems... retrograde.
Complain about this comment (Comment number 21)
Comment number 22.
At 7th Apr 2012, DBOne wrote:@21 Double posting
Complain about this comment (Comment number 22)
Comment number 23.
At 8th Apr 2012, Green Soap wrote:@22
Worthy of a second post, as it highlights the lack of an answer elsewhere.
Also, when were you made moderator?
Complain about this comment (Comment number 23)
Comment number 24.
At 8th Apr 2012, DBOne wrote:@23 Meant to post this....
Headlines are an attempt to summarize a particular story in a very small number of words and to get you to read it. The Guardian chose the headline "Osborne 'happy' to publish tax data" for this story - pretty similar to the ΒιΆΉΤΌΕΔ.
Although this is a double post.
I wouldn't want to be a moderator...
Complain about this comment (Comment number 24)
Comment number 25.
At 8th Apr 2012, JunkkMale wrote:'24. At 20:25 8th Apr 2012, DBOne
Headlines are an attempt to summarize a particular story in a very small number of words and to get you to read it.
Poor attempts if the meaning is corrupted. Self evidently, some media were capable of conveying the story accurately. Others, less so..
The Guardian chose the headline "Osborne 'happy' to publish tax data" for this story - pretty similar to the ΒιΆΉΤΌΕΔ.
As repeated elsewhere (with profuse lack of apology), citing the similarity between ΒιΆΉΤΌΕΔ and Guardian coverage may not, as such, be that helpful to any case being... attempted.
Although this is a double post.
Besides 'so what?', it wasn't. It had common elements and was essentially about the same topic, but that's the nature of news. Next you'll be saying 'it's different' when various outlets of the ΒιΆΉΤΌΕΔ pool aspects of their coverage.
I wouldn't want to be a moderator...
Well worth a try. And you seem fully qualified.
Complain about this comment (Comment number 25)
Comment number 26.
At 10th Apr 2012, Ian McDonald wrote:Hi, and hope you all enjoyed the weekend.
This post is about the responsive design. How to write concise and accurate headlines for mobile devices is an interesting topic, but it's not what this (or Kate's) post is about.
If you think a comment is against house rules, please alert it. That keeps the conversation from digressing onto house rules themselves.
In this case, the question of concise and accurate headlines is tangential, but I'm not going to go back and moderate it.
Thanks,
Ian
Complain about this comment (Comment number 26)
Comment number 27.
At 10th Apr 2012, JunkkMale wrote:26. At 12:37 10th Apr 2012, Ian McDonald -
This post is about the responsive design. How to write concise and accurate headlines for mobile devices is an interesting topic, but it's not what this (or Kate's) post is about.
OK, where is please... interactively.
'If you think a comment is against house rules, please alert it. That keeps the conversation from digressing onto house rules themselves.'
Not sure who that is directed to. I suspect those not doing what they are supposed to by now:)?
'In this case, the question of concise and accurate headlines is tangential,
I'd argue that, but not, it appears, here. I await where.
'..but I'm not going to go back and moderate it.
Good of you.
Complain about this comment (Comment number 27)
Comment number 28.
At 7th May 2012, U15226599 wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 28)