Experiments in Web Readability 2: A Blog

The first page of my Readable Blog. Click on each of the graphics in this article to go to the original page on my website. You’ll want Internet Explorer 8 to view the embedded fonts properly.

My first full-scale Web Readability experiment – a book – showed me that you could produce text on Web pages which people could read for long, sustained periods.

It wasn’t a simple process, since it involved a lot of manual editing to get column- and page-breaks right. It meant you had to create a separate web page for each page of the book – which of course meant you had to duplicate all the header code, code to draw the title bar, navigation buttons etc. on each of the pages.

That’s wasteful! But until Web browsers’ layout engines support full pagination, there is no other way as far as I can see. Ideally, what you want is a kind of “Master Page”, which includes all repeating elements. I think this can be done using CSS; I plan to try some experiments in this area.

However, there’s still no way to have your browser flow the content until your “page” fills, then create a new one, and so on until all the content’s placed. This is what software like the Windows Presentation Foundation (WPF) – based New York Times Reader does – and we need this functionality on the Web. It will mean that not only will Web browsers have to evolve, but we’ll need new (or improved) Web standards, too.

Anyway, that’s in the future. I wanted to see what I could do today.

For my second project, I chose a Blog. Blogging has made publishing content easy. But the resulting output is ugly and hard to read.

Why can’t a blog be as readable as a well-laid-out magazine? There’s absolutely no reason, except the technology has not yet evolved to support it.

Today, blogging software (like Blogger, or LiveSpaces) pretends that it’s giving you a multi-column layout. But that’s only true for the first screenful or two. If a blog contains longer articles, then as you scroll down you end up reading the same old, boring, wasteful single-column – with large sections of the screen either side of it completely unused.

That’s the main reason I chose white text on a black background from among Blogger’s layout options. I’d prefer black text on white – but when there’s just one narrow column of text in a vast area of white, the screen’s punching far too much light at the reader. A page of printed text:

  1. Is reflecting light, not transmitting it, and
  2. Has an overall, even “grayness” because it’s generally filled with text (typographers call this “color”)

Ideally, the Web needs true multicolumn layout. And, of course, you can’t have that without pagination – it makes no sense at all to have to scroll down to the bottom of a column, then all the way back up to the top of the next one in order to continue reading.

Multicolumn layout and pagination makes a blog much more readable

When I began my first experiments, my friend and colleague Mike Duggan designed a “masthead” for my blog. It was originally laid out in a print publishing application; I wanted to see if it could be replicated using Web standards markup.

Another colleague, Chris Wilson, managed to recreate it.I tweaked his code a little until I was happy with the final look. Problem 1 solved – a consistent look to all the pages, using CSS for the text specs. I also used the same “Forward-Backward” buttons I’d used in the book – because again the pages were designed to be read in FullScreen mode, so the pages and not the browser would contain the navigation.

(Interesting digression here)

Although the buttons were better than browser chrome, it was still a bit of a pain to have to reach for the mouse, move the pointer up to the button and click. Somehow it seemed to detract from the smoothness of page-turns that you want, especially in a sustained read, like a book.

Just this morning, though, my friend and colleague Greg Hitchcock asked me if it was possible to have keystrokes (left and right arrows, for instance) do the job instead.

I emailed the Internet Explorer team and Alex Kuang sent me a script which allows you to assign keystrokes. I copied it, saved it as a Javascript with the name keynav.js, and copied it to my website, http://www.billhillsite.com/

Then I edited the pages of the book to add a reference to the script, and two fragments to the existing “next page” and “previous page” code. Now you can use left and right arrows to page through the book. Try it at http://www.billhillsite.com/mabinogion.htm

I haven’t put these page turns in my readable blog yet, but I’ll do that over the next day or two. Turning pages this way on a laptop just feels so much more natural!

(End of digression)

Back to my readable blog. I set about laying out the pages using the ClearType optimized fonts we shipped with Windows Vista, Office2007 and MacOffice2008. I used Internet Explorer’s Embedded OpenType capability to do that.

I picked up the same multicolumn Javascript I’d used for the book, and used CSS to set the number of columns to 3, to give a more magazine-like layout.

