Subscribe to our blogSubscribe
All publishers should learn lessons from Vogue’s new website launch | 06 Sep 2012
Right now, in the world of digital publishing, HTML5* is about as fashionable and as cutting edge as you can get. The publishing prize that HTML5 offers is the possibility of building a web page that will automatically rearrange its component parts (pictures, headlines, text, navigation) to display well on any and all screens – from the largest desktop monitor to the titchiest smartphone display – using responsive design (see the background note at the bottom of this blog). In practice, publishers trying out HTML5 – which is still in development – have found it quite a task to get anything other than simple, text-heavy layouts to work predictably for all browsers and all devices, and at the moment the prize is proving somewhat elusive.
So when the UK edition of Vogue announced that it had completely rebuilt its website using HTML5, it got me very excited indeed. This is a complex, luxurious publishing product that is very far removed from simple, text-heavy layouts – and Vogue claims that it now has “…a more beautiful, authoritative and technically advanced fashion website than ever before”.
Sadly, it seems clear to me that the website was launched before it was ready.
Dolly Jones, the website’s editor, states that by “capitalising on the smartest innovation going, we could not be in better shape to continue to dominate the sector”. Proud, confident words, that come after eight months of development work. Perhaps they should have spent another couple of months doing some more testing…
Two minutes with a modern smartphone (a Galaxy SII) showed that there’s quite a bit more work to do before the site is ready for Android. The screengrab to the left shows a news item, where the picture of Signor Pilati is supposed to fit neatly to the width of the screen – but instead has ballooned out of control, resulting in a closeup of a pillar behind his left ear. The one on the right shows a list view of the news section, and you can see that the list has lost its neat ranged-left formatting, with some pictures large and centred, others knocked down to thumbnails, and text/headlines all over the place.
Even with a normal desktop browser, things do not always function as they should. I saw pictures trying to resize themselves several times before settling on a final shape, images that wouldn’t download in a particular browser until the page was refreshed, and a general ‘looseness’ that suggested the underlying rules for how the pages should adapt hadn’t been specified in sufficient detail. In the screengrab on the right you can see that the pic of Natalia holding the Olympic torch has drifted away from its accompanying story, while the model from Agent Provocateur has invaded her own news story.
It seems obvious to me that the website was launched before it was properly fit for viewing. How did this happen? I have no insider knowledge, but an understanding of publishing processes suggests some possible factors:
1) They didn’t do enough testing, and so didn’t uncover the issues.
2) They knew there were still bugs, but were compelled to launch before they were ready by an internally-determined deadline.
3) They were compelled to launch, ready or not, because of deadline promises made to advertisers.
Some of Vogue‘s fans have already left fulsome plaudits on the new website. But I suspect that other people will have gone to the new website, found the same problems that I did (and that was only a ten-minute scrutiny using three devices – it seems likely to me that there will be other issues that I didn’t spot in my short appraisal), and have gone away with their opinion of the Vogue brand diminished – not demolished, just diminished, because underneath it all you can see that there is a bold and interesting website waiting to be finished. And I suspect that this sad outcome was avoidable.
The object of this blog is not to say that HTML5 isn’t going to be very useful for publishers when it finally comes of age, because it will be; nor am I having a pop at Vogue for trying to be a digital publishing innovator, because I applaud its intent, and I hope it will be able to fix all the issues in short order.
What I am saying is that there is a very simple lesson here for all publishing professionals thinking about their digital strategy – and that is, if you’re going to innovate, make sure it works properly before you launch. And if it doesn’t work properly by the planned launch date, postpone the launch until it’s fixed. The timing of every launch should be in the publisher’s gift – don’t sacrifice the chance to make a brilliant launch instead of a flawed launch by mortgaging this precious gift to the suits or the advertisers, and don’t hem yourself in by setting arbitrary deadlines that you later wish you hadn’t.
Mark Rosselli is chairman of CPL
*Background note: HTML5 is the work-in-progress fifth generation of HTML, the basic document format used to build web pages. HTML5 promises many things (and delivers some of them already), but one of the shiniest bits of HTML5 as far as publishers are concerned is its capacity to deliver response design – which in practice boils down to a web page layout being able to detect the screen size of the device you’re using to look at the page, and automatically resize and reorder itself to fit that screen perfectly. To keep things legible and sensible, responsive design means developers setting rules and parameters for how the page should adapt to best fit the shape and size of the viewing screen. A simple example: if you have a row of four big photos in a horizontal line on a web page, you might set up the code so that if this page was being viewed on an iPad and not a desktop monitor, the page would automatically turn the horizontal line of pictures into two rows of two photos each in order to keep all the pics at a reasonable size for the iPad’s smaller screen… and if the viewing device was an iPhone, it might instead display these four pictures stacked in a vertical column so that the phone’s tiny screen could display each picture well. Good responsive design involves thinking deeply and carefully about what to do with navigation items, headlines, images and text as the available screen real estate changes.