.comment-link {margin-left:.6em;}

Wednesday, April 02, 2008

BBC News redesign: while developers ignore their users, the users fix the site!

Today Julia Whitney, "Head of Design & User Experience, Journalism", has posted a second response to the 1,500+ odd complaints about the new BBC News website. Most of it is disingenuous, fingers-in-ears "nah nah nah we can't hear you" fluff, but this part takes the biscuit:

"For those of you who mentioned flexible rather than fixed width, and concerns about the line spacing and the grey type - we'll take these themes into our next set of user testing and listening labs over the course of the next month and a half."

So it's going to take six weeks of "focus groups" to decide that actually, black text on white (as used by the rest of the entire print and internet worlds) is better than low-contrast* grey? Sounds more like a politician trying to hide behind excuses rather than admit they were wrong. And we all respect people who do that, don't we?!

Luckily you don't have to wait that long to fix the site, at least if you're using the Firefox or Opera browsers (IE users are out of luck). A site's design is dictated by something called "CSS", short for cascading style sheets, and these two browsers allow you to over-ride those rules with "local" ones.

What a developer on the userstyles.org website has done is develop a set of rules that "fix" the new BBC News layout. It removes the large black banner at the top and the big grey one at the bottom, sets the page back to left-alignment, removes much of the excess "whitespace", reduces the page width to something manageable, and replaces the grey text with proper black. (What it can't do is restore all those missing story links. Less content in more space. Crazy.)

If you're using Firefox, you first need to install the Stylish plugin. Then visit this userstyles.org page, install the new syle, and voila, a fixed BBC News website is yours to enjoy.

Opera users don't have to install anything new, but have a slightly more complex path to follow:

1. Open Notepad
2. Go to the userstyles page and click "Load as user script"
3. Copy and paste that code into Notepad
4. Save that file as "user.css" somewhere. Be sure to change the filetype from "Text" to "All" before saving -- this is very important
5. Navigate to BBC News in Opera and right-click on the page
6. Select "Edit site preferences" and then click the "Display" tab
7. At the bottom of that tab, "choose" the "user.css" file you just created
8. Click "OK" and enjoy a fixed BBC News page :-).

*I was interested to see if the new grey text broke usability standards, so did a quick investigation. Via 456 Berea Street I downloaded a contrast analyser. To meet minimum standards, text should have a contrast ratio of at least 5:1 and preferably 7:1. Black text on white has a contrast ratio of 21:1, but BBC News's new grey-on-white has a ratio of only 9:1 -- just above the standard, but still much poorer than black-on-white. Other areas of text, such as certain headers(!), have ratios as low as 4:1 -- well below the minimum.

The new site really is a joke. Hundreds of markup errors and it doesn't even meet basic usability guidelines.

AddThis Social Bookmark Button

Thank you so much for this. It astounds me to see the Beeb pretty much ignoring all the negative comments they're getting. You're right, it's a "Na na na na na, we can't hear you" play going on. Sigh.

What odds that they'll actually do something about it? I reckon it'll be more worth having a punt on [American:] the KC Royals winning their division/ [British:] Everton winning the league this season.
This is great - it fixes the line spacing problem but for some reason does not reduce the oversized fonts. (I'm running Firefox on XP)

Editing the style sheet does not allow me to shrink the fonts and simply using Firefox to shrink the font sort of works but then leaves the line spacing too large again.

Anyway, thanks to this style sheet I can see most of the site above the fold again.

By the way, the BBC "refresh" is not just a problem for people running low resolution monitors. The huge increase in vertical white space forces me to scroll up and down endlessly on my 1280x1024 monitor.

What were they thinking?
Hi! Thanks for posting on D'Architech's blog :) This worked a treat - Cheers!

(I tweaked it slightly to decrease the height of styles "bbccom_button" and "bbccom_mpu", as whilst Adblock plus removes the adverts for those of us temporally outside of the UK, it doesn't resize the page to match)
Interesting that the global masthead in the Visual Language pdf looks different to the one they're actually using - though even that looks too tall for what is on it. Right - off to userstyles.org...

To Kevin - I noticed the font size problem myself, but they seem to have fixed that now. For me FF2.0.0.13 ctrl+/- work as they should across the board.
I figured out how to adjust the overlarge font size - the key is to put !important after every line in the local stylesheet - otherwise the overide won't work..

Now I can get back to a reasonable font size on the BBC without just shrinking the font size generally in Firefox and ending up with teeny tiny type on other sites.

I posted a comment about this (hopefully temporary) solution on Julia Whitney's blog:

Wow that is an improvement. Still not ideal as I prefer to use safari, but this might just get me visiting the site again. Here's hoping they listen to the criticism and fix the problems they've created.

Finished laughing yet?
No I'm not very optimistic either.
Thank you so much !! Take the Power Back!

Arghhh this bull$hit grey text seems to be invading the whole internet :-(

Post a Comment

<< Home

This page is powered by Blogger. Isn't yours?