BBC News website: responsive design in beta
bbc.co.uk
bbc.co.uk
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
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:
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.
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 :)
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:
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).
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.
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.
>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
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.
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?
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.
Video: http://vimeopro.com/mirabeaunl/mobilism-2013/video/68025331
Slides: http://www.slideshare.net/jcleveley/mobilism-2013-a-story-of...
Screenshot: http://imgur.com/Sl2Hf1m
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.
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)
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.
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.
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.
If you went there over the last few months you'd be asked to give feedback on the new design.
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.