Failed vs. Unfailed redesigns of newspaper websites

In October and November 2006, two newspapers in my part of the world redesigned their websites. The difference in the outcome is enormous. One is a perfect example of a Failed Redesign, while the other shows that it is quite possible for newspaper websites to use Web standards and other best practices to accomplish an Unfailed Redesign.

Full disclosure: I find it only fair to mention that I have been slightly involved in the Unfailed Redesign. Before they started working on the new site I held a three day workshop with their development team, and a few weeks before the site was launched I gave them some advice and feedback on the code and design. Other than that they did it all on their own.

Both newspapers are Swedish, but language is irrelevant in the context of this article, so please keep reading even if you don’t know a single word of Swedish.

Failed: Göteborgs-Posten, GP.se

First a look at the Failed Redesign of Göteborgs-Posten, which also happens to be my local newspaper. I really like the printed edition, but GP has never had a very good website, whether you look at technology, design, or content. I was hoping that this redesign would change that, but sadly, it doesn’t even come close. The redesign was launched in late October or early November of 2006.

Coding like it’s 1999

One of the first things you notice when visiting the site is a massive horizontal scrollbar. Using it reveals nothing but whitespace. Not a very good first impression. At first I thought the scrollbar was only there in modern browsers, but after confirming that the scrollbar is there in both IE 6 and IE 7, I have to conclude that the scrollbar is in fact intentional. After digging through the tag soup for a while I found the following:

  1. <div class="white" style="width:1690px; background-image: url(/menu120x1.gif); background-repeat: repeat-y;">

Can anyone think of a good reason for making sure that all visitors with a browser window narrower than 1690 pixels get a horizontal scrollbar?

What about validation then? Yeah I know, I know, it’s not politically correct to validate sites built by other people these days, but I’m doing it anyway. Well, today the W3C Markup Validator finds 104 errors on the homepage, and the errors are not just unescaped ampersands. Note that you can’t enter www.gp.se in the validator’s URL field since the site uses a meta redirect to bounce visitors to a different URL, and the validator does not follow that redirect (you can avoid being redirected by using the Web Developer Extension for Firefox to disable meta redirects). I suspect this redirect also explains the low Page Rank (0) of the homepage.

Looking beyond the silly redirect and the validation errors, the markup would be really out of date even if it did validate. Nested layout tables, spacer GIFs, inline CSS, presentational markup, obtrusive JavaScript, cryptic URLs, the lot. For some odd reason almost every link has a target attribute, even though the site does not use frames.

Whoever is responsible for this mess is either completely locked into a really crappy CMS, in desperate need of an extreme skill makeover, or both. Come on, it isn’t 1998 anymore.

No accessibility attempts

It’s invalid, but is it accessible? Well, no. You can’t resize text in IE/Win, for starters. Use the keyboard to navigate? Have fun tabbing through a zillion links before you get to the actual content. No, there are no skip links. Real HTML headings are nowhere to be seen. That’s right, I couldn’t find a single heading element. Entire paragraphs are linked, which makes for lots of fun when using screen readers to list the links on a page.

Poor graphic design

Ok, so the regular visitor doesn’t care if the code is mangled and riddled with validation errors, or if it is accessible. To the regular visitor, the graphic design is more important, right? Well, this site fails in that department as well. I’m not sure it actually is designed. The previous look, while nothing special, was much better than this.

Unfailed: Helsingborgs Dagblad, HD.se

The Unfailed Redesign of HD.se was launched in October 2006. It is not perfect, but it is like a breath of fresh air compared to GP.se. Since this site gets a lot of things right, I don’t have as much to say about it as about the Failed Redesign. But I do have some comments.

Semantic and structured markup

HD.se uses semantic and structured markup that is valid XHTML 1.0 Transitional. It has one error when validated against XHTML 1.0 Strict. Not perfect, but pretty close. There is

