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

2,016 views

Published on

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,016
On SlideShare
0
From Embeds
0
Number of Embeds
493
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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?
  • Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for Content

    1. 1. http://www.niso.org/news/events/2014/webinars/device/ 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
    2. 2. From Device to Device: Adaptive Interfaces for Content Toby Plewak, Client Strategist toby.plewak@publishingtechnology.com
    3. 3. 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
    4. 4. 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
    5. 5. 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
    6. 6. Responsive web design is about designing SYSTEMS, and not PAGES
    7. 7. …but isn’t this just the latest trend?
    8. 8. Thank You! Toby Plewak, Client Strategist toby.plewak@publishingtechnology.com
    9. 9. From Device to Device: Adaptive Interfaces for Content Jean Kaplansky Digital Content Solution Architect jean.kaplansky@aptaracorp.com NISO Webinar, January 8, 2014
    10. 10. 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
    11. 11. Responsive Web Design  Media Queries  Fluid Grid  Flexible Images http://www.abookapart.com/products/responsive-web-design http://alistapart.com/article/responsive-web-design
    12. 12. http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php
    13. 13. Progressive Enhancement Maturity Model
    14. 14. The eBook World – File Formats
    15. 15. 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
    16. 16. 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
    17. 17. 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
    18. 18. But first… A few words about fixed layout eBooks To produce fixed layout or reflowable texts? This is THE question.
    19. 19. 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
    20. 20. Children’s Picture Books
    21. 21. Manga, Comics, Graphic Novels
    22. 22. Illustrated Textbook
    23. 23. “Coffee table” art book
    24. 24. Gift Book
    25. 25. Cookery
    26. 26. …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
    27. 27. 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.
    28. 28. Reflowable Text Doesn’t Have to be Ugly!
    29. 29. 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?
    30. 30. Responsive Tables in eBooks
    31. 31. Responsive Tables in eBooks
    32. 32. 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/)
    33. 33. 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.
    34. 34. 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?
    35. 35. 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
    36. 36. 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
    37. 37. List all target devices and reading system apps  Mobile First!  Don’t forget cross platform apps
    38. 38. Plan Approach to CSS Document Defaults Cascade Common Generic Selectors Device and App Specific Selectors and Overrides
    39. 39. 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
    40. 40. Test, Adjust, Test Again, Wash Rinse Repeat…  Load file  Review file  Screenshots  Compare  Adjust
    41. 41. Discovery 1: Rounded Corners Not Supported Across the Board…
    42. 42. Discovery 1: Rounded Corners Not Supported Across the Board…
    43. 43. Discovery 2: List Types – Your Mileage WILL Vary
    44. 44. Discovery 2: List Types – Your Mileage WILL Vary
    45. 45. Discovery 3: Images… Are more flexible than expected
    46. 46. Discovery 4: MathML… The fallbacks continue
    47. 47. 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.
    48. 48. Looking for a Semantic Content Model for your eBooks?
    49. 49. Jean Kaplansky Digital Content Solutions Architect @JeanKaplansky jean.kaplansky@aptaracorp.com www.aptaracorp.com
    50. 50. 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
    51. 51. 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!

    ×