The Times, They Are A Changin’


Oh, I’m sorry, that was an awful wordplay… but the Times Online just redesigned their site. And I’m left befuddled.

John Gruber seemed to like it. When I opened my Daring Fireball feed at lunch, I saw John’s brief post and decided to check it out—mostly due to his mention that the Times do not use Times Roman in their design, which is actually kind of funny (since the type face was named after their usage of it in print).

I sat bewildered for a moment, thinking, possibly, that they hadn’t tested their stylesheets in Safari. Des Traynor has already made mention of the egregiously small font sizes, so I won’t even go there.

The design decision that left me shaking my head the most was the leading on many of the headers and pullquotes.

TimesOnline's sub headers

I mean, I’ve played with different line-heights when designing something static, but in a headline? In something as changing and uncertain as a headline or a story title, you end up with the descender on the y/j/g bumping into the characters on the line below. Plus, legibility suffers. For instance, take a look at this pull-quote/editorial link:

TimesOnline's pull quotes

I’m surely not the only one who looks at that cluster of characters and wonders why I should bother deciphering it.

The end result looks like they weren’t paying attention, rather than making a conscious design choice.

Des touched on the blue links on blue backgrounds already, but I’d like to interject my thoughts on link colours. There are many in the usability crowd who strongly submit that a link should look like a link (which I agree… a person needs to know what is a link and what is just text), but I submit that links need not (and frankly, for aesthetic purposes, should rarely) be the “default link blue.” Especially when it causes such atrocious legibility issues as it has at the Times. Really, what the devil is going on here?
TimesOnline's blue links on blue background

I don’t mean to be condescending to the designers (I’m sure they are talented and nice people with great flats in the city), but did someone skip their colour theory class 1?

Now, I’d be a bit soured if they’d just made every link the default blue, but at least I’d have understood that they were sticking to their guns. However, have a look at this cross-section of the header bits of the site:

Link colours AHOY!

It’s worth noting the the only text in the shot that is not a link is the “UK Edition” part. Now, I am not suggesting that the Times place blue links across all the header navigation. God, I hope they would never do that. In fact, I think their header is rather nicely done. My point is that what’s good for the goose is good for the gander: if you’re going to change the link colours to aid legibility and the overall design in one section, why not extend that concept to the whole site? Why change font colours to fix the navigation, but allow a blue on blue (or even the blue on charcoal grey also seen on the site) section to go without the same scrutiny and love?

It’s sad to see a rather nice and otherwise good design sullied by these choices/oversights. I do take comfort in the fact that you can change your websites as much as you please and these issues are correctable, unlike the print world, where if you screw up and don’t catch it before it’s off to the printer, well… sorry chap, try again next time. Here’s hoping they can reign the design in.

UPDATE (9:32pm MST, 5 Feb 07):

It seems that the issues discussed have been fixed. In what I’m guessing to be a very odd case of a botched roll-out (maybe some css file wasn’t being included or something was commented out), some of us were (and perhaps some still are) seeing a very mixed up version of the site, whilst others are seeing the intended site. I’m now seeing the proper, quite a bit more lovely redesign on my end. Very weird. Are we all seeing the proper version now?

UPDATE (6 Feb 07):

I’m quickly becoming a fan of the Times Online. The site, yes, is looking vastly better, of course, but I am impressed with the way they’ve dealt with the catastrophe (to use their words). They have a specific section explaining what went wrong on the site when five times as many people visited the during the launch. I’d like to commend them on such quick response and open disclosure. And yes, the site is looking 3 million times better already.

  1. FULL DISCLOSURE: I never took colour theory in school. But I also didn’t take a lot of things in school.

7 comments

  1. Thanks for the link, I didn’t even notice their odd line-heights until you mentioned it. Needless to say they’re just as ridiculous when you print the document out!

    Cool blog btw.

    Des

  2. It looks even worse in Firefox on the Mac, Gregory. I honestly don’t know what they were thinking. It is unreadable.

  3. Looks fine to me. I’m wondering whether the appearance depends on whether you have Georgia installed?

  4. Hi Gregory,
    I work at Times Online. We had a huge server catastrophe yesterday, and the pages you’re reviewing here didn’t have any CSS. It’s quite flattering that you think we’d be so avant-garde that we’d have electric blue headlines crashing into each other all over the place (and in some cases, all the content streaming down the page in diagonal lines) but we didn’t.
    I’d be grateful if you’d have a look today and let us know what you think.
    Thanks – Tom Whitwell (Online Communities Editor)

  5. Hmm, yes. Does the text on your page look OK to you? To me it’s damn hard to read:

    http://photos.paperpixel.co.uk/images/unreadable.png

    I’ve got Gill Sans, so no idea why it’s not coming up. Thing is, I’ve got all of the Helvetica Neue family, and the browser is picking “27 Ultra Light Condensed” because the CSS doesn’t specify which one to use…

  6. @Tom: I’ve shot you a quick email and made a note in the article. Perhaps I’ll do a full critique sometime in the future, but in short, right now I’m really liking the site. Bravo.

    @Aegir: Also shot you an email. I’m thinking the Gill Sans issue is a naming problem, so I’ve updated the stylesheet with more specific font names. I’ve also stopped being a slacker and defined the default font-weight as normal. Hopefully this straightens things out. Thanks for the heads up.

Comments are closed.