Responsive Ebook Design

Sanders Kleinfeld Twitter: @sandersk

Medium: https://medium.com/@sandersk

What do we mean by responsive design?

“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the

same experience. We can design for an optimal viewing experience, but embed

standards-based technologies into our designs to make them not only more flexible, but more

adaptive to the media that renders them.” !

— Ethan Marcotte “Responsive Web Design”

http://alistapart.com/article/responsive-web-design

Responsive Ebook Design: Four Principles

1. Content is split into pages

(Safari for Mac) (iBooks for Mac)

2. Content reflows from page to page

(iBooks for iPhone) (iBooks for iPad)

3. Content settings are user-configurable

User #1’s settings User #2’s settings

4. Single ebook archive for all platforms

(iBooks) (NOOK)

(Google Play)

(Kobo) (Kindle)*

(Universal Ebook)

* Either converted to MOBI via KindleGen, or submitted to Amazon for conversion

Responsive Ebook Design Toolbox:

CSS Media Queries

Media Queries encapsulate CSS rules to be applied only when certain display

conditions are satisfied, such as: !!

• Screen dimensions fall within a given width/height range

!• Screen is monochrome or color !• Screen orientation is portrait or

landscape

Media Query Syntax* !!

!!@media media-type and (media-feature) {! /* CSS Rules to be applied */!}

* Media queries may contain an optional media type, followed by zero or more media features in parentheses delimited by “and”.

Some Key W3C-Specified Media Types:

!!

• all - applied on any device !• print - applied to output for printers !• speech - applied on screen readers !• screen - applied to any display that is

not print or speech, which encompasses most Web browsers and readers

Kindle’s Custom Media Types*: !!

• amzn-kf8 - applied on any Kindle device or app that supports Amazon’s Kindle Format 8 specification

!• amzn-mobi - applied to Kindle devices or

apps that support only the legacy MOBI 7 format.

* See Chapter 8 of Kindle Publisher Guidelines

Example #1: Kindle’s Recommended Media

Queries for table handling* !

@media amzn-mobi { table.complex { /* Suppress display of complex tables on MOBI and use fallback image instead */ display: none; } } !@media amzn-kf8 { img.table_fallback { /* Suppress display of table fallback images on KF8, which can support complex tables */ display: none; } }

* See Chapter 8 of Kindle Publisher Guidelines

Some Key W3C-Specified Media Features:

!!

• (min-|max-)width - query the width of the current display window. !• (min-|max-)device-width* - query the screen width of the device !• (min-|max-)height - query the height of the current display window !• (min-|max-)device-height* - query the screen height of the device !• orientation - query whether orientation is currently portrait or

landscape !• color - query whether the display is color !• monochrome - query whether the display is monochrome

* Deprecated in Media Queries Level 4

Example #2: Media Query for iBooks for iPad

!

!@media (min-device-width:768px) !and (max-device-width:1024px) {! #usernote::before {! content: “You are reading this on iBooks for iPad";! }!}

iBooks Ereader Detector https://github.com/sandersk/ibooks_ereader_detector

Example #3: Media query to target both

iBooks + KF8-enabled Kindle* !

!@media not amzn-mobi { /* Styling for everything that _is not_ a MOBI 7 platform */ }

* See Liz Castro’s “Media Queries for formatting Poetry on Kindle and EPUB” for real-world applications.

Responsive Ebook Design Toolbox:

CSS Fragmentation

Some Key W3C-Specified Fragmentation Properties:*

!• page-break-before - configure page

breaking rules before specified element(s) !• page-break-after - configure page

breaking rules after specified element(s) !• page-break-inside - configure page

breaking rules within specified element(s)

* CSS Fragmentation Module Level 3 no longer mandates “page-” prefix on these properties, but it’s a good idea to keep them for broad ereader compatibility

page-break- properties accept the following values

• auto - Defer to browser/ereader on pagebreak here (default)

• avoid - Avoid pagebreak here • always - Always pagebreak here • left - Add one or two pagebreaks to

make next page a left page • right - Add one or two pagebreaks to

make next page a right page • inherit - Inherit pagebreak rules from

parent element*

* “page-break” rules are not inherited by default

Example #1: Force pagebreaks before top-level

headings !

!h1 { page-break-before: always }

Example #2: Avoid pagebreaks within figures

!

!figure { page-break-inside: avoid }

Some More Key W3C-Specified Fragmentation Properties:*

!• orphans - specify minimum number of

lines within an element that must be preserved before a page boundary (at bottom of page)

!• widows - specify minimum number of

lines within an element that must be preserved after a page boundary (at top of page)

* Default value is 2 for both properties

Example #3: Require three paragraph lines to

“stay together” at both the bottom and top of pages

p { ! orphans: 3! widows: 3 !}

Responsive Ebook Design: The Next Generation*

* Minimal or nonexistent ereader support as of February 2015

Media Queries Level 4: New Media Features

!!

• overflow-block - query whether display content is paginated (paged) or scrolling (scroll).

!• light-level - query for amount of ambient lighting:

low (dim), appropriate (normal), or high (washed) !• update-frequency - query for screen refresh rate: slow or normal

!• inverted-colors - query whether screen colors are

inverted (e.g., night view on many ereaders)

EPUB Multiple Renditions: Include multiple sets of content assets in

one EPUB archive via rendition: attributes

!• rendition:accessMode - Associate set of assets with method

of communication: auditory, tactile, textual, or visual !• rendition:language - Associate set of assets with specific

language. Takes ISO 639 language code (e.g., “en” for English, “fr” for French)

!• rendition:layout - Associate set of assets with layout

paradigm: reflowable or pre-paginated (fixed layout) !• rendition:media - Associate set of assets with valid media-

query media feature.

Example: A container.xml file for an EPUB 3

with three renditions

<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container" xmlns:rendition="http://www.idpf.org/2013/rendition"> <rootfiles> <rootfile full-path="OEBPS/default.opf" media-type="application/oebps-package+xml"/> <rootfile full-path="OEBPS/monochrome-reflow.opf" media-type="application/oebps-package+xml" rendition:media="monochrome"/> <rootfile full-path="OEBPS/ipad-reflowable.opf" media-type="application/oebps-package+xml" rendition:layout="reflowable" rendition:media="min-device-width:768px"/> </rootfiles> </container>

EPUB Adaptive Layout: Marrying the sophistication of fixed layout

with the principles of responsive design

“Apollo 8" Adaptive Layout EPUB demo by Peter Sorotokin, rendered in Mobile Safari for iPad 3 (left) and iPhone 5S (right). Tutorial and samples available at http://sorotokin.com/adaptive-layout/.

!

Thank You! !

For more, read my article “Responsive

Ebook Design: A Primer”