BBC News website: responsive design in beta

http://www.bbc.co.uk/blogs/internet/posts/News-responsive-design-in-beta

by robin_reala • 12 years ago

37 47 12 years ago

bbc.co.uk

gabemart2• 12 years ago

Direct link to responsive site: http://m.bbc.co.uk/news

techwizrd• 12 years ago

That link still loads the normal site for me. Is the beta invite-only? I didn't see anything in the article about a link to the beta.

stuartmemo2• 12 years ago

If you scroll to the bottom of http://m.bbc.co.uk/news and click "mobile site", it forces the new responsive site.

nagrom• 12 years ago

That link just seems to detect that I'm on a Macbook and give me the regular desktop site. Are you sure that's not the mobile page for BBC News?

sthulbourn7• 12 years ago

Try: http://www.bbc.co.uk/news?view=beta

yread• 12 years ago

I like how the feedback in the comments is unanimously negative.

Please DO NOT spoil the easy to read nature of BBC news page on the PC desktop
please refine the design at desktop resolutions
Seems to me that content starts to disappear or change whenever there's a 'responsive design' revamp.
A huge backwards step for desktop users
Looks like another redesign which will result in reduced service for anyone who uses a desktop

GenesisMachines• 12 years ago

Well that's an ambitious project for a company that just fired all it's developer departments so it could hire cheaper workers in Salford. For those of you who don't know Salford, it's the music of Joy Devision made solid.

dblacc• 12 years ago

They still have developers in London

sthulbourn7• 12 years ago

Yes there are. I'm one of them.

alanmackenzie• 12 years ago

As a London based developer for BBCWW who grew up in Glasgow I can tell you this is definitely a good thing, the BBC is far too London centric.

mattmanser2• 12 years ago

The redesign has been complete disaster for readability on the desktop.

Go look at:

http://www.bbc.co.uk/news/correspondents/robertpeston/

See how little actual information they've managed to fit into the desktop design, you have to scroll miles just to scan the stories.

The design itself is rubbish with everything seemingly randomly spaced out.

Not impressed at all.

I'm actually getting really disillusioned with the mobile first movement, what it seems to actually mean is completely broken desktop experiences.

And bootstrap, as much as I love it, is part of the problem moving to mobile first.

LoonyPandora• 12 years ago

I can see zero difference in the information density between the existing non-responsive design of that page [0], and the beta version of the responsive design [1].

While your point that mobile first design inevitably causes a lack of information density at desktop resolutions has some merit, it does not apply in this case.

[0] http://cl.ly/UFuw

[1] http://cl.ly/UFzs

mattmanser2• 12 years ago

They have been using those blogs to test the new layout.

If you went there over the last few months you'd be asked to give feedback on the new design.

hrkristian• 12 years ago

I could not agree more.

BBC.co.uk used to be one of my daily check-ins, before the redesign some months back which brought with it that horrible slideshow with unintelligible pictures and a ridiculous lack of text.

I can't actually find what I'm looking for anymore, and I never even bothered making an effort to.

Awful.

afandian3• 12 years ago

By my count there's approximately half as much content on the new responsive site. It feels lazily designed.

callum854• 12 years ago

Are we looking at the same thing? I've got the new site open side-by-side with the last, and the total amount of content looks the same.

afandian3• 12 years ago

I counted the number of items on each page (links to news stories) and came up with 38 vs 75. I make that approx half the amount of 'stuff'.

Here's a side by side screenshot of what I see. http://imgur.com/HmiHhe2

EDIT: I was counting items in the whole page. In that screenshot I count 11 vs 51, which is a greater difference.

redact207• 12 years ago

A lot of valid points on the downsides to the design.

But from a progressive enhancement perspective it's an interesting approach. The users who benefit from this are the ones with a slow connection and old phone, with the desktop + broadband users paying the penalty.

As a desktop user, I don't like progressive enhancement especially as the content I'm trying to read bounces around the page as it gets built.

If the goal is to optimise the user experience, I would have thought a nicer way (for the user, not so for the developer) would be to create content bundles for the different responsive modes and get it served up server side based on interrogating the user agent and looking up which support html5 etc.

danso3• 12 years ago

At the last newspaper I worked at, which admittedly was in a state capital, the vast majority of our readers were during the work hours, at their office desktops. It's never made much sense to me the idea of treating that use case as archaic and ancillary...except that making things "responsive" is seen as a catchphrase of being forward thinking, something newspapers are desperate to jump on having missed the boat for far too long

sthulbourn7• 12 years ago

I'm one of the developers working on this site.

For those of you who are on a wanting to see the site mentioned in the page: http://www.bbc.co.uk/news?view=beta

You can ask us about any of the technical points of our site here: http://github.com/bbc-news/feedback

danso3• 12 years ago

Thank you for taking questions and I apologize for sounding belligerent, I haven't had my coffee yet :)

