Hopefully you all read Sanders Kleinfeld’s great writeup about O’Reilly’s move to EPUB 3, and the changes and challenges that brings. Along with updating our toolchain, we also revisited our EPUB design and took a stab at improving the user experience. While most of the updates aren’t necessarily very visually exciting or seemingly worth a lot of fanfare, I thought this would be a good opportunity to give some background into the reasoning behind the design choices I made, and some of the limitations we still face, even with the advent of EPUB 3.
First, some background. A print page is generally fairly clean and distraction free. The printed page runs all the way to the edge of the “device” (e.g., the book), like an infinity pool, and everything on the page has been designed by the content publisher, right down to where the page numbers show up and how they look. In contrast, the digital “page” is framed by the bevel of the device it is displayed on and any buttons there, and then often on top of the content itself you’ll get navigational elements and other extras that have been added by the device maker in an effort to improve the digital reading experience, and that are totally outside the content publisher’s ability to design. Every additional thing on or around the screen is a potential obstacle coming between the reader and an understanding of – or immersion in – the information.
My goal with this latest CSS update was to simplify, and eliminate some of the competing visual distractions for the reader. Let the information flow, and let readers “breathe” mentally – give their brains the space to digest the information.
Here’s a visual overview of some of the changes. (Click for a larger view.)
White space is key in accomplishing this simplification; it leads the reader through the information, and creates visual pauses for the reader to take that mental breath. Mark Boulton wrote a really nice article for A List Apart about the importance of white space in web design, and ebooks are no exception.
Unfortunately we still don’t have complete control. Even though EPUB 3 includes full HTML and CSS support in the spec, the different eReading devices offer much more limited support for CSS styles, especially for things like margins, and very few of these devices honor publisher specifications around line heights and character spacing. The reason behind this lack of support is in the reader control offered by the devices: readers can control font size, margins, and other basic aspects of the text, so why let publishers also define those traits within a book? It’s part of the trade off, but we should do our best to make our text beautiful in spite of these limitations, instead of simply throwing our hands up in the air. (I actually did set a line-height on our books, even though in my tests across devices, only the iPad appeared to honor it.)*
In addition to adding whitespace throughout the content, I toned down the borders around the various supplemental elements like sidebars, notes, and images. They’re there but subtle, so there’s still a division, but it’s not glaring or overpowering. I also added a background screen to sidebars, to help keep readers oriented within the book even if the sidebar splits across multiple pages (“The background of this text is gray, so I know I’m still reading something that is set aside from the main text flow.”). I want people to know where they are, and to feel comfortable there.
There are still things that we can’t do anything about (for example, widows and orphans, which to me are especially annoying within section headings), but this is a step forward, and for the majority of our content, these small changes will create a better digital reading experience. The adventure shall continue as eReading device support for styling improves, and as our content moves more towards the multimedia experiences made possible with EPUB 3.
* I feel I should note that I don’t resent this passage of control from publishers to readers – it certainly opens the door to a more comfortable and individualized reading experience, especially for those with poor eyesight, etc. I do think that there’s probably a better balance to be found between supporting beautifully crafted designs and still allowing reader control, and I’m hopeful that we’ll see more progression towards this in the near future.