My next project was one that’s really close to my heart. A few weeks ago, I came across a GREAT article in the online edition of Newsweek about the 2008 Presidential Campaign. It was full of terrific background on the candidates, the way they and their teams thought and acted, and the various phases that each of their campaigns went through before Obama’s victory.
The writing was outstanding. But the readability was absolutely AWFUL!!!! It was a struggle to plough my way through what should have been an amazing reading experience, with well-written, engaging content.
So first I tried to analyze what was wrong, then began experimenting. I knew I couldn’t do it exactly as I wanted with today’s Web technology. But I knew instantly that I could make it a lot better.
The first thing that’s wrong is the same problem with every news site I’ve seen – it’s just far, far too busy. In the rush to become “Webby”, they’ve created pages with columns of hyperlinks off to each side, videos you can click on, etc – and in the process they’ve broken up the writing in horrible ways, making reading a disjointed experience, unlike the printed Newsweek, which you can sit down and read at your leisure, soaking in the words like floating in a nice hot bath….
It’s worth noting that Newsweek’s pages have TEN PAGES of script and coding before the first content even appears in the HTML!
If you add to that the distractions of Web browser chrome, you’re really stacking the odds against an acceptable reading experience.
It’s like using a flamethrower to treat an outbreak of acne…
The other big problem I see in news websites is that in the rush to replace revenue from print ads with Web ads, they’ve stuck really intrusive ads in really instrusive places.
You get stuff that flashes at you. Our Homo sapiens version 1.0 perception system treats movement at a Priority0 interrupt. We have no choice but to pay attention, because movement to a hunter-gatherer equals either Threat, or Lunch…
Trying to read when that’s going on is like trying to read a book in a cageful of lions. For more on this, read my Paper, The Magic of Reading.
Advertisers need to realize that catching our attention in this way is totally counter-productive. Yes, we have to look. But we deeply resent being distracted in this way. Modern humans need their attention to be wooed – clubbing them over the head went out with the cavemen!
The last thing you ever want to do is buy anything advertised in this way.
Don’t get me wrong. As a newspaperman, I’m a realist. If people aren’t paying for Web content, then advertising revenue has to be able to support these news-gathering organizations.
Advertising doesn’t need to be distractive or intrusive, just because it’s on the Web. People buy issues of the printed Vogue magazine as much for the adverts as for the other content. The adverts look great! They don’t distract, because I have the option to page past them if I want. If they’re attractive enough, I won’t – and a whole multi-billion dollar print advertising industry was built on that premise.
I’ve worked on a couple of online projects at Microsoft in which we’ve created really great adverts. I’ve already spoken about adaptive adverts in the New York Times Reader. Those change to fill the available space as content itself reflows adaptively when either the window is resized, or the reader changes the type size (which they need to be able to do).
In another project, a colleague commissioned an agency to build onscreen ads which were so much BETTER than anything you’d ever seen in print. And they can have sound, be interactive, be animated, or contain video. Just as long as you can turn off the action when you want to focus on reading.
So it’s not that onscreen advertising is evil – it’s just that no-one’s doing it right yet. I included an advertisement for Rolex watches, taken from the Newsweek website, in the second page of my version of the article. The original was actually animated: the watch hand swept around the dial. That might not bother me when I was reading. If it did, I ought to be able to click to turn the animation off and on.
So I started playing around with various layouts. I liked the navigation strip Newsweek had used, with the “Secrets of the 2008 Campaign” across it, and links to the various sections. That worked very well with the kind of navigation I’ve shown you in my previous experiments. All it needed was to add page turn buttons (and link them to the Left and Right arrow buttons on my keyboard).
I haven’t made the strip interactive yet, because I’ve only done one section of the article. But you can see how it would be done: make each of the headings – Highlights, Chapter 1, Chapter 2 ,etc – a “hot spot” with a link to the relevant first page of each section…
Again, I decided on pages of 1440 x 900 pixels. I don’t like fixed pages, but there’s no easy way (no way at all, really) to get exactly what I want today without using them (sigh!).
I started doing some mockups, and sent them to colleagues. Mike Duggan came up with a great layout, although I modified it and he may not agree my modifications are better. He had the same four narrow columns, but I found his proposal to set the text ragged right gave an effect which was too distracting in that column measure, and so I made the body text justified instead.
If you use justified text on your website, then you really need to use hyphenator.js to hyphenate it – otherwise you end up with awful word spacing, especially in narrower columns.
For that reason, I apologize to the Newsweek journalists who wrote the content. I’ve had to chop up their longer paragraphs to try to overcome this technical problem. Doing this job properly would involve using the much more sophisticated layout and composition engine of the browser itself – which is how it should happen in the future.
Remember, I’m stuck with using tricks to overcome the limitations of the Web today. And trying to influence the Web of tomorrow in the process.
The body text is Cambria, my favorite for sustained reading. All the fonts I used are embedded using Embedded OpenType. The font objects were all created with subsets which contain only the Basic Latin character set to keep the size down. Means I never need to create new ones, and those font objects are available on my site for every one of the pages I create.
Only Internet Explorer supports EOT so far. If you’re running another browser, you’ll need the fonts on your system (if you’re running Windows Vista, Office2007, MacOffice2008, or have installed the Office 2007 compatibility pack, they’ll be there).
The main heading, “Obama” is 72 point Calibri in a weight of 700, with an upper-case transform. You can find all of these in the CSS stylesheet I created: http://www.billhillsite.com/newsweek2.css
A word of warning. My stylesheet “grew organically” and was not really methodically planned; I just re-used earlier ones and modified them. So there are almost certainly styles in there I’m not using in this publication. It needs a good cleanup…
The toughest part about doing this project has been the fact that I have to manually paginate, since there’s no browser which supports pagination of flowing text content today (I know, you can paginate paragraphs from a search engine or database – but you can’t paginate a book or a magazine).
I’ve properly paginated only pages 1 and 2 so far. I need to go into subsequent pages, add some more graphics, sub-headings, pull-quotes, and ads to break up the text in a nice way. I also need to go in and split up the longer paragraphs. And I think I need to create at least one more page to hold all the overflow text which will result from that. So it’s still a work in progress.
But I think what I’ve done so far is a big improvement on the same article on Newsweek’s website. I hope you agree.
I really want to work with Web designers, the browser teams and W3C standards folks (both HTML and CSS) and others, to make sure that what I’m forced to achieve by trickery today becomes really easy and absolutely routine on the Web of tomorrow.