On The Guardian’s New Website

Terribly sorry about missing last week, had a busy weekend punctuated by a bout of the dreaded lurgi, so didn’t really have the time not inclination to write anything. Could have sworn I’d scheduled a General Failure, but apparently not. Normal service resumes now! No, not now, then!

While I mostly fill my internet space with nerdy ramblings of varying consequence, dear Hypothetical Audience, out there in the horrible, depressing meat space we all occupy known as reality I am a Graphic Designer by trade, specifically one trained in layouting and typography. Given how we are pretty much surrounded by items of design, it’s pretty hrd to switch off the senses hammered into by your training in the creative industries, meaning you constantly analyse the world around you. To that end, I’ve decided to spend the next couple-or-so blogs talking about the world of Graphic Design. This week I thought I’d look at The Guardian’s new website. After about a year and a half of “beta” appearances randomly throughout the site it finally became the norm a couple of weeks ago, and if I’m honest, it’s not that great. I don’t mean it in a “They Changed It, It Sucks, Rabble Rabble” way either, some of the design decisions are ones I don’t particularly understand, and really don’t gel well with a major national and international news source.

The previous iteration of the site, which is still the default layout for certain pages (which breaks consistency somewhat), wasn’t exactly brilliant either, and seemed to follow the usual trend of British newspaper websites of both not resembling the printed version in the slightest and attempting to cram as much as possible into the main pages. However, the way it presented information was pretty accessible, the hierarchy of articles on the front page, for instance, tended to resemble, albeit vaguely, the same heirachy you’d see on the print version. This included different columns for the less prominent stories and a whole side bar dedicated to the non-news sections that were both clearly differentiated from each other. The new site does away with this, and indeed different columns all together, for a very rigid grid system on the front page that’s split into specific, page width rows for each section, within which each story is assigned a box that’s sized according to how prominent the Guardian assumes each story is. There is also a limited number shown initially, with pretty much an extra section hidden beneath a “Show More” button.

Now, the grid system itself isn’t particularly bad, nor is it ground breaking since most layouts are predominantly grid based. The problem is how the information is presented. Most articles in the headlines section are presented as just their headline, no image, no blurb, nothing. Only the more prominent articles get any more than this. Further down into the non-headline sections the amount of images increases due to arbitrary reasons (as far as I can make out) but still no elabouration beyond the headline. Contrast this with the old site where everything on the main page had an image and in a lot of cases a little rollover containing a blurb or extract, making it a lot easier to figure out if the article was worth reading than just the lone headline. The size of the grid is an issue for me too. The smallest box is obviously designed to fit a maximum amount of text on top of the “Number of comments” line and still be readable, however since most headlines aren’t that long it means a majority of articles have an awkward, and incredibly variable, ammount of empty space at the bottom of their box, which is even more noticeable when the box has had the special red live blog, dark grey picture gallery or purple… purple (which I can’t figure out what it’s meant to represent) background added to them.

There are other oddities with the layout too. The title bar of each section, which includes the little weather thing at the top, seems to move around somewhat at random. Usually it sits above the section, as would seem logical, yet if you expand you browser window on a desk top system to a certain point it leaps to the lefthand side, pushing the rest of the layout over slightly and making the whole thing look awkwardly off centre thanks to the white space under the title text. What’s even odder is it seems to only do this for a very specific range of width, as making the window even larger shoots the title back on to the top of the section. It honestly eludes me as to why this should happen. The article pages aren’t exempt from odd layouting decisions, as the body text area seems to be much thinner than before, meaning articles appear to be longer and require more scrolling to reach the end. Combined with the side bar on the right which is mostly “What’s popular” means yet again there’s an awkward lop-sidedness to the whole thing again. Another quite odd issue is how breaking news stories is handled. On the old site, breaking stories were just a ticker device directly under the masthead on the front page, which wasn’t that useful but was at least out of the way. The new site does way with this in favour of a very large, hard to ignore overlay that turns up occupying a good section of the bottom of your screen until you click it closed. Whats worse, this is no longer unique to the main page, it will turn up on every single page you have open. Obviously someone forgot that this was a newspaper website not an overly-shiney 24 hour news TV channel.

And then there’s the advertising. I get it, advertising is why newspaper sites can be free, and I’d rather have that than the ludicrous pay wall certain other papers are doing, but ye gods is it invasive in this new layout. While it’s not so bad on the main page, even if it does commit the mortal sin of putting an advert above the masthead, in the article pages static adverts seem to take up half the text column when viewed on tablet or desktop, often interacting with sidebars to totally block the text in some areas. While the adverts don’t seem to be any larger than they were on the older page, the fact the text is more constrained makes it seem to take up far more space. On mobile devices bthese adverts always take up the entire screen, which is annoying enough, but even more so when it’s mid-article. There are also a couple of flash/video based ads turning up in articles slap bang in the middle of articles, which are even more annoying since they tend to start playing automatically (including one that started playing at full volume on me). Interestingly they vanish totally when you click any sort of cancel buttons, leading to no evidence they were there. Part of me is interested how it’s decided to insert them into articles.

Not all of the redesign is bad. Personally, I quite like how the boxes in the main page’s grid layout are specifically coloured for certain purposes, specifically red for live blogs, dark grey with yellow headline for photo galleries and purple, which seems to just be for random emphasis. This makes these specific articles much easier to pick out from the mass of information on the main pages. There’s also how individual sections on the main page beyond headlines can now be hidden, and the page uses cookies to remember this. Not everyone wants to be forced to read past the opinion or sports sections, for instance, so this strikes me as an actual step forwards in reader-orientated design. Perhaps my favourite change from the old site is the removal of rollover effects. While I much preferred it to the current design, the old site came from an age that just predated tablets and mobile devices becoming a mainstay of internet viewing devices, so made extensive use of things aimed squarely at a mouse interface. This made it a bit of a pain for tablet users, since rollover effects at best don’t work due to having nothing to roll over with, or at worst cause issues. The old Guardian site was roughly half way in between, as clicking a rollover enabled link didn’t immediately activate, rather bring up the rollover content. Doing away with them entirely is a good step forward.

As I said, the previous iteration of the site wasn’t perfect, and I understand why it needed a redesign. However the redesign we got wasn’t brilliant. Most of the layout oddities seem to me to be trying to cater to the “post-PC world” of tablet dominated web browsing, but it’s now getting to the point where tablets are advanced enough that most concessions made for them are fast becoming obselete. The designs seem to be based around a mindset that something must be done to accomodate them, but stopped short of actually looking into what actually needs to be done. To say this was bad idea is a severe understatement, as the article posted annoucning the change had a comments section that was overwhelmingly negative. You’d think after trialling it on random parts of the website for a year and a half they’d have cottoned on, really.

So there’s your brief glimpse into the mind of a graphic designer, Hypothetical Audience. We’ll continue this journey next week when I muse on the recent move away from skeuomorphism and the general reaction to it by the public. So you’ve all got a week to find out what that actually means (because I didn’t until it became a cause célèbre),
Until Next Time, Folks,
— Ndro
— Not sure where the Grauniad is going right now

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s