In a recent blog we provided some background and recommendations for the ‘viewers’ or user interfaces that are available to display Flip Page editions. One of the recommendations was to begin transitioning readers to the HTML5 viewer.

Let’s look at some of the tools and benefits that the HTML5 viewer offers.

BROWSER SUPPORT

"HTML5 is the latest evolution for creating stuff for the web"

As its name suggests HTML5 is the fifth and current standard version of the mark-up language used to create web content. Simply put – it is the latest evolution for creating stuff for the web. Flip Page editions displayed using the HTML5 viewer are supported on recent versions of all of the major browsers. No additional need for plugins or browser add-ons.

CONSISTENCY

When we suggest that there are different interfaces for viewing Flip Page content realistically we are saying that there are different interfaces for viewing on desktop. On a phone or tablet all readers are fed the HTML5 viewer. By selecting the HTML5 viewer for desktop you are creating a consistent, unified experience for readers between desktop and mobile.

"consistent, unified experience for readers between desktop and mobile"

RESPONSIVE DESIGN

The HTML5 viewer uses overlay toolbars and menus to create an enhanced page view which scales to the full size of the display. Touch devices respond to intuitive commands such as swipe and tap for navigation and menu display.

INTERACTIVE TUTORIAL

 The HTML5 viewer offers an interactive tutorial for new visitors

The HTML5 viewer offers an interactive tutorial for new visitors

The HTML5 viewer offers an interactive tutorial for first time visitors which launches when a reader accesses Flip Page content. The tutorial emphasizes tools and features that can be used to improve the reading experience. Returning visitors can skip the tutorial prompt and dive into the publication.

LAUNCHPAD

The Launchpad menu, represented by three horizontal lines in the main toolbar, allows users to jump between traditional page view and a re-envisioned ‘LiLypad’ view. Launchpad also offers the capability of linking to other digital properties such as websites, Twitter/Facebook/YouTube accounts, blogs, and so on. And finally, Launchpad provides a detailed list of advertisers within a publication, which when clicked, drive a reader directly to the advertisers page.

LiLy ARTICLES

Never zoom again. LiLy provides publishers with the ability to create engaging articles through a variety of enhancements such as text formatting, image and video embedding, and hyperlinking which can be read easily on any device.

 LiLy enhanced articles with LiLyPAD interface offer unparalleled reading experience.

LiLy enhanced articles with LiLyPAD interface offer unparalleled reading experience.

LiLyPAD

How are all of those LiLy Articles organized within a Flip Page edition? In traditional page view each article can be accessed by clicking on an article title.

"articles are displayed within a ‘contents’ hub for instant access"

LiLyPAD offers readers a re-envisioned display of articles. With LiLyPAD all articles are displayed within a ‘contents’ hub for instant access. Archives can also be reached with a tap or click. (Provide links to one of each style).

For retail type publications such as circulars or catalogues LiLyPAD re-organizes rollover content into a scrollable list of products. Each product within the list can be shared, added to a wishlist, or clicked for a detailed product information page.

WCAG 2.0 COMPLIANCY

The HTML5 viewer, when complemented with LiLy enhanced articles meets WCAG 2.0 AA standards. This means that readers with accessibility issues such as visual or cognitive impairments are able to use assistive devices to read Flip Page editions when distributed via the HTML5 viewer.

SAME TOOLS

The HTML viewer offers a nearly identical toolset when compared to it’s predecessors. Same tools. Same features. Evolved interface.

There is more to the HTML5 viewer than we can describe within a reasonable length in a blog. Watch these video’s to see the HTML5 viewer in action.