I used CSS to create a Drop Capital at the start of the main story on each page. CSS drop caps are a bit of a pain. There’s a lot of trial and error involved, and you still can’t do true “typographic” drop caps. The CSS working group needs to get some eminent typographers like Robert Bringhurst involved in defining how this kind of functionality should work.

That said, the drop cap I managed to create (with a lot of help from Chris) still looked better than the normal “vanilla” beginning of a paragraph of text.

Then it was down to writing the text and adding graphics to create each page of my blog as a separate web page. Getting the column breaks right still took a lot of work because of the lack of granularity in the multicolumn Javascript.

One thing you should note about these pages is that I also took a lot of care to make certain the baselines of text were aligned in adjacent columns. That definitely adds a huge feeling of stability to any layout. It’s one of those magical typographic attributes; without that, something will feel very wrong and unbalanced about any multicolumn page, and unless you’re experienced you won’t even know what’s missing. You can just feel a page “settle down” once you get this right.

To achieve this rhythm, you need to make sure that everything on the page – all your different styles, the depth of every graphic, etc, is based on multiples of the line-height of the body text.

I did this manually. But there’s JQuery code to do it on the site of my former colleague, Fil Fortes. Find it here.

There’s still a major problem with this kind of layout. Because multicolumn requires pagination, and there’s no such thing as a “fixed page size” on the Web – because readers will access sites on a wide range of different displays – this kind of layout will need to become adaptive in order to work everywhere.

The WPF-based NYT reader does this, changing the number of columns and the sizing of pictures, etc, to fit the window in which it’s being displayed. We really need this technology on the Web. Otherwise we’re still doing things the way information designers have worked for 35,000 years – since they first painted on cave walls.

A page from my readable blog with graphics showing how effective adaptive layout can be.

I hope you’ll agree, these layouts are much better than the poor options blogging tools allow us today.

Now, don’t get me wrong – the blogging tools of today have democratized publishing in a way we could never have dreamed of when I started work as a newsman back in the 1960s. They make it possible to write content really easily, add graphics and links, post it, deal with comments and all kinds of other stuff.

But they’re all still in their infancy, and need to learn the lessons it took the world of print 550 years to absorb…

Advertisements

