Neatening the News

How to tidy up the BBC News website

Andrew Leach

For all those who dislike the shouty nature of the new BBC News website, here’s a short guide on how to calm it down. Don’t give up at the first mention of Greasemonkey — it’s actually quite easy.

What it does

The calming down is based on the Greasemonkey script written by Tom Veil. I've enhanced it and the current version (1.86) dated 1 August 2010...

• makes pages shorter by
  • making the font sizes more reasonable
  • tightening up vertical spacing
  • moving Related links into the sidebar
• fixes the problems with Helvetica Neue on Windows*
• moves the menu from the strip at the top to the left-hand sidebar
• fixes the vanishing margin problem*
• moves the content of big black local-news boxes into the right sidebar
• tones down the big black box on the England news page – it’s too big for the sidebar
• removes the enormous numbers from the “Most read” list
• removes a lot of images so that the text is king
• moves video to the bottom of the article so that text comes first
• moves “Also in the News” into the right sidebar
• tidies up other boxes and links
• removes the ugly icons at the bottom of the page
• stops video autoplay — Macintosh users please tell me if this helps
• includes a check for new versions of the script

NB: The new layout is optimised for screens of 1280px width. It will work on screens which aren’t as wide, including 1024px, but the right-hand sidebar hangs off the edge. I judged that this was less important than retaining the left-hand menu and shortening the main article text. Ideally the design should not depend on a fixed width, but I don't plan to change this.

* These faults appear to be have been rectified by the BBC’s design team now, too

Still to do

• Make the banner heading less deep as it no longer contains a menu strip; this is easy
• Add ability to close/hide sidebar boxes and remember their state — I know how to do this
• Sort out the cropping of “Also in the News” headings — no idea yet

What it doesn’t do

• Change the journalism
• Change what each page contains: it moves things around and hides elements, but can’t add anything
• Change the navigation, although hopefully moving bits around will help
• Change Local pages whose URLs start news.bbc.co.uk/local

How it works

The script is a Greasemonkey script. This means it only works in browsers which support Greasemonkey scripts, and that means that you need Firefox or Chrome. There may be other eligible browsers too, but I've tested those two. An error in the BBC’s news-ticker code prevents it working correctly in IE (with Greasemonkey for IE).

When you install the script, it’s triggered when a BBC News page is loaded, and it moves all the content around. This means that the BBC don’t know you’re using it: you have downloaded their page before getting down to work on it. It also means that you see the page as they intended, in all its glory, before the script kicks in and calms it down.

It’s written in JavaScript, and takes content from where the designers want it and injects that content into a different part of the page. It also redefines the styles defining how the content looks. If you’re interested in the actual code, it’s accessible via Greasemonkey.

How to install it

All the links here will open in a new window or tab so you can keep this one open.

1. You need a compatible browser. If you don't already have one, install one:
   • Firefox: http://www.firefox.com/
   • Chrome: http://www.google.com/chrome
2. Use Firefox or Chrome to view this page, because it makes things easier.
3. Install Greasemonkey.
   • For Chrome, you can omit this step.
   • For Firefox, you can get it from here: https://addons.mozilla.org/en-US/firefox/search/?q=greasemonkey&cat=1%2C4 It should be listed first: just click the green “Add to Firefox” button.
4. Go to my userscript page at http://userscripts.org/scripts/show/82319
5. Click the green “Install” button
6. Click the “Install” button on the dialog box

That’s all there is to it! Any time you visit a page whose address starts www.bbc.co.uk/news/, the script will kick in and do its stuff.

My script is called BBC News cleaner WIDE because it’s derived from Tom’s which he called BBC News cleaner, but mine handled screen widths better. You can have both installed, but it's probably not a good idea to have both acting at once, and you will need to disable one or the other. See below for information about disabling.

Customisation

If you don’t have Candara or want a different font, then you can change it. When choosing a font, you may need to experiment: some fonts will be too wide and it will mess up the “Share/Read/Watch/Listen” box in the sidebar. Unfortunately Verdana is too wide; Tahoma and Cambria both work, but their bold versions may be too bold for some.

1. Right-click the monkey icon in the status bar and choose “Manage user scripts”
2. In the dialog presented, click “BBC News cleaner WIDE”
3. Click the “Edit” button at the bottom of the dialog
4. You may be asked to select your editor; you only need to make the choice once. Notepad is good, but you'll need to find it. On my system it’s at C:\WINDOWS\system32\notepad.exe
5. Right at the top of the script, there’s a line which says
   var fontFamily='Candara,Arial,sans-serif;';
   Change the first font listed, between the apostrophe and the comma, to what you want to use instead, for example
   var fontFamily='Cambria,Arial,sans-serif;';
   Be careful with the punctuation! Note where the quotes and semicolons are. If you want to use a font with spaces in the name, you need more quotes:
   var fontFamily='"Gill Sans MT",Cambria,Arial,sans-serif;';
   
6. Close the editor and click “Yes” when asked to save your changes.

Disabling the script

In the unlikely event that you want to stop using the script, there are a number of methods:

• For temporary disabling, so that (for example) you can select another locality for UK news/weather, just click the monkey icon to disable Greasemonkey (it will be greyed out). Click it again to re-enable.
• To disable the script without removing it, but keeping Greasemonkey enabled for other sites, navigate to a BBC News page which uses the script. Then right-click the monkey icon and uncheck “BBC News cleaner WIDE” from the little menu.
• To remove the script entirely, right-click the monkey icon and choose “Manage User scripts”. Click “BBC News cleaner WIDE” and click “Uninstall”. You may need to confirm that choice.

What else you can do

The script hides the sharing icons, but if you’re affected by adverts and want to disable the Facebook script completely (remember, the Greasemonkey script only runs once everything has reached your computer) then you can install another add-in for Firefox called AdBlock Plus from https://addons.mozilla.org/en-US/firefox/search/?q=adblock+plus&cat=all. There’s a video at that link too, explaining how it works.

You can also amend the script yourself if you want it to do something different. The script is open-source, after all. But do keep the original acknowledgements at the top and add to them.

Suggestions and queries

Please use the discussion forum on my userscript page at http://userscripts.org/scripts/discuss/82319: click “New topic” if there isn’t already a relevant one.

And if you like it...

Add a review or become a fan at http://userscripts.org/scripts/show/82319

Privacy

Versions of the script from Version 1.81 (30 July 2010) check for updates by querying a file on my server here. That means that I can tell how many pages have been viewed using this script. Included in that data is your IP address as that makes the internet work. The IP address per se doesn't personally identify you and (in the UK anyway, where I am) it requires a court order to do that. I don’t collect information about which pages you are viewing.