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:
<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.
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.
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.