Designing an eBook

I've been playing with Apple's tools for iPhone web apps -- basically some documentation, sample HTML, sample CSS, and some javascript. My sample project is an ebook -- not an ebook reader, as I don't have a whole closet full of content to load into it; just a single ebook.

Project Gutenberg has tens of thousands of books that volunteers have scanned, entered manually, and uploaded. These are available without many restrictions; for most purposes you're welcome to them. I wanted to experiment with longer texts, so I started with Jules Verne's Five Weeks in a Balloon.

The first thing I try to think about in a design project is "typical use" -- that is, if somebody using the thing will usually be standing on one leg and whistling, that's what I try visualize. In this case, if you're really going to read a whole novel on the iPhone, most of what you want is just the text. Not, for example, interface elements taking up space on the display.

The next thing you want is the ability to move forward in the text. Whether you're turning a page, clicking a "next" button, or turning a page, reading is primarily a dynamic process moving in one direction through a book or text. While my initial thought was that a "back to top" button was going to be needed, I realized that really you very seldom go "back to the beginning" when you're reading.

Another question was when to load the text. Five Weeks in a Balloon [iPhone link] is a long book, and if it's all on one page, it's a big page. Slow to load. On the other hand, once it's loaded you're done. And in the US, with our uneven cell coverage, I think it's to consider the case where the user starts reading somewhere with a good connection, then continues somewhere else without a connection at all.

The decisions I made all ended up leading me toward a very minimalist design. My version of Five Weeks in a Balloon has no additional UI beyond internal links (TOC to chapters) and browser UI (scrolling and Back). The CSS tweaks the iPhone browser UI to eliminate zooming and sideways scrolling; all you do is scroll down through a very long page. Almost as if you were reading it!

I've gone on to add some minimal graphics to the title page, and an icon, should you want to install the page on your home screen. Other than that, all my tests of tapping from one page to another, one chapter to another, javascript functions emulating page turning, all of that -- I've discarded.

The one thing I'd still like to add -- although it's difficult now that I've minimized away all the non-browser UI -- is some mechanism for remembering where you left off reading. Remembering across browser sessions, I mean.

There are other iPhone ebook web apps that have made different design choices. iDickens [iPhone link] is one, like mine, that's just a single text, but uses a chapter-oriented UI. ScrollBox [iPhone link] and Textonphone [iPhone link] are more like ebook readers that you load content into. I've also added two more texts: the (even longer) Life on the Mississippi [iPhone link] by Mark Twain, and Dorothy and the Wizard in Oz [iPhone link].

By the way...the links with the [iPhone link] notation will probably open in any browser, but may not look or work as well as when they're opened on an iPhone.