Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for Content

NISO Webinar: Device to Device:

Adaptive Interfaces for Content

January 8, 2014

Speakers:

Toby Plewak - Client Strategist, Publishing Technology

Jean Kaplansky - Digital Content Solutions Architect, Aptara

http://www.niso.org/news/events/2014/webinars/device/

From Device to Device: Adaptive Interfaces for Content

Toby Plewak, Client Strategisttoby.plewak@publishingtechnology.com

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

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

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

Responsive web design is about designing SYSTEMS, and not PAGES

…but isn’t this just the latest trend?

Thank You!

Toby Plewak, Client Strategisttoby.plewak@publishingtechnology.com

From Device to Device: Adaptive Interfaces for Content

Jean KaplanskyDigital Content Solution Architectjean.kaplansky@aptaracorp.com

NISO Webinar, January 8, 2014

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

Responsive Web Design

Media Queries Fluid Grid Flexible Images

http://alistapart.com/article/responsive-web-design

http://www.abookapart.com/products/responsive-web-design

Adaptive Design

http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php

Progressive Enhancement Maturity Model

The eBook World – File Formats

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

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

The eBook World – Reading Systems, continued

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

But first… A few words about fixed layout eBooks

To produce fixed layout or reflowable texts? This is THE question.

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

Children’s Picture Books

Manga, Comics, Graphic Novels

Illustrated Textbook

“Coffee table” art book

Gift Book

Cookery

…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

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.

Reflowable Text Doesn’t Have to be Ugly!

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?

Responsive Tables in eBooks

Responsive Tables in eBooks

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/)

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.

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?

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, andpersonalities, is different. I want children to learn to valuetheir classmates for who they are. I want them to be respectfuland kind and realize that every person has something to offer.As the group forms over the course of the year, and we work throughaccepting the “hard to like” ones and appreciating ourselves andeach other for our strengths and challenges, I find great joy in the moments when children reach out to each other, share, encourageand collaborate, or defend a classmate.</p>

</aside>

http://www.idpf.org/epub/profiles/edu/EDUPUBContentModel/ContentModel.html#sidebar

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

List all target devices and reading system apps

Mobile First!

Don’t forget cross platform apps

Plan Approach to CSS

Document Defaults

Device and App

Specific Selectors

and Overrides

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

Test, Adjust, Test Again, Wash Rinse Repeat…

Load file

Review file

Screenshots

Compare

Adjust

×22

Discovery 1: Rounded Corners Not Supported Across the Board…

Discovery 1: Rounded Corners Not Supported Across the Board…

Discovery 2: List Types – Your Mileage WILL Vary

Discovery 2: List Types – Your Mileage WILL Vary

Discovery 3: Images… Are more flexible than expected

Discovery 4: MathML… The fallbacks continue

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.

Looking for a Semantic Content Model for your eBooks?

Consider EDUPUB, an IDPF Member submission of a content profile suitable for educational content

http://www.idpf.org/epub/profiles/edu/EDUPUBContentModel/ContentModel.html

http://www.idpf.org/epub/profiles/edu/EDUPUBBaselineSpec/EDUPUBBaselineSpec.html

Jean KaplanskyDigital Content

Solutions Architect

@JeanKaplansky

jean.kaplansky@aptaracorp.com

www.aptaracorp.com

NISO Webinar • January 8, 2014

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: Device to Device: Adaptive Interfaces for Content

Thank you for joining us today. Please take a moment to fill out the brief online survey.

We look forward to hearing from you!

THANK YOU