2. From Device to Device:
Adaptive Interfaces for Content
Toby Plewak, Client Strategist
toby.plewak@publishingtechnology.com
3.
4.
5.
6.
7.
8.
9.
10.
11. What is Responsive Web Design?
Maintain one website that serves all devices
Based on fluid, grid layouts
Layouts that adapt to fit whatever screen size
they render on
12. What are the advantages of RWD?
Maintain one website that serves all devices and
screen sizes
Provide complete support for (almost) all website
pages and features, regardless of device or
screen size.
Implement changes across all devices
13. How does Responsive Web Design work?
Made possible by new capabilities in
CSS3, which are supported by most desktop
browsers and all mobile browsers
Grid layout
Flexible images
Media queries
New concept: Breakpoints
28. From Device to Device:
Adaptive Interfaces for
Content
Jean Kaplansky
Digital Content Solution Architect
jean.kaplansky@aptaracorp.com
NISO Webinar, January 8, 2014
29. Agenda
Review – Responsive Web Design
Discuss – Adaptive Design in General
Discuss – Progressive Enhancement Maturity Model
Review – eBook File Formats and Vendors
Walkthrough – Progressive Enhancement for eBooks
Consider – To Fixed Layout, or not?
Progressive Enhancement for eBooks: Going from Point A to Point B
Takeaways
30. Responsive Web Design
Media Queries
Fluid Grid
Flexible Images
http://www.abookapart.com/products/responsive-web-design
http://alistapart.com/article/responsive-web-design
34. The eBook World – Reading Systems
Adobe Digital Editions – desktop
Amazon Kindle – eInk, tablets, iOS, Android, desktop, cloud reader
Apple iBooks (universal, iPhone, iPod, iPad, OS X Mavericks)
CourseSmart – Android, iOS, desktop web browsers
Google Play Books – Android, iOS, desktop web browsers
Inkling – iPhone, iPad, Chrome web browser
35. The eBook World – Reading Systems, continued
Kobo – eInk, Tablets, Android and iOS apps, cloud reader
Nook Media – eInk, Tablets, Android and iOS apps, Windows 8 app
Readium – Chrome Browser
Sony Reader – Android, iOS, Windows, Mac
Vital Source Bookshelf – iOS, Android, desktop browsers
36. Goal: Progressive Enhancement for eBooks
One reflowable EPUB for all vendors is possible.
Starting from the simplest form and working up from there.
Responsive?
– Fluid Grid
– Flexible Images
– Media Queries
37. But first… A few words about
fixed layout eBooks
To produce fixed layout or reflowable texts? This is THE question.
38. To Fixed Layout?
Fixed layout is always appropriate for:
Children’s picture books
Manga, Comics, and graphic novels
Illustrated titles requiring print replication to preserve EXTREME design
– Illustrated Textbooks
– “Coffee table” art books
– Gift books
– Cookery
45. …or NOT to Fixed Layout?
Reasons to consider reflowable text:
Fixed layout may limit distribution options.
Fixed layout may interfere with device and reading system (app) user
features
– Font and font size
– Space between lines
– Margins
– 1-up or 2-up (may be based on orientation)
– Live text searching
– Annotations
– Accessibility
46. Reasons to consider reflowable text, continued.
Pinch and zoom is a painful user experience for text heavy publications.
More cost effective than fixed layout.
Easier to produce, thus accommodates tight production schedules.
48. But… What about my tables? And my high res images?
Welcome to the world of Responsive Web Design!
Tables may require review to establish whether the content really is best
presented as a table.
Images – both high and low resolution contribute to the overall “payload”
of an eBook.
Have you done everything you can to facilitate accessibility?
51. Going From Point A to Point E
A. Plan content structural semantics (HTML5)
– HTML5 provides built-in accessibility.
– HTML5 easily adjusts and adapts as the basis of most eBook file
formats.
B. List all target devices and reading system apps
– Collect vendor specifications, guidelines, and examples.
– Lay hands on each device required. Emulators aren’t good enough.
C. Plan approach to CSS
– Follow CSS best practices wherever possible
– Consider using a preprocessor (e.g., Sass - http://sass-lang.com/)
52. Going From Point A to Point E, continued.
D. Build EPUB files
– Remember to use EPUB metadata wherever possible
– Apply semantic inflection through the EPUB Structural Semantics
epub:type values.
E. Test, adjust, test again, wash rinse repeat.
53. Plan content structural semantics (HTML5)
Content Architecture
What objects are in your content?
How will you map and convert existing content to your new HTML5
architecture?
54. Content Architecture Example: Sidebar
<aside epub:type="sidebar" class="sidebar" id="ch03sb002">
<header>
<h1 id="ch03sb002.title" class="title" epub:type="title">
<span class="label">A Teacher’s Voice: </span>
Creating Classroom Community</h1>
</header>
<p>Creating a classroom community is an important part of what I
do. Each year the mix of children-their strengths, needs, and
personalities, is different. I want children to learn to value
their classmates for who they are. I want them to be respectful
and kind and realize that every person has something to offer.
As the group forms over the course of the year, and we work through
accepting the “hard to like” ones and appreciating ourselves and
each other for our strengths and challenges, I find great joy in
the moments when children reach out to each other, share, encourage
and collaborate, or defend a classmate.</p>
</aside>
http://www.idpf.org/epub/profiles/edu/EDUPUBContentModel/ContentModel.html#sidebar
55. Content Architecture Example: Figure
<figure class="figure">
<img src="images/ch02fig03test.png" alt="Two neurons figure"/>
<figcaption>
<header>
<h1 class="title" epub:type="title">
<span class="label">Figure</span>
<span class="number">2.3 </span>Two neurons,
an astrocyte, and their interconnections</h1>
</header>
<div class="caption">
<p>This is the caption text</p>
</div>
<div class="source">
<p><span class="label">Source: </span>This is the
source text
</p>
</div>
</figcaption>
</figure>
http://www.idpf.org/epub/profiles/edu/EDUPUBContentModel/ContentModel.html#figure
56. List all target devices and reading system apps
Mobile First!
Don’t forget cross platform apps
57. Plan Approach to CSS
Document
Defaults
Cascade
Common
Generic
Selectors
Device and
App Specific
Selectors
and
Overrides
58. Build EPUB Files
Potential Development Tools
– oXygen XML
•
http://oxygenxml.com
– Bluegriffon EPUB Edition
•
http://www.bluegriffon-epubedition.com/BGEE.html
– Text Editors
– HTML IDE’s
– CSS Editors
66. Takeaways…
Approaching eBook production with a mind toward Progressive
Enhancement is possible – but your mileage will vary.
Carefully consider the pros and cons before deciding to produce fixed
layout publications over reflowable titles.
Get your hands on the target devices. Emulators are not as reliable as
the devices themselves.
There’s a very good reason to use the new semantic markup in HTML5
The Open Web Platform enables the eBook Progressive Enhancement
Maturity Model.
Good things come to those who PLAN.
67. Looking for a Semantic Content Model for your eBooks?
69. NISO Webinar:
Device to Device: Adaptive Interfaces for Content
Questions?
All questions will be posted with presenter answers on
the NISO website following the webinar:
http://www.niso.org/news/events/2014/webinars/device/
NISO Webinar • January 8, 2014
70. THANK YOU
Thank you for joining us today.
Please take a moment to fill out the brief online survey.
We look forward to hearing from you!
Notes de l'éditeur
Progressive Enhancement vs. Graceful DegradationMobile FirstResponsive Design
Which one of these is not like the others?
It is always easier to add than to take away.It’s not about sticking to “responsive” or “elastic” designs. With this many devices and apps, you do what works across the board.
Compare – is it a bug? Is it supposed to be that way? Did we do something wrong?