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:
Is reflecting light, not transmitting it, and
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.
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 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.
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…