10 thoughts on “Experiments in Web Readability 2: A Blog

  1. apsed

    Thanks for this very clear and useful post, which comes right in time for on-going discussions about reflowable standards such as ePub and the need for better lay-out engines.It would be very beneficial for everybody that your contributions are taken into account for CSS and ePub further releases.

    Reply
  2. Aldus

    All my compliments, I’m absolutly convinced by the result! What are the future steps now you suggest for the developpement of those kind of applications in books and blogs?

    Reply
  3. Richard Fink

    CONGRATS ON GETTING THE COMPLETE BOOK ONLINE, BLOG TOO. As you know, I share your interest in adapting printed works to screen and I could comment on and on, but for now…1) ”However, there’s still no way to have your browser flow the content until your “page” fills, then create a new one, and so on until all the content’s placed.”Sure there is – it’s called Ajax! One big fat problem, though, is pagination and URI’s, the relationship between the two, and it’s impact on indexing. If you envision two books, same title, same type size, but one a hardcover and one a paperback – it becomes clearer. A particular paragraph on page 5 of the hardcover becomes the stuff on page 12 or so of the paperback because there’s less text per page. There has to be a reconciliation, a mapping of some kind. It’s the old relative vs absolute deja vu all over again.2) There is a new font-embedding technique – fairly well along developmentally – that consists of a TTF or OTF file converted to javascript JSON values. These values are then used to render the font with VML in IE (looks excellent, scales great) and the Canvas tag in other browsers. There are two flavors at the moment, Typeface.js and Cufón with Cufón being the better of the two. A good round-up with sample pages and links is found at Cameron Moll’s blog at:Exploring Cufón, a sIFR alternative for font embedding This thing is perfect for headings, drop caps, all the spice that makes everything nice. Cross-browser and quite practical. Well worth checking out.

    Reply
  4. Bill Hill

    @ Richard:Yes, I know you can do this with AJAX. I've seen it. It needs some new technology (and probably markup) to make it work the way it should. There are ongoing projects I can't talk about yet. With regard to indexing and referencing, this is a thorny problem that the Web has not yet addressed.In eBook, we simply repaginated. The problem is, all page numbers change if the reader chooses a different type size ( which they ought to be able to do!)Kindle uses "location" numbers instead of page numbers, which is the right idea, horribly executed.Here's the idea I think works best – don't throw up your hands in horror but keep an open mind – it's worked for a couple of thousand years at least (the Bible!):Publication ->Chapter ->Verse (=paragraph)You have a structure that survives any reformatting. You can get close enough to find what you want.I'll check out Cufon. Would it solve the biggest problem – really readable, attractive fonts for the body text, where the biggest reading challenge always lies?Unfortunately, no-one but Microsoft (my employer) has ever invested the time, expertise and money it takes to make them – in large measure because of my efforts…

    Reply
  5. Juliet Sutherland

    While not directly related to your aim of producing new material that reads as well as a paper book, you might be interested in the expertise developed by the volunteers at Distributed Proofreaders (www.pgdp.net). They transcribe public domain works which are then distributed through Project Gutenberg (www.gutenberg.org). In the process of trying to adapt older books to a digital era, they have come up with lots of ingenious ways of using CSS to represent common typographical problems.The DP constraints are quite a bit different from the environment you are working in. All of the html must work in all of the most common browsers (getting things to work properly in IE is usually the biggest problem). Specification of particular fonts is prohibited, as are absolute sizes, although things like italics, relatively larger or smaller type and sizing of illustrations is allowed. Some adaptations to simplify and improve TTS capabilities are also usually included. The overall purpose is to make the books and periodicals available and readable on as many different platforms as possible.Some examples of various types of books can be found at the DP wiki. One that works particularly well with variable size screens is Holbein’s Dance of Death.DP commonly deals with drop caps, sidenotes, endnotes and footnotes (including multiple series of footnotes for critical editions and footnotes whose footnotes have footnotes), illustrations, poetry, simple and complex tables, advertisements, and every other absurdity dreamed up by the typesetters of 100+ years ago.Not every book is equally well produced, since all of the producers are volunteers and have varying levels of skill. Still, almost any weird situation that can come up has probably been discussed by the DP community and some sort of solution that works within the constraints given above has been found.

    Reply
  6. Bill Hill

    @ JulietI looked at The Dance of Death, and I think you have done an excellent job – it sets very nicely.Overall, it give the impression of a job carefully done. It’s the best-looking text I’ve seen in a Project Gutenberg book so far.I have Internet Explorer 8 running on my machine, and my Fonts option is set to apply Cambria to sites where no font is specified.Applying Cambria to this gives really readable text.There are at least a couple of things I spotted at first glance which could be done to further improve it. If I spent more time I might well see more:Hyphenation would help homogenize the word-spacing. (Perhaps you don’t want to use Javascript. As you mention, the constraints which you have self-imposed are a little different to the environment I’m trying to create)It’s disappointing that “inches” and ‘feet’ marks are still used instead of proper typographer’s “curly” quotes (which can be expressed as HTML entities). Again, this may well be a result of a constraint applied to support Text-to-Speech.The column-width does indeed change very effectively when window size changes (so it will do the same on different screens).However, it’s only part of the way towards what I mean by adaptive layout – which I KNOW is achievable, because I’ve seen it working (in HTML/AJAX as well as in WPF).I’d like to be able to read this book on my screen with no distractions. So the browser would occupy the full screen (and indeed, I’d use the Full Screen option in Internet Explorer or Firefox to clear away all of the browser chrome)I’d like the layout to be two columns, provided my screen is wide enough to accomodate that layout and still give a line-length within the range optimal for reading at the type-size I choose to read.I definitely want it to be “paginated” (for my screen), not scrolling.I’m a bit concerned that I might be coming across as picking holes in what you’ve done so far; that’s not my intent. This is a good job, it just doesn’t go as far yet as I think online books can be taken (for sighted readers).You clearly know very well that almost-pathological attention to detail is what proof-reading and typography are all about, and that’s the spirit in which my comments are made, and in which I hope they’ll be taken.It would clearly have been much easier for me to do a project like The Mabinogion if I’d been able to start out with a text as clean as The Dance of Death.Perhaps we can collaborate at some time in the future?

    Reply
  7. Anonymous

    It was rather interesting for me to read the post. Thanx for it. I like such topics and anything connected to them. I would like to read a bit more on that blog soon.

    Reply
  8. Term Papers

    I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information… Regards

    Reply

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