Hacker News new | past | comments | ask | show | jobs | submit login
BBC News website: responsive design in beta (bbc.co.uk)
37 points by robin_reala on Mar 5, 2014 | hide | past | web | favorite | 47 comments



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


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.


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 :)


Thanks for answering...like I said, it's early, and I'm obviously projecting my various development/design failures on to your team :). And I'm showing my ignorance of frameworks in general, implying that Bootstrap is the Inventor of all Breakpoints (though I don't consider using Bootstrap bad at all, just that its default handling of iPad is similar to the BBC's beta).

I guess I just suspect that news editors/execs are jumping too quickly on the "mobile-first" and "above the fold doesn't matter in cyberspace" movements...not that either of them are bad, but neither do they universally apply. I'm just not convinced that this kind of 2-column view (a smidgen wider than the iPad-portrait-breakpoint) would be a problem to squeeze into the iPad portrait, or even iPad mini:

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

Whatever it's awkwardness at full-desktop view, to me, that would be just about perfect for the tablet view. Could you shed some light on any analytics insight that's informed the process? For example, I suspect (but haven't ever counted) that the majority of stories I click through on the NYTimes home page were not in the center well or top headlines:

http://imgur.com/UC6VnRn

On the frontpage today, I'd be more likely to click on the E-cigarettes story, maybe the charter schools story, and most definitely the top list of Ramen restaurants...none of which would be top-site news (E-Cigarettes may take the center stage during the afternoon). But if war in Ukraine broke out? I'd probably click on the massive site-wide headline that the NYT would probably use. I like whitespace and sparseness, but I just don't think it plays particularly well to news sites' strengths and weaknesses...especially the weaknesses of the content-management side (which is obviously not in the control of your team, but is inevitably a factor to deal with at most news sites).


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.


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.


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.


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?


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


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


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


How do we undo ?view=beta ?


Clear all BBC cookies


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.


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.


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


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.


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.


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


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.


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?


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


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.


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...


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.


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.


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


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



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?


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.


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


Ah you're right, it was just giving me the mobile site because I already had the cookie I guess


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

Screenshot: http://imgur.com/Sl2Hf1m


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


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.


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.


Ah ok fair enough. There's no less content on many other pages I compared though. And as for the amount of stuff on the homepage, I wouldn't say the old site necessarily had the 'right' amount. I find the new design a bit easier on the eye, easier to scan, and more conducive to delving into specific topic pages that interest me. I don't know though, I might just be subconsciously overcompensating for all the negative comments because I feel they're overly harsh. It's impossible to really know how good a redesign is until you've lived with it for a while.


Agreed. Looking at old and new is striking. I much prefer the new as it focuses on the important content. The old looks like a product of organic growth (understandable) that seeks to pack in as much on the homepage as possible (and "Above the Fold"). The homepage isn't the be-all, end-all of a website and should pull you in to other areas for exploration.

Calling it "lazily" designed is condescending and disrespectful of those who put their time and effort into this. Thick skins are required for web design/dev, but some professional courtesy is appropriate, I think. The developers themselves are here. How about something more constructive? What would YOU change? (OP, not callum85)


Hi there. Yes, always a balance between objective comments and what I would say to someone's face (although the word 'lazy' is on the mild end of things). I love the BBC, feel that their news reporting is broadly trustworthy, and would gladly pay a license fee.

I'm talking about the homepage here.

Why did I use the word lazy?

My first impression is that the new version feels more in the direction of a news aggregation site. Looking at it, the structure is much simpler and the hierarchy is shallower. It feels like the relationship between content and layout doesn't require any editorial input, like the headlines could have been drawn from any aggregation source (I'm talking about the layout not the content).

Looking back at the current site, it appears that editorial input has gone into the structure of the layout. The Ukraine story leads with a headline and then has various other pieces looking at the story from different angles. Similarly, it feels like for the Clegg vs Farage bit the editor has said "we want to do something about this subject, let's have a headline and some other items about it".

That's the reason I used that particular word. It feels to me that the new layout could be automatically generated current one couldn't, at least not quite so easily. Ergo it feels like someone has put effort into a curated news experience vs an automatic one. So I think I stand by using the word for that reason.

The above is my personal impression. I may be factually wrong. But we all respond to immediate experience don't we?

And then there's the principle of mobile first, and what happens when it meets a site like this. There is no question that responsive is difficult to do.

Maybe I do want to see less on my mobile, and maybe that's suitable for that medium. Allowing that to impinge on the desktop version, however, isn't something that sits well with me (or with others by the looks of things), especially if it means I am presented with a narrower view (one story on subject X presented to me on the front page rather than more than one).

Different audiences exist on different mediums. I listen to BBC Radio 4 news and the news team puts together a programme in a certain way. I've heard the news on other less wordy BBC Radio stations and it's tailored to that audience. I'm glad that they acknowledge that different audiences want to consume news in different formats. It's not just the length of the story that differs, it's the style of presentation, selection of stories, and form of analysis. That feels like a very good analogue for the comparison here.

The argument that you should see the same content in both cases (mobile, tablet, desktop) isn't open and shut. I see a huge disadvantage in the new homepage on a desktop, and I can't assume that the same idea hasn't at least occurred to some of the BBC people. To say "we need to make it work on mobile" is a laudable aim, but to then say "and we'll make sure that looks nice on the desktop too" feels lazy.

What would I change?

I'd have an explicit conversation about mediums and formats. And I'd have my point of view, because I'm me.

I'd keep the desktop site as it is. Mobile is important. You can drop bits from the desktop site to make it work on mobile. You could even do it responsively, although that would increase the overhead.


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


Eugh, I _hate_ change


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.


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.


They still have developers in London


Yes there are. I'm one of them.


Why let the facts get in the way of a good rant? :)




Applications are open for YC Summer 2019

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: