Experiments in Web Readability 3: A News Magazine Feature

Before: The start of a feature article on the Newsweek Website

After: The same first page – but laid out for readability. Don’t forget to put your browser into FullScreen view (F11 – if you have one of the two browsers that support it…)

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.

Now I’ve seen and tried so-called “bookmarklets” which generally use a Javascript to strip out only the text (or text and “significant” graphics) from a Web page or article to give you a “readable” version. Every one I’ve seen so far “throws the baby out with the bathwater” and turns what should be a great visual experience into a boring one. Usually you end up with nothing but text, no graphics, a layout that uses only the center of your display, etc.

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.

Second page of the Newsweek article, with advertisement. Ads ought to be able to span one, two or three columns – or even be full screen.

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.

I used another javascript to do multiple-column layout. I’ve mentioned before, it uses the DOM, doesn’t understand anything smaller than a paragraph, and therefore is challenged when it comes to breaking longer paragraphs at the bottom of 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.


7 thoughts on “Experiments in Web Readability 3: A News Magazine Feature

  1. joeclark

    The alleged “ten pages of scripts” and whatnot mean nothing to the reader, as they are unrendered. Ask Nate Koechley to explain how to place such assets to speed page loading.“Distractions of Web[-]browser chrome” can be turned off. Only the user should make that decision. This is a different discussion from claiming that the UI to make such decisions is good enough or even apparent to most people. It isn’t up to you to remove people’s browser chrome, as you seem to suggest. That’s the sort of thing Flashholes do.You have – yet again – dressed up a magazine layout, with multiple columns and a callout, in the drag of “Web design.” You aren’t creating designs for the Web. You are replicating magazine layouts online, defying everyone’s expectations (really everyone’s) and the basic mutability of the Web in the process. Hint (again): The Web does not have a fixed resolution, and even if it did, it wouldn’t be yours.Quite simply, “the Web today” is not a set of “limitations” to be “overcome.” In any event, you want the Web overthrown and replaced with onscreen print.The foregoing is the best I can make out of your nigh-impossible-to-read white-on-black justified text (the latter of which you warn against). Future of reading? I think not.Your grand plans here are presented with tremendous bravado and with an undertone of “When will these people learn?” And they continue to be completely ignored by practising Web designers, who rightly can spot a pig in lipstick from ten paces. You aren’t doing what they’re doing, you insist that your way is right when it isn’t, and you’ve learned nothing from your mistakes.“Web designers, the browser teams and W3C standards folks” manifestly do not want to “work with” you; you are working against them.Leave the Web alone, please. You aren’t helping.

  2. apsed

    Joe’s “defying everyone’s expectations (really everyone’s)” is somewhat preposterous: count me out, i.e. someone who checked digital publishing against customer demand for readability on a wide range of devices for something as twenty years.Primo: I won’t “let the web alone” to any newbie, I’m definitely there, I’ve been there for a while and intend to contribute and make the web a nicer place so that newbies don’t get fooled by techno ‘pure players’.Secundo: browser teams, W3C standard folks, software and hardware manufacturers usually welcome innovative experts about customer habits and requirements. Web designers who take for granted silly constraints aren’t really federated and promoting any innovation. Let them rant.

  3. Bill Hill

    apsed: “Web designers who take for granted silly constraints”…That’s a perfect encapsulation of behavior I’m trying to change.For instance: Just because a group of software engineers at NCSA who were creating the first Web browser about 16 years ago took an “easy option” – an engineering expediency decision – now we’re supposed to live with it for ever?It can’t ever be questioned?It was much, much easier for the engineers to put content in a bottomless scrolling window – because it’s much harder to paginate it properly.So we have scrolling on the Web instead of paging, and everyone accepts “that’s the way the Web is”.Well nothing is forever. It doesn’t have to be that way.I’m not saying people shouldn’t be able to have scrolling content if that’s what they prefer. But it shouldn’t be a constraint – that is indeed silly.Let’s take the handcuffs off the Web.

  4. Richard Fink

    IN RESPONSE TO JOE CLARK:First, I write this as someone who:1) frequently reads and finds merit in your writings;2) has donated money towards your efforts at research and standardization of captioning, et al, at the Open & Closed Project;3) was chastised publicly by Jeffrey Zeldman in A List Apart Magazine for demanding that an author apologize to you for dropping your name into her article for no other reason than to add gravitas and credibility to what was lame and useless.4) and I consider your book on Web Accessibility a valuable part of my home reference library.Further, in frequenting many of the same sites as you, I’ve become delightedly accustomed to watching you pop your head up out of the trash can – like the character Nagg in Samuel Beckett’s play Endgame – to fire off a post with a pointed barb or two, and then – head back in the can again – ignoring (but, I’m sure, continuing to monitor) any subsequent response. (I’m sure you won’t respond here, either.)Now, whether this hit-and-run “guerilla” style is for effect, an ingrained part of your personal style, or simply a kind of cowardice, I don’t know. And I don’t care.And the reason why I don’t care, and used the term “delightedly”, is that you are usually on point, usually correct, and sometimes original.But with your post on this thread – and I’m befuddled by it – you really don’t seem to know what the hell you’re talking about. Is somebody else using your name?Putting aside the ad hominem vitriol, the substance of your post and the assumptions on which they rest are demonstrably false. Preposterous nonsense.You’re way too smart to think that anybody here would buy into a reworking of “Forty Million Frenchman Can’t Be Wrong” as a rationale.So what’s up?I eagerly await your response or, better yet, we can “take it outside” and arrange a point-by-point debate at Bill’s Screen Readability group on Facebook.Up for it?

  5. Sebastian

    Dear Bill Hill,thanks a lot for this post and experiments! I’m quite comfortable with the layout-possibilities of the web, but when I saw your magazin-style-layout, I quickly remembered a blog2mag-idea, that I have in mind for some month: I was looking for a simple way to convert my online-blog-edition into a weekly (or monthly) pdf-edition in a classical mag-style.There are services like feedjournal (http://www.feedjournal.com) or HPs tabbloid (http://www.tabbloid.com), but you might agree, that automattic conversion is useless, since you don’t have any possibilities to edit the output. Additionally the personal style of blog-entries often doesn’t fit to a magazin layout, so editing-function is a must-have in my eyes.Some days ago I found an online-based plattform, where you can produce a personal magazin (http://www.titelhelden.de). Unfortunately it’s java-based and you can not integrate existing web-content into that online mag-editor.So finally I tried offline-solutions with ms word: For transformation I used a weekly newsletter-service, the weekly mail can quite easily be integrated in word, but editing and formatting in word is probably the worst solution so far. Now I come to the point: My earlier intention was to set up a plattform, where1. everybody can set up and style his own magazin template (like you have shown here). I think that a grid-editor might be usefull for designing a template, since people can use it even without any css and html-knowledge. 2. After that you can regularly integrate your blog-content into that magazin-template by rss. Would be perfect, if you could sort the content by tags and categories, like rubrics in classical magazins.3. Hereinafter you can edit the text of the prebuild magazin. That would be most comfortable in a frontent way, maybee with adobes incontext-editor (have a look here: http://www.adobe.com/products/incontextediting/).4. Finally you can convert that web-mag into a pdf-mag. If you have a pdf-file, you can easily distribute it offline (e.g. by mail) or online (e.g. issuu.com).This would be a really easy way for bloggers and small publishers, to realize cross-(format)-publishing and provide your content for online- AND offline-nerds. So this might be an additional idea for your experimenting: building a magazin-editing-plattform, which helps us small bloggers to publish our content in different formats.Hope you like this, greetings.Sebastian trendschau.twoday.net

  6. Bill Hill

    @ sebastianThe Web needs a great tool which can be used by people who just want to write or lay out content to high standard without having to learn to be a programmer.Despite all the high-flown rhetoric about it, the Web is not yet truly democratic. Theoretically, anyone can create content. But if you want to do anything creative, you have learn the “new Latin” first.And you have to spend a lot of time doing that instead of on creating the content which was the reason you came to the Web in the first place.The tail ends up wagging the dog…The tool I envisage should output layouts capable of adapting automatically to different screen sizes.It should do so using Web-standards markup, and not its own arcane code incomprehensible to humans.It shouldn’t be specific for “magazine” design.I personally don’t like PDF as a solution, specifically because it’s fixed layout and there’s a danger people will settle for that.But a tool such as I describe should be able to output PDF as one “fixed interpolation” if people want it.


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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s