Since I couldn’t find many specific guidelines for designing the ebook (most materials are mere suggestions for how to provide content to commercial distribution systems such as Amazon that create the ebook for you), I decided to complete some informal user testing. To explore what styles seemed to work from a practical perspective, we surveyed a wide range of commercial ebooks from my collection and EPUB3 examples provided by IDPF. We tested the books on three devices:
- SONY Reader PRS-T1: 6 inch e-ink screen, 600×800 px, grayscale, touch-screen and page turn buttons.
- Nook HD+: 9 inch backlit LED screen, 1920×1280 px, color, capacitive touch-screen and home button.
- Laptop with Readium app: 14 inch backlit LED screen, 1366×768 px, color, mouse. Readium is an open rendering engine designed to improve support for epub3. Currently, the reading app is available as a Chrome browser extension.
We flipped through pages, changed font sizes, and clicked on the table of contents. The two main factors considered were performance (does it quickly and consistently render), readability (is it legible, easy, and pleasant to read), and aesthetics (did it look professional and did we like it?). We did not consider more complex issues such as accessibility. After selecting a few good examples based on our reading experience, I surveyed the markup using Calibre. The built in ebook editor makes it is easy to open up the file to inspect the XHTML and CSS.
I discovered that the markup was a mess! The XHTML is filled with strange overly complex tags, empty elements, and meaningless attributes. Some EPUBs generated from Adobe InDesign put almost the entire book in span tags. It turns out publishers’ workflows are still based on creating the traditional fixed layout text, then exporting ebook derivatives (often outsourced or left up to distributors such as Amazon). This technique misses out on the possibilities of efficient content management that focus on separating text and styling. Check out “Publication Standards Part 1: The Fragmented Present,” by Nick Disabato (A List Apart, May 22, 2012) for more discussion of this issue.
Our user testing also pointed out many bad examples of styling, highlighting things to avoid. For example, many books use the <pre> tag to format sections of poetry. Often the lines would be proceeded by tabs and also given a margin in the CSS. This resulted in the text ending up off the screen on the SONY Reader. The designers obviously tested their designs on a larger tablet. We also found differences in the performance of the ebooks. Some took abnormally long to load or looked considerably different on different devices. These short comings made the use of some books a frustrating experience. It emphasizes the need to create an efficient markup and styling that won’t confuse or bog down devices, that falls back to a good base HTML.
We also noticed that a legible cover and properly embedded metadata were important. All the reading apps default to displaying only the cover thumbnail—thus if nothing is on the cover, it complicates finding the book. Many ebooks also had metadata omitted or incorrectly embedded. This meant that they displayed random file names instead. Since the user can’t quickly browse the physical book to extract information (backcover, spine, title page) and get a feel for the contents, the ebook cover and metadata seem to take on greater importance.