The site uses nice, human-readable URLs that are a delight to see on a newspaper site. No endless query strings in sight. The site uses Microformats and displays social bookmarking links (Del.icio.us and Digg) after each article.

JavaScript is used to make entire paragraphs clickable without turning them into huge links, and a lot of inline event handlers are used for that. Not very pretty, but at least the event handlers are unobtrusive, and better than linking the full paragraphs.

Some overly verbose alt texts clutter the site for screen reader users and people with images turned off. In most cases I would have used empty alt text instead.

The site does feel a little slow, and I’m guessing that the huge amount of content on each page has something to do with that. I would take a close look at what is on each page and carefully consider if everything really has to be there.

Despite those problems, it is obvious that the developers at HD.se have made a considerable effort to build their new site according to the quality standards of today.

Wide but readable design

Designwise this is a very nice newspaper site to look at. I find it very comfortable to read, and despite having quite a bit of advertising it does not feel as cluttered as newspaper sites tend to do, and it is a huge improvement over the previous design.

The generous font size and leading help legibility, and I think Georgia works well here. The site does use a wide, fixed width layout, which I’m not very fond of. Fortunately the rightmost column contains only advertising, so I don’t have to scroll horizontally to read the content. I can live with that.

Old-school vs. modern Web development

When comparing the two sites it is hard to believe they were released within weeks of each other. Their approaches to Web development are fundamentally different, and you could easily think that these sites were launched five or six years apart. HD.se, despite having its trouble spots, is so far ahead of GP.se it isn’t even funny.

Posted on March 14, 2007 in Web Standards