Can you explain the rationale (besides that it's the default behavior for Bootstrap breakpoints) for making the iPad portrait mode similar to what I imagine the phone version is? Here's what I see on my (Retina) iPad:

http://imgur.com/GUoDwOQ

It's not that the Ukraine crisis isn't important, but this is the kind of treatment I would expect if Ukraine and Russia broke out into full fledged war. In fact, what would the BBC front page look like (on the iPad, or not-full-screen desktop) if war broke out? The current catch-all-and-put-it-into-a-uniform-box doesn't leave much room to emphasize anything. Furthermore, if BBC's top story of the day happened to be something like, well, "China sets growth, defence targets" (which is currently the second story)...I can't imagine this doing anything but killing the habit of visiting BBC as an impulse, because after awhile, as a reader, I'm trained to think that the BBC has ONE BIG STORY...and often, that story is boring.

But as a developer, I see this as, well, they're just using the default breakpoints in Bootstrap. So is that going to be changed? Or is this really what everyone has signed off on? And if so, what are the contingencies? I mean, that is, what happens if: a) War or something like 9/11 * 10 breaks out? or b) Justin Bieber gets arrested for peeing again (more likely)? What are the mockups for those scenarios, and how do they look different than what I've posted in the above link?

edit: And this is what the "Most Read" tab looks like, in every implementation, including stretched browser:

http://i.imgur.com/ulgdLm1.png

I'm assuming that will be changed, but speaking for experience, it's non-trivial to reorganize the fundamental content blocks, especially to add them. I think this is where mobile-first is especially troublesome for content-heavy sites...and in many situations, this kind of view (even though it is given extremely high prominence as the second of 2 tabs) will be left as is, either out of neglect or because, eh, at least it's legible. But what a waste of screen real estate.

sthulbourn7• 12 years ago

Hi,

I'm not sure why you think we're using bootstrap, we're not. Everything in our code base is bespoke (with the exception of jQuery 2). As a result, we get to choose our breakpoints, and they're flexible for now (there's a lot of movement before we go to the next one).

The iPad in portrait mode doesn't have the available width to show the second column without cramming the stories in the main column.

We settled on the breakpoints we have due to the amount of devices we want to offer our content on. We're a service that's trying to work on as many devices as possible, from Nokia 100s to modern desktop browsers. So we did the logical thing of splitting devices into groups, feature phones, smart phones, tablets, and above (desktop & TVs). Some of the larger screened Android phones cause issues since they have a massive resolution, but can't display content as a tablet because it would be hard to read.

You're right, we don't have volume settings right now, so we can't emphasise any of the stories except to make them the "top" story. We haven't got to that point yet, we are after all in beta. All I can say is it will come.

I can't comment on editorial context, just the technology.

The most read functionality is being worked on to be richer.

Thanks :)

theallan• 12 years ago

It seems like there is significantly lower information density in the new design in desktop browsers. Is this something that was looked at - the the old layout's information density was too high? Certainly there are massively more links in the current style in the same viewport site then in the beta.

mcintyre1994• 12 years ago

Nexus 7, chrome. It looks great but you seem to be blocking zooming at all. It doesn't personally affect me but I've always thought the BBC had some of the best accessibility so I'm wondering why - is that going to change or is there a reason for it?

sthulbourn7• 12 years ago

We might consider removing the pinch-to-zoom lock, previously a dependency caused us to enable it.

nodata• 12 years ago

Not sure if those images are supposed to be full of jpeg artifacts. Examples:

http://ichef.bbci.co.uk/news/130/media/images/52908000/jpg/_...

http://ichef.bbci.co.uk/news/130/media/images/73349000/jpg/_...

http://ichef.bbci.co.uk/news/130/media/images/66387000/jpg/_...

Also the top\nread|watched bar has a font that is very difficult to scan, at least under Firefox on Linux.

sthulbourn7• 12 years ago

We use pretty aggressive compression on images at the moment, so yes. We need to start work on guessing the user's network speed so we can show higher quality images.

sambeau• 12 years ago

How do we undo ?view=beta ?

sthulbourn7• 12 years ago

Clear all BBC cookies

e12e• 12 years ago

Is it an artifact of the site being beta that javascript is required for it to be responsive at all?

gone35• 12 years ago

Why can't I pinch and zoom anymore on my iPad? And why is this a thing now?

lclarkmichalek• 12 years ago

Eugh, I _hate_ change

callum854• 12 years ago

I read the negative comments before looking at the site myself, and was expecting to agree with them. But now I've looked at it, I think it's pretty good.

The design could do with a bit more 'refining', but then so could the old one. It's just the old one has the advantage of being something that millions of people have already gotten used to. It's hard to fairly compare your feelings about something you use every day vs something new.

Grue3• 12 years ago

Seems like there's way less content visible on desktop in beta mode. It's not responsive design, it's just lowering the design to the lowest common denominator.

callum854• 12 years ago

I'm pretty sure it only seems like it. If you compare the sites side-by-side, it's all still there, it just feels less crowded. Which is a good thing.

thedrbrian• 12 years ago

Yes, finally the sidebar can take up a third of my ten inch iPad screen. Yes.

nly2• 12 years ago

I'm curious how this design is responsive when, on the desktop, it still doesn't utilise my browser windows full width. It feels even more plain and full of whitespace than the current site.

The screenshots in this post don't show the vast swaths of whitespace on either side of the page. Is everyone inside the BBC still using a 800x600 CRT?

stuartmemo2• 12 years ago

An extremely wide site risks becoming unreadable due to long line lengths, so a max-width will be set to prevent this happening.

nly2• 12 years ago

BBC news pages don't tend to have long bodies of text though. Even news reports tend to be concise. There's nothing to stop full articles and analyse from columnists being columnar, but imho the news front page could use space more effectively. It's currently just a big list of headlines, and when I go in to a category that interests me (like Tech or Science) ... i just get another list of headlines. How about two columns at least?

I've used Firefox's zoom feature to make it fill the page, and it'd look fine if they did so... you'd just get more on screen.

I can't imagine how the vertical use of space is further burdened for US readers who have ads to contend with.

Kartificial• 12 years ago

A representative of the technical team did a talk at the Mobilism conference. Which was my favourite of all talks that conference. Interesting stuff.

Video: http://vimeopro.com/mirabeaunl/mobilism-2013/video/68025331

Slides: http://www.slideshare.net/jcleveley/mobilism-2013-a-story-of...

edward• 12 years ago

The business page has a headline: "Energy firms told to hand back Â£400m". Is character encoding really that difficult?

Screenshot: http://imgur.com/Sl2Hf1m

BBC News website: responsive design in beta

Related Stories