0
DBW DIGITAL DESIGN & PRODUCTION CONFERENCE • MONDAY 13, 2014
Beyond Straight Text
Extracts, Lists, Sidebars, and Tables
To...
Who? Managers, devs, ID users
What? EPUB3 / KF8 (thru KP)
Why? Reflowable and flexible
When? 2014 but test often
Where? Ev...
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...
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...
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: f...
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
th...
Questions? colleen.cunningham@fwmedia.com
Find your people on Twitter at #eprdctn
Resources: http://bit.ly/DBW14RESOURCES
...
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Beyond Straight Text [2014]
Upcoming SlideShare
Loading in...5
×

Beyond Straight Text [2014]

166

Published on

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

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
166
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Beyond Straight Text [2014]"

  1. 1. 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
  2. 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. 3. CSS: Use styles for paragraphs, characters, objects HTML: Map to tags ... and open EPUB to add ereader-specific refinement
  4. 4. NO
  5. 5. Our ebook design Our customers’ reading experience Ereader rendering
  6. 6. Semantic markup Graceful degradation Fallbacks Margins Borders Media queries
  7. 7. PLUS: Adobe Digital Editions and Sony PLUS: ReadiumMINUS MOBI: Kindles G1, G2 and Kindle DX
  8. 8. HEY! ☞
  9. 9. Beyond Straight Text Extracts
  10. 10. HEY!☞
  11. 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. 12. Beyond Straight Text Lists
  13. 13. + Kobo Glo
  14. 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. 15. Beyond Straight Text Sidebars
  16. 16. HEY!☞
  17. 17. HEY!☞
  18. 18. desktop app for Mac
  19. 19. desktop app for Mac contrasts better on app for iPad than on desktop app for Mac
  20. 20. app for iPad
  21. 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. 22. Beyond Straight Text Tables
  23. 23. HEY!☞
  24. 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. 25. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×