DBW DIGITAL DESIGN & PRODUCTION CONFERENCE • MONDAY 13, 2014

Beyond Straight Text

Extracts, Lists, Sidebars, and Tables

To Download PDF Slides http://bit.ly/DBW14SLIDES

To Download Epub file http://bit.ly/DBW14EPUB

Who? Managers, devs, ID users

What? EPUB3 / KF8 (thru KP)

Why? Reflowable and flexible

When? 2014 but test often

Where? Every vender and ereader

CSS: Use styles for paragraphs, characters, objects

HTML: Map to tags

... and open EPUB to add ereader-specific refinement

NO

Our ebook design

Our customers’ reading

experience

Ereader rendering

Semantic markup

Graceful degradation

Fallbacks

Margins

Borders

Media queries

PLUS: Adobe Digital Editions and Sony

PLUS: ReadiumMINUS MOBI: Kindles G1, G2 and Kindle DX

HEY!☞

Beyond Straight Text

Extracts

HEY!☞

What works:Graceful degradation: embedded fonts and device fonts

Fallbacks: font stacks and font size differentiated from main text

Margins: top, bottom, left, right

Borders: render in both regular and night modes

Keep simple:Colors: in case night mode does not override text color with white

Long extracts: make sure font is legible in large amounts

Ext

ract

s

Beyond Straight Text

Lists

+ Kobo Glo

What works:Semantic markup: use <ol>, <ul>, and <li>

Media queries: to fix alignment issue in Kindle Fire HD

Bug Fixes in CSS: to fix nesting and alignment bugs in NookColor and Kobos

Keep simple:Variables: consider hard-coding lists that are other than numerical

Nesting: consider reworking content with lists which contain paragraphs or very long list points which may become thin in narrow screen widths

Margins: avoid trying to perfectly align lists and change default margins

List

s

Beyond Straight Text

Sidebars

HEY!☞

HEY!☞

desktop app for Mac

desktop app for Mac

contrasts better on app for iPad than on desktop app for Mac

app for iPad

What works:Graceful degradation: -webkit prefix works for iBooks and Kindles

Margins: top, bottom, left, right

Borders: for night mode

Media queries: consider setting narrow, floating sidebars to full width with a KF8 media query to account for iPad app and narrow Kindles

Keep simple:Colors: make sure there’s enough contrast between text color and sidebar background to account for various night mode overrides

Scale: An ebook full of narrow, floating sidebars can cause reflow headaches for the reader so best to use sparingly

Sid

ebar

s

Beyond Straight Text

Tables

HEY!☞

What works:Semantic markup: use HTML table tags

Fallbacks: consider placing image of table in text flow with a link to the table as text in the back of the ebook

Borders: help to demarcate background colors like we see in the sidebars

Keep simple:Very wide tables and complex tables: may need to be reworked

Charts: a table- and chart hybrid that needs to be set as an image should be tested for caption legibility, especially on small screen sizes

Tab

les

Questions? colleen.cunningham@fwmedia.com

Find your people on Twitter at #eprdctn

Resources: http://bit.ly/DBW14RESOURCES

PDF Slides http://bit.ly/DBW14SLIDES

Epub file http://bit.ly/DBW14EPUB