Responsive design is an essential component of modern web development, ensuring content is optimized for both desktop and mobile/tablet screens. But is it possible to do the same for ebooks, and make great-looking files that render well on a diversity of ereader platforms?
This presentation introduces four principles of responsive design for ebooks, and provides tips and techniques for authoring CSS for universal ebook files (with a focus on iBooks and Kindle), including media queries and pagebreaking. It also covers next-generation responsive-design technologies such as Multiple Renditions and Adaptive Layout.
For more detailed analysis and instruction on these topics, see my article, "Responsive Ebook Design: A Primer", https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219.
3. “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
5. 1. Content is split into pages
(Safari for Mac) (iBooks for Mac)
6. 2. Content reflows from page to page
(iBooks for iPhone) (iBooks for iPad)
7. 3. Content settings are user-configurable
User #1’s settings User #2’s settings
8. 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
10. 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
11. 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”.
12. 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
13. 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
14. 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
15. 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
16. 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";!
}!
}
18. 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.
20. 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
21. 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
24. 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
25. Example #3:
Require three paragraph lines to
“stay together” at both the
bottom and top of pages
p { !
orphans: 3!
widows: 3 !
}
27. 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)
28. 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.
29. 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>
30. 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/.