As part of a string of redesigns within the Guardian Media Group, Thursday May 10th was host to the Guardian’s ‘Network Homepage’ redesign. From looking like this [as of 10 September 2006]:
It looks like this [as of 12 May 2007]:
The design is interesting because of the way it compares to other popular websites of the moment such as Flickr and Google, as well as how it compares to other newspapers. Because of the content-driven nature of a newspaper website it’s most useful to compare it to other newspapers but also to refer to what people are saying about the design of websites. My three examples will be The Guardian (pdf link), The New York Times (pdf link), and Le Monde’s (pdf link) homepages. I took screenshots of all three websites on the evening of May 10th so as to compare like with like. It’s not the stories themselves that are of interest, but the way they’re shown.
The Guardian’s website is evolving in a way that they claim is geared towards allowing greater flexibility of content and increasing use of images.
…It offers the most immediate improvement for users and advertisers, making the site more accessible and allowing us to showcase a wider range of content. The wider pages allow us to feature more news and different, dramatic layouts as the news agenda changes throughout the day - we will not be wedded to the fixed story and picture positions of more conventional sites - and we want to offer users the best possible gateway into the full depth of our award-winning content.
Guardian Unlimited - The Next Step
As others have noted [eyefall.co.uk: ‘Guardian Website Gets (Partial) Redesign’], the redesign doesn’t go any deeper than the frontpage. Though the Travel section of the website has already redesigned in a similar fashion, that is currently the only area where the design has permeated the frontpage. This can be a bad thing, in that it creates a heterogeneous style that can be slightly disconcerting. A user going from the homepage to an older (deeper) layer of content finds that the site has an inconsistent style and navigation style. On the other hand this can create a stepping stone for transition to the new design. You don’t want, in any case, to alarm users to an extent that they hardly realise they’re visting the same website they’ve long frequented. Changes have to be within the realm of the expected.
‘Web 2.0′ is the phenomenon and the idea that’s sweeping through all internet businesses of late. As David Pogue mentions this week in his New York Times technology-focused email, Web 2.0 is largely defined as “Web sites whose contents are supplied by us, the people”. The Guardian’s website and websites have been moving towards a collaborative and inclusive approach for a long time. With their Comment Is Free site they encourage reader contributions and discussions. This hasn’t changed in the new site design though perhaps the commenting will go even deeper in further revisions. Whether the Guardian has really adopted the philosophy of user-created content as sites like the Huffington Post has, with ’share/comment’ and ‘Quick Read’ links everywhere, they have absorbed much of the style used in this new generation of site. The Guardian is of course, at heart, a newspaper. As Lynn Chang mentions in her blog post ‘The Web 2.0 Style‘, the Web 2.0 features can be summed up quite easily and often demonstrated on the Guardian Website:
- Center layout system - spreading down for scrolling rather than locked to a single page. With the advent of scrolling mice and trackpads it’s just as easy for someone to scroll down a page as look at a little box of content. Plus, more fits in.
- Increased Font size. Content that’s important gets a step up in status by getting a larger font. Smaller stories or niche markets have much smaller or even greyed out type. On the left is the font size of a general headline before the redesign, while on the right, the new size:
- Widespread use of whitespace. Whitespace lets the eyes rest from the clutter of links and news and ads. See any page from 1999: eyes need ‘breathing room’ of space that essentially isn’t used. But by not using the space, the content that is present has a boosted capacity for impact:
- Gradients. Not found on the Guardian website (yet) these are most popular with more interactive, user-content sites.
- Strong and contrasting colours that take advantage of whitespace and draw the eye:
- Rounded Corners stop graphics look like they’re from a 1960s technology magazine by always being boxed in by lines and squares. Rounded = soft = natural = approachable = friendly = à la mode:
- 3D Icons. Not found on the Guardian website (yet) these are most popular with more interactive, user-content sites and ecommerce sites like Apple Inc’s website.
- Oversized Text:
Other aspects that one will notice of the Web2.0 style, not mentioned specifically by Chang include:
- Prevalence of Multimedia content taking advantage of the explosion in freely available video and audio content such as podcasts:
- Search. The site itself and the wider web:
- RSS Feeds. Trying to get visitors to view your content even if they don’t want to see the homepage. It’s the news without all the layouts and (often) pictures. Just the news, raw = very popular.
- Accessibility. Like RSS, if you can get a reader, any way possible, that’s better than no reader. Interactive, rolling, self-updating content draws readers in and makes a website appear more dynamic. Perfect example being G24: Print Your Own PDF:
Chang finishes off by mentioning some characteristics one won’t find on Web 2.0 sites:
…Here are a few things you’ll definitely want to avoid when designing your next-gen web site:
- Blinking graphics such as animated GIFs
- 100 percent Flash web sites
- Visible tables
- Websites without CSS
What The Guardian hasn’t got enough of, or is lacking is:
- Advertising, other than for itself. Even with my numerous adblocking software tricks the NYTimes and Le Monde’s websites manage to serve me up numerous advertising images. Often unobtrusively animated, these are of big brands, not just advertising itself as the Guardian often resorts to. Sadly this often just highlights their lack of major advertisers. What is their sales department up to?
- Differentiation between advertising and content. Nobody will meaningfully click on advertising if it blends in with content. And if they do so by mistake users will become annoyed with the lack of clarity and begin to distrust or resent the content provider. Currently sponsorships and contests look too similar to real Guardian content.
- At-a-glance news. The general font size is too large. While the NYTimes throws up a load of links towards the bottom of its page, at least on the left hand side of the page there is a long list of (small) links to other sections.
- Links to premium content. The NYTimes made the decision with its Times Select service. The Guardian is one of very few newspapers that does not maintain a premium subscriber only section. An interesting difference between it and the competition. By NOT having a premium section it may gain readers but premium content does often denote quality. It is still too hard, whether premium content or not, to learn about services like the Guardian Digital Edition. It is bizarre that this isn’t more clearly publicised.
- Dynamically updating content from other sites or other sections of the site. Blogs, most read lists, incoming comments, rolling (not scrolling which is impossible to read) news, live updating of top stories etc.
At the moment The Guardian’s website is looking fantastic, but at the same time, with the recent redesign of The Times’s website and an increasing internet user literacy the site can no longer look like an unprofessional attempt at running a news organisation. With standard font sizes that are too large, unnecessary use of images that don’t add to the page and a shocking lack of quality advertisers, there is still need for tinkering.
The three example websites can be downloaded in their current state from (~4 MB) PDF links:
Comments, as always, are open. Says Emily Bell:
…to cheer myself up I went through the email inbox where it turns out the positive and negative are absolutely evenly balanced - but those who don’t like it are certainly keen to express distaste in a lengthier form.
Here’s a nice one: “Dear Guardian, very very nice indeed. A major improvement and best of all, I didn’t even think the old one had problems” from nux, and a not-so-nice-one: “Your words about the changes are for me a pompous world salad, bereft of meaning. I pass - disappointed” from Lesley Honeyman, whose eloquence has however at least given me a new title for a blog: pompouswordsalad.com
Guardian Unlimited: Your Emails and Comments
I’ve finally come across someone who at least questions one of the emergent Web 2.0 phenomenons. Lifehacker writes 
