Beyond Straight Text [2014]
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Beyond Straight Text [2014]



Ebook presentation at the Digital Book World Conference, January 2014.

Ebook presentation at the Digital Book World Conference, January 2014.



Total Views
Views on SlideShare
Embed Views



1 Embed 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Beyond Straight Text [2014] Presentation Transcript

  • 1. DBW DIGITAL DESIGN & PRODUCTION CONFERENCE • MONDAY 13, 2014 Beyond Straight Text Extracts, Lists, Sidebars, and Tables To Download PDF Slides To Download Epub file
  • 2. Who? Managers, devs, ID users What? EPUB3 / KF8 (thru KP) Why? Reflowable and flexible When? 2014 but test often Where? Every vender and ereader
  • 3. CSS: Use styles for paragraphs, characters, objects HTML: Map to tags ... and open EPUB to add ereader-specific refinement
  • 4. NO
  • 5. Our ebook design Our customers’ reading experience Ereader rendering
  • 6. Semantic markup Graceful degradation Fallbacks Margins Borders Media queries
  • 7. PLUS: Adobe Digital Editions and Sony PLUS: ReadiumMINUS MOBI: Kindles G1, G2 and Kindle DX
  • 8. HEY! ☞
  • 9. Beyond Straight Text Extracts
  • 10. HEY!☞
  • 11. 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 Extracts
  • 12. Beyond Straight Text Lists
  • 13. + Kobo Glo
  • 14. 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 Lists
  • 15. Beyond Straight Text Sidebars
  • 16. HEY!☞
  • 17. HEY!☞
  • 18. desktop app for Mac
  • 19. desktop app for Mac contrasts better on app for iPad than on desktop app for Mac
  • 20. app for iPad
  • 21. 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 Sidebars
  • 22. Beyond Straight Text Tables
  • 23. HEY!☞
  • 24. 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 Tables
  • 25. Questions? Find your people on Twitter at #eprdctn Resources: PDF Slides Epub file