Comments

  1. Wow, that failed redesign is almost as bad as the current design of my local paper, the St. Louis Post Dispatch.

    http://www.stltoday.com/

    They did a massive redesign to the print version about a year ago which is actually really nice. I have no idea why they didn’t tackle their site at the same time.

    I mean the site is an “everything and a kitchen sink” design. Just terrible. And the St. Louis Post Dispatch is owned by a multi-billion company. You know the Pulitzer publishing family.

  2. Inspired by your article and Tommy’s comment I just checked my local English language newspaper, the Montréal Gazette. The Gazette is a major newspaper here in Canada.

    I don’t think they’ve redesigned in a while, as I found the main headline on line 552 of the HTML. Also, interestingly, they appear to be using 9 stylesheets.

    However, I can hope this is because they’re stuck using the canada.com system.

  3. These are the sites of the two local newspapers for me:

    The Courier

    Evening Telegraph

    I would love to be involved in a redesign of these sites!

  4. Interesting read. Newspaper sites always had my interest because there is so much quality difference. I think that the best newspaper website is the one from the The New York Times.

  5. Yes, The New York Times in deed. But keep in mind that Khoi Vinh (of Subtraction fame) is responsible for that web site.

  6. I am a journalist by trade that went into advertising, then marketing. I visit sites like this to learn, cause my boss thinks a copy of Dreamweaver makes me a web developer.

    IMHO newspapers are losing market share cause they don’t get it. The first example is the list of sites we’ve posted here. They are all terrible, outside of the NYT. And what did the NYT do, hire somebody that might have a clue about working online.

    They wonder why they are losing money to Craighlist. Cause their use of classifies is terrible (BTW: #1 money outlet for most papers).

    I mean most people don’t know this, but the price of a physical paper doesn’t even cover the cost of paper. It is all about advertising.

    And I think we would all agree when you can’t put out a site where I can even focus on your content, much less ads, you are in trouble.

  7. March 14, 2007 by Simon

    GP.se uses Polopoly as CMS as far as I know. What’s HD.se using?

  8. March 14, 2007 by Claus Stovgaard

    Recently, I was in Oslo on business, and it involved doing some research on Norwegian banner ad formats.

    I give you, probably the most visited website in Norway: VG.no

    The most confusing layout I’ve ever seen on a news website, no definition of font for the majority of text, tables everywhere, proprietary element attributes, 544 validation errors…

    The list just goes on…

  9. March 14, 2007 by Lode

    My daily newspaper also redesigned recently, and the end result is just horrible. I do like the recent Times Online redesign. (And of course the NYT is great as well.)

  10. Thanks guys, I’m happy to hear that you like www.hd.se. I will take the oportunity to mention that we are looking for a webdesigner/front end programmer for the site.

    If you have the skilz and talent drop me a mail with questions or application at anders.olausson@hd.se (CTO)

  11. @Simon hd.se uses Apache 2.0 with mod_rewrite and SSI on the front end, with Lasso Professional powering the back end.

    (I was the technical project manager for the hd.se remake - thanks for the kind words Roger ;-)

  12. March 14, 2007 by Matthew Gruman

    John B: Most, if not all, of Canada’s big newspapers use the canada.com system (Montreal Gazette inclus). I used to live there and always get slight twinge of anxiety when I check the Vancouver papers and they show up looking like the ones back east. “Wait a minute…I DID move, didn’t I?”

    There seems to be a lot of this around Canada though. All the government sites (www.gc.ca) seem to use the same CMS and all but the biggest publishers in Quebec use the www.livres-disques.ca system. I’m sure an unfailed redesign of those three systems would make a noticeable impact on our country’s web accessibility.

  13. March 14, 2007 by Alejandro Moreno

    http://www.theglobeandmail.com/
    Nation-wide newspaper. My favourite on paper and online. UNFAILED.

    http://www.edmontonsun.com/
    Local paper. Sometimes I resort to it (for the sports, mostly). Most definitely FAILED.

    http://www.canada.com/edmontonjournal/
    Local paper. Like it in print, hate it online. And they actually redesigned a few months ago, too. I can tell the designers probably had a few good intentions, but the markup is simply god-awful. FAILED.

    @Matthew, interesting points. Makes me appreciate globeandmail a little bit more :)

  14. March 14, 2007 by David Högberg

    As having coded most of the HTML/CSS/JavaScript and being somewhat responsible for the visual design for the aforementioned unfailed redesign of hd.se, I also must thank you for your kind words! (And my apologizes about the inline handlers, we really did tried to avoid them but unfortunately had to give in for the time being)

  15. Just want to add that I think the new Times Online beats The New York Times for clarity with nice use of pictures and not to much information horizontally. No matter if you’re folio or tabloid online you’re always a magazine or tabloid in terms of space online. Go Britain!

  16. Today a newspaper’s website that I helped to design and build won a national award:

    http://www.yukon-news.com (free subscription required).

    I’d be interested to hear what you think of the design, accessibility, code quality and any other valuable feedback. Thanks in advance.

  17. Matthew Gruman: That is true about canada.com It’s part of CanWest Global - they own the Global and CH tv networks, an most of the important newspapers in the country.

    I’m not too familiar with the www.livres-disques.ca system, but I know that the Canada Revenue Agency, (the people that take our taxes), are actively trying to improve the accessibility of their sites - my girlfriend’s brother is working on that project, so there is hope for the federal government sites at least.

  18. Its fun, enjoyable and a great learning curve looking and criticizing other peoples work especially BIG government or corporation websites. I personally have done it twice on my web blog. Once for Australian state tourism sites and also for the major government parties of Australia.

  19. March 15, 2007 by Walrus

    Actually, the “boring” Canada Gov look and feel is quite effective. I don’t like it, but it is extremely functional. The actual usability of the site is obvious, a top header with main links and side links. The information on the other hand is not always easy to find, this depends on each website’s information architecture.

    As for those two news sites, I don’t want to know how much the company paid for this FAILED redesign. I think any of us designers in this thread could have done something 2x better for under $10,000 Canadian (sorry not sure what the going rates are elsewhere). Also, Design only not Programming. But that being said, if they are running off a licensed CMS, programming would be minimal and would add only $20,000 max at my own estimation. If they paid less than this based on salary/contracts, than perhaps they got what they paid for?

  20. March 15, 2007 by Bob Michael

    Yes, but… which one gets the most visits?

    I mean, I’m all for web standards, usability, accessibility but I can’t fail to notice that many ugly (and badly coded) websites are actually (often) the most successful.

  21. I think the dansih paper http://www.computerworld.dk/ has done a good job on their new website. It’s very blog styled, and they’ve adapted the idea o using user comments and input on every article.

  22. Just wanted to add that in addition to the UK’s Times Online which is a great looking and highly readable site, there is a terrific site for comment on the news at another UK paper, The Guardian’s Comment is free.

    Visually beautiful. Although both sites suffer from a few validation errors they are both a step forward for the newspaper industry, showing the value of engaging with their readers pro-actively.

  23. Rood review of them both, and I couldn’t agree more. What do you think of expressen.se’s new design? I’m not so sure it is better than the last one…

  24. Drowned in advertising and JavaScript they are both crap. A disgrace to anything called journalism.

  25. Looking at fawnys comments I agree with the gist of the argument, but it also seems obvious that there is a lot of venting going on. Ok, so using strict doctype is only about validation? Sorry mate its about rendering as well, and no I don’t want to be confined by a bunch of old rendering errors. Now back to reading your article :)

  26. March 15, 2007 by Johan

    And is there a boost in technical performance, has there been done any user testing?

  27. Geof Harries, the problem on Yukon News is that you declared XHTML Strict. He who lives by the Strict DOCTYPE shall die by the Strict DOCTYPE. You don’t give us any room to manœuvre at all in critiquing your site, since the use of Strict advertises the site as really knowing what it’s doing in every respect.

    So, to start, fix your JavaScript.

  28. Just curious what people think of Savannah Now. I had nothing to do with it, don’t even live in the same country, but saw that it won award for “most Innovative Visitor Participation” mentioned on Drupal’s site.

  29. Geof Harries

    Nice work on yukon-news.com. It looks pretty good. There’s a number of warnings on the markup, mostly unescaped ampersands and missing alt attributes. I notice there’s also some inline styles and href=javascript here and there. Might be a good thing to refine the markup a little bit more, try to get those out.

    I like the tabs at the top right, for the current, previous, and upcoming issues. You do have a bit of “tag soup” going for those, although I suppose they may be needed to get the images in place. I also like that there is an RSS feed, that’s a good thing for a newspaper site. I wish my local newspaper had that on their site.

    I disabled the stylesheets, and had to scroll down a bit to get to the content. Might be a good idea to add a “skip to content” link at the top.

    A few quibbles, but nice work!

  30. With the high traffic that newspapers get, I would think they’d be jumping at the chance to streamline their markup and minimize load times and bandwidth usage. But, for the most part, it seems only a few really do. It’s amazing that such tag soup is still finding its way into new sites.

  31. Joe - As before, choosing the correct doctype was out of my hands on this website and others you’ve reviewed because I didn’t build the site, I merely helped to design the interface.

    Well, no longer - as I’ve started my own company in Subvert - and I’m all for the correct doctype backed up by meaningful code. Your comments never go unheard.

    Grant - Some great points, particularly on the accessibility side of things. I appreciate your insight.

  32. Personally, I despise all news sites. I have not seen one that I truly like. They are all busy and hard to read.

    I despise newspapers for the same reason.

  33. Well, as one of the developers behind gp.se, I’d like you, Roger, to know a few things about our company culture. 1. The developers are at the mercy of whatever the journalists think is best. 2. Our opinion is NEVER even considered. 3. The journalists insist on having the option of creating manual links, thus a few unescaped ampersands is unavoidable.

    As for the huge div, it’s there to accomodate HUGE ads (over 1000px wide) from Volvo etc.

    In all, I agree with what you’re saying and I incorporate all those things in sites that I can control.

    And, fwiw, we are currently implementing headings…

  34. March 16, 2007 by Roger Johansson (Author comment)

    GPDev:

    Thanks for providing some background information. It’s very unfortunate when decisions about design and technology are made by people who do not understand either. It must certainly be frustrating to be in that situation.

    Would it help at all to let those who make the decisions know that the outside world is aware of them making really bad decisions about the site? gp.se could be (and should be) a top notch website. Like I said, I really like the printed newspaper, and it hurts to see the website be quite the opposite.

  35. NP.

    It is frustrating to work in this environment, but also quite challenging. I like that.

    But, if I’d try to tell the management about the outside world having comments and suggestions, they’d say: Hey, that’s your fault, not ours. Why did you not tell us about that before release?

    Well, we certainly did vent our opinions, but, as I said earlier, other people took priority.

    The fact that we did the entire code (there is a few lines of code… :) ) in two weeks, instead of the two months we wanted, plays a big part in the result.

  36. Yes it must be frustrating to have no real input and just hammer away as best you may. I’ve been in that position and left it as it just was worth the aggravation.

    Our local paper: The Cape Breton Post

    Sadly, it is yet another table layout with numerous errors.

  37. I’d say unfailed, a longstanding example from Holland: The Groninger Courant

  38. Y’all inspired me. Poked around for an hour or so this weekend. How’s this for a more ‘accessible’ code?

    No changes in the design.

  39. March 19, 2007 by Roger Johansson (Author comment)

    GPDev: It’s definitely better. There is still lots of room for improvement though. Here are some of the things I would do:

    • Get rid of all inline CSS (no style attributes)
    • Use semantic class names (no class=”bold”)
    • Avoid capitalising words in the markup
    • Move decorative images to CSS
    • Use real lists where appropriate (“Senaste testerna” etc.)
    • Get rid of the div + hr combos and use CSS instead
  40. March 20, 2007 by Jose

    has anyone taken a look at qctimes.com i personally like their design. Its easy to read and navigate through.

  41. Roger: How about now?

    (The zoom:1 is there because of an IE bug :( )

  42. Sorry to spam, but zoom:1 is no more =)

  43. I’ve always wondered why Swedish websites use small Verdana so much. It’s ugly and hard to read.

  44. March 20, 2007 by Roger Johansson (Author comment)

    GPDev: Better, but there are still some things that I would fix. Some headings should be real headings, list bullets should be controlled by CSS, etc.

  45. March 20, 2007 by Roger Johansson (Author comment)

    GPDev: Better, but there are still some things that I would fix. Some headings should be real headings, list bullets should be controlled by CSS, etc.

  46. I am sad that apparently there is no newspaper in Portugal with more or less reasonable web design. One of the recents redesigns is Publico. It is a shame, but as in the most situations, people, responsible for web design and implementation are those who should really hate it.

  47. Times Online reminded me quite a bit of the El País website, the online edition of the most widely circulated newspaper in Spain. Note the usage of Georgia for the headings and Arial for the paragraph text.

  48. Another redesign gone bad. (blog post in swedish, sorry)

    http://meh.tryggve.se/2007/03/har-vi-verkligen-inte-kommit-lngre.html

  49. Sad to say that my local newspaper - Uppsala Nya Tidning - is just as unfailed and suffers a lot of the same symptoms you mention, i.e. no real headings to be seen anywhere accompanied by the usual suspects: divitis and classitis, meta redirects, validation errors all over the place, tables for non-tabular data etc. etc.

    What tools are these newspapers using?

    Gnäll, gnäll…

  50. March 30, 2007 by elQueFaltaba

    I know i come a little late into this topic, but just to show you some good examples (or what i conssider good, anyway), of online presence of traditional press:

    EL PAIS: http://www.elpais.es/

    EL MUNDO: http://www.elmundo.es/

    El Pais has recently won some kind of price on good online design. Sorry, can’t give you more data on it, and unfortunately, none of them are my designs ;)

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.