FT redesign: modern, readable and accessible

The FT’s redesign shows more ‘progressive’ newspapers the way ahead, without using an overly-complicated grid. And just 9 links in the navbar.

Reading The Guardian’s tech supplement this morning, I came across a rather intemperate criticism of the FT’s home page redesign.  Andrew Brown (when he’s not arguing that dyslexia is a condition suffered solely by the lower orders) makes the following comments about the FT’s home page:

  • the page doesn’t contain as much information as it used to
  • the font size and leading are too big
  • it looks like it was designed for a mobile phone screen
  • it’s ugly, uninformative and ‘actively confusing’ (as opposed to something that is passively confusing, presumably)—no details of how or why it’s these things, unfortunately

The overriding theme is that it has been designed for people who can’t and ‘don’t want to read’.  There is a surprising (bearing in mind it’s in The Guardian) snobbishness here; it reads more like The Telegraph.

FT screenshot - simple, readable, pink

FT screenshot - simple, readable, pink

All nonsense, of course, and the design should be saluted for breaking from the current convention for super-complex grids, content-overload and headers stuffed with 75 links.

So here’s what the FT does well:

  • Just 2 main columns
  • Big font sizes for easier scanning, cognition and reading, especially by the paper’s older demographic
  • A sane navigation bar with just 9 links (The Guardian has 26, in different pretty colours, to boot)
  • The light pink background (this is so clever – it matches the famous colour of the print version while providing some texture)
  • 1 sentence summaries of the stories
  • Simple, logical rules
  • Blue links
  • Displaying a relatively small amount of content on the home page (making it easier to comprehend and scan), thereby demonstrating respect for its readers by allowing them to find relevant content, just as they would when reading the print version
  • Calling itself Financial Times rather than financialtimesonline or financialtimes.co.uk.  It therefore suggests that the online and print versions of the paper are of equal importance

In short, all great things that The Guardian’s site isn’t.

It’s perhaps a surprise that such a traditional, conservative publication has led the way in designing a home page that is fully aware of the constraints and possibilities of the medium, while Britain’s greatest liberal paper adopts such a narrow, backward looking view.  It’s the FT that’s leading newspaper design into the modern era.

Filed under: Articles, Favourite

Tags: , , , , , , ,

Next post:

← Previous post:

