Some quick thoughts about the Guardian mobile redesign

I use the Guardian mobile site all the time, so I was intrigued by the new redesign. My initial response was not positive. It has some strange design decisions.

Fonts

Inspecting the page through an emulator reveals that the headline and standfirst text are the same font displayed in a different colour. The font is the Guardian's house face, Egyptian, in its Headline variant.

The headline font is embedded in the document as an inline style: this makes sense as it needs to be present at first render to allow the text to flow properly, but it does add 10kb to the page. A navigation font is included as an external file, despite appearing before the fold.

On an iPhone Egyptian Headline appears very heavy and doesn't alias as nicely as a system font, but I can understand the desire for a corporate font, especially for a newspaper.

For comparison, here's Egyptian Headline with the similar but less condensed Baskerville, which is an iOS system font:

Anti-aliasing on Baskerville (below) lightens quicker than Egyptian, giving a crisper look.

Usability

The main issue is what having the same font does for usability: the Guardian makes the same error as the BBC did when it relaunched news - only the headline and accompanying image is tappable. The standfirst text does nothing. There's no visual indication what what will happen when you tap on one part of the screen or the other (no affordance) so the user is expected to remember than black means tappable and dark grey doesn't. Especially as this situation is not true on subsequent pages: on those black is not tappable - blue is.

The BBC fixed this, hopefully the Guardian will too.

Images

I got caught in a low bandwidth area on my way in to work and was able to observe the way images have been made responsive on the site. Unfortunately, the responsiveness forces redraw, which is in my mind a worse sin than server-side detection.

These screenshots are from Chrome on an iPhone, so not entirely fair, but I've retested against Safari and there is still redraw.

On first load the page knows that it has to make a space for an image, but doesn't know how big:

Then the page tries to accommodate the largest scaling:

Before finally settling into the right size:

While this is happening, the actual navigable page is meandering all over the shop. 

This also leads to some weird renderings:

Matters of taste

I really don't like the section navs: they're finger sized and separated, which is good but the arrow positioning looks like the result of a float:left error.

There's another touch issue here: the word "Sport" takes you through to the section, but the grey bar it sits on doesn't. I'd favour a larger touch target.

Overall

I'll probably come to love it and moan when the next redesign comes along, but at the moment the redesign looks like a mixture of best practices (finger sized targets), overreach (responsive images) and poor usability (colours, inactive touch targets.)