Upload
colleen-cunningham
View
151
Download
1
Embed Size (px)
DESCRIPTION
Ebook presentation at the Digital Book World Conference, January 2014.
Citation preview
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? [email protected]
Find your people on Twitter at #eprdctn
Resources: http://bit.ly/DBW14RESOURCES
PDF Slides http://bit.ly/DBW14SLIDES
Epub file http://bit.ly/DBW14EPUB