Comments

  1. Axioum says:

    Am I the only who thinks that the main menu bar (Frontpage, UK, World, Companies…) is completely copied from Digg?

  2. Leon says:

    Erm, no—looks like the FT was certainly ‘influenced’ by Digg, even down to link list below the main navbar.

    I think it loses points for the drop–down–on–hover menus.

    Copying’s not a bad thing if it works, which it does here.

  3. Rob says:

    The FT site is a mess, sorry.

    The pink background really, really doesn’t work for me on this screen in these lighting conditions — so much so that when you describe it as “so clever” I had to re-read the section several times to assure myself that you weren’t being sarcastic.

    The white navbar serves to highlight it so effectively that it draws the eye away from the content. Of all the things to that they could have highlighted, choosing the most content-free section was certainly an interesting decision.

    The links on the navbar itself are counter-intuitive. They’ve clearly been designed to (at least vaguely) resemble a standard combo box, but they break convention by acting very differently. (What happens if you click the text in a combo box? Now what happens if you click the text on the FT site?)

    And if you actually click one of those links, you’ll find that the design of every other page is so massively different that the change is actually jarring and disruptive.

    The blue expand/collapse icons in the right column are are non-standard, unintuitive, and I’m still not entirely clear what visual metaphor they’re based on.

    And I, too, think there’s way too much whitespace.

  4. Leon says:

    Hi Rob,

    I like the pink. It passes the colour contrast test (http://juicystudio.com/services/colourcontrast.php) and there are far worse colour combinations out there.

    I’m undecided on whether highlighting the navbar is a good or a bad thing: you could argue that it aids navigation by providing a clear point of reference for the user.

    My gripe with the navbar links would be that they’re not presented as drop down lists; you have to hover over them. It is odd that when you click on the default text it takes you to the top level section. This should have been designed differently (actually, I’m against drop down navigation menus full stop).

    Presumably the rest of the site will follow this design. It appears to be how newspapers introduce change—The Guardian still has the odd page that looks uses the old styling.I would assume this is because newspaper websites are so vast and varied (and poorly structured?)

    I’m guessing the metaphor is based on collapsing a window: yes, an arrow is more conventional, and would have been far more effective.

    I don’t actually disagree with you—the article was a reaction to The Guardian’s review, which criticised the typography on the grounds that the fonts are too big, well–spaced etc. I still think that (apart from the fact that the strapline is the same font-size as the headline) the FT’s home page is more readable than most other newspapers’.

    Thanks,

    Leon

  5. Clayton says:

    The pink is a terrible decision. I believe there is plenty of potential for the site, however it’s far too spaced for my liking. In saying that I think it could be salvaged.

  6. Garth Timms says:

    You can tell that the redesign was created by someone who doesn’t actually use the website/read the FT. As a finance professional and former reader of FT.com, I have not met one person in the industry who has said the redesign was an improvement.

  7. Leon says:

    Clayton – it’s interesting to see the different reactions to the increased spacing: I wonder if it’s a personal taste thing, or a reaction to change. Or maybe it is less readable than before…

    Garth – how doesn’t it serve readers of FT.com: what’s difficult to find?

  8. Michael Tuck says:

    Hi Leon, nice to visit you in your digs. I have a different take from most FT users — I spend an inordinate amount of time on a lot of news sites, but very little on FT. Compared to other news sites, I like FT’s design a lot. I have no objection whatsoever to a lot of whitespace in a design, if it’s used to advantage, and here I believe it is used well. Certainly this redesign is a lot more usable than many large news sites.

    The combination of Georgia and Arial works relatively well, though FT’s font-stacks are anemic beyond belief (no alternatives, not even the usual generic serif/sans-serif fallbacks); I’d use Helvetica or perhaps Verdana for the sans-serif text.

    I like the navbar. I detest drop-downs that expand on rollover, blocking the content without allowing me the choice to expand it myself. I do think the navbar is not particularly intuitive, but the “learning curve” is pretty simple.

    Admittedly, there are some rather glaring problems with the site. The light pink background isn’t particularly attractive, nor do I think it adds to readability. It is an alternative to the usual color choices, though, so in that sense it stands out. (In fact, I think the whole color scheme is rather unattractive.)

    The expand/collapse icons, as Rob notes, are unmarked and unidentified as anything.

    I don’t like the lack of padding or margins on the left and right–the content is shoved against the very edges of the display screen.

    And Rob is right again: not having all the pages use the same basic design theme is jarring. I assume the designers will bring the rest of the pages up to speed in the near future.

    Overall, I’d say the redesign is quite good, and the problems seem to be easily addressed. So Leon, you’re not the only person in the world who likes the redesign. :)

    Now if I could get the redesign for the site I’m with to get moving again.

  9. Leon says:

    Hi Michael,

    How’s the article coming along?

    I can’t really disagree with anything you say: my own article was really just a response to The Guardian’s review of the redesign, which objected to the white space and font sizes the FT deployed. On these terms, I think the FT marks a positive, radical departure from conventional online newspaper design.

    I do like the pink, but I’m not so sure that’d be the case across a whole site.

    And I know you’re a man who doesn’t like an anaemic font stack ;) I’m still searching for that perfect sans-serif Linux stack: there are just so many variables involved.

    Oh, and if you need any help with the History Commons redesign, drop me an email.

    Cheers,

    Leon

  10. Michael Tuck says:

    The hell with the Guardian. I like big(ger) fonts and lots of whitespace. Not so fond of the pink, though.

    The article is done. It’s just a matter of getting the contract signed and faxed back, and the publication finalized. I’ll send you a link if you like.

    Hmmm, I’ll do some thinking about a comprehensive Linux stack. Actually, that’s covered somewhat in the article; I’ve tweaked the stacks considerably since you saw the earlier version, and I think the Linux fonts match pretty well with the Mac and Win fonts.

    I’d love your advice on redesigning the Commons, but that situation is a snakepit I wouldn’t wish on anyone. Since this is a public blog, let’s just say “personal differences” between the guy supposedly doing the redesign and, well, everyone else. I’ll drop you a line.

  11. Josh Curd says:

    Hi Sir

    I do think that changing the background colour is a good idea on a webpage.

    In my opinion any light neutral colour could be better than white, a webpage with a white background can be a bit too bright for the eye. The colour can take the edge off of the screen and make the page more readable.

    The choice of colour is, really, entierly up to the web designer. So the use of a light pink by FT is a sensable choice if their print version is the same colour.

    ps.

    I told you a bit of colour could be good on your home page and have noticed a little bit!!!

  12. Michael Tuck says:

    Josh, I tend to agree. I’ve designed two small sites lately, both using #f0f8ff (aliceblue) as a background color. It’s not exactly an off-white, more of a pastel blue, but I find it very easy to work with both in spinning off a color scheme and, with good-sized sans-serif fonts driving the text, with readability. I used to use a tiled background image that imitated a sheet of paper (white with very light blue striations, very nicely done), but people keep telling me that background images are so 1999….

  13. Leon says:

    Hi Josh,

    To be honest, it’s not something I’ve really bothered with in the past, apart from when I’ve made a footer or sidebar a different colour from the main text. I think it can look a bit murky.

    Yes, colour and I have a somewhat difficult relationship. I’m good at words and layout, but images and colour…

    Michael – I think background images can be done pretty well, but I’d take a bit of care trying it out.

    Josh – any work to link to?

    And “Leon” is fine now!

  14. Michael Tuck says:

    Andrea Gandino definitely belongs to the Cameron Moll school of design. Lovely site, though it could use some right padding. :)

    Here’s the one I did using the light blue background. It’s strictly to contain text and designed for a very small audience, so is very simple in concept and design. Yet it *still* manages to make IE cough.

    http://www.iraqtimeline.com/entriesdummies.html

    (Leon, note the almost-basic font stack, LOL.)

    My favorite bad example of background images comes from some long-gone school site, where the designer thought it would be cool to tile an animated graphic of a biplane swooping at the viewer. You can imagine how usable the page was with a flotilla of Sopwith Camels sweeping at you every five seconds.

  15. Leon says:

    Michael,

    I have to admit that I don’t find the blue any less glaring than plain white. I think it’s a matter of contrast more than anything else; i.e. you can have too high a contrast as well as too low.

    That’s why dark text on a white background isn’t set to color: #000;. Depending on the thickness of the font, anything between #555 and #333 is OK (I’m currently using Lucida Grande/Lucida Sans Unicode, which is quite a ‘thick’ font and way too dark at #333).

    As with all web typography, there are a lot of variables involved. Although some choices are objectively bad.

  16. Michael Tuck says:

    One of my problems is designing on a monitor that is too small and too dark. I’m forced to check my designs on my work computer, and sometimes I just don’t think about it. I’ll check out the black-on-blue on the big, bright LCD screen at work.

    Re: Shakespeare’s Sonnets: I thought the site must have been using obscure fonts I didn’t have, probably black-letter or chancery fonts of one sort or another. But the Firefox Font Finder extension told me that the entire stack is:

    font-family: sans-serif;

    That’s a bit too minimalist for my taste. :) The whole site is just laughably bad–too bad, because the site content is worth presenting well.

    Here’s my all-time bad design candidate. Warning: strap yourself in before clicking.

    HavenWorks. They even offer their services as designers, which is just too funny.

  17. Josh Curd says:

    Hi again Leon (still feels wrong sir!)

    I am mainly playing around and doing stuff for myself.

    I had decided to make a portfolio, an online kinda cv.

    http://www.freewebs.com/kpjjc/portfolio.htm

    Look familiar to anything you’ve seen before?

  18. Leon says:

    Hi Josh,

    Well, I recognise some of that CSS!

    You need to add a doctype at the top of your document:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    would do.

    I like the text size and the headings (as I should!)

    I would validate the CSS—you need to precede classes and IDs with a . and a # respectively.

    Also, I’m not sure excluding people who use IE is such a good idea (although using another browser is the right thing to do, of course).

    It’s well worth playing around with other people’s code, but there are a few good reference sites around as well: try HTML Dog to start with.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>