Last Updated 2:12 pm

TALKING NEW MEDIA Technology, Tools of the Trade

April 2, 2014

About TNM TNM eBookstore Tablet Publishing Advertise Contact SEARCH

F

Each Wednesday, Talking New Media invites digital publishing leaders to discuss industry topics involving digital

publishing. This week’s column is authored by Gayle Moss on PressReader’s use of HTML5, JavaScript and CSS3.

or many years, newspaper and magazine editors and designers have used complex software applications to help them lay

out every page of each newspaper or magazine issue. But even with sophisticated technology, laying out content for a

static product is not a fully automated process.

Manual alterations need to be made to font types, sizes, formats, colors, images, and even the text itself, to optimize page

space and create an appealing presentation for the reader.

At the end of all that effort, there exists high-value content worthy of a paywall, but it still can’t be read in a convenient or

engaging way on most mobile devices, particularly smartphones, where more and more users are accessing news.

The Publisher’s Dilemma

This leaves publishers with a fundamental problem – they have a huge “Serviceable Addressable Market” (SAM), with no

affordable way to actually serve it.

Wednesday column: HTML5versus native implementation forall publishing platformsby Gayle Moss / Published today /

SHARE THIS

Facebook

0 Tweet

PressReader decided to solve the publishers’ dilemma by developing an intelligent content presentation engine that could

automatically adapt, without any human intervention, to whatever content it received and display it on any device, with any

size of screen, operating system or browser, in a format that would offer users the most engaging and interactive reading

experience.

But how?

PressReader knew that HTML 3.2 was not capable of supporting the level of development needed to build a truly cross-

platform solution. Only the very latest technologies that make up HTML5 could help it achieve such a challenging

undertaking.

So after evaluating the risks and rewards, the company decided that instead of waiting for HTML5 to mature, it would develop

the new product in parallel with HTML5’s evolution.

The result was a new HTML5-powered PressReader.com, an aggregated newspaper and magazine portal with SmartFlow

technology. This high performance, 100 percent cross-platform presentation engine adapts the layout of content on-the-fly

as readers interact with it.

Giving Readers What they Want

By analyzing the reading behavior of subscribers for more than a decade using the company’s Reading Map technology,

PressReader knew that the replica view was still the preferred reading paradigm for many of its customers.

Displaying full pages of magazines and newspapers well on desktops and tablets wasn’t the problem; PressReader has been

doing that for years with its proprietary PDF-to-XML Processing engine. However, smartphones aren’t suited for full page

reading due to limited screen real estate.

So to give all readers what they want, PressReader set out to build a presentation solution that served the needs of multiple

audiences – a digitally-enhanced page view for replica lovers and a more fluid, streaming view of articles, SmartFlow, for

“digital natives” and news consumers using small screen devices.

Responsive Web Design

PressReader’s vision for PressReader.com and SmartFlow was to make it intelligent, adaptable and seamless for the reader to

interact with the content— regardless of platform or browser.

In most digital editions, if a user wants to read an article that spans more than one page in the publication, the navigation

engine will jump to the page where the article continues – a disruptive user interface that mimics what happens with printed

editions.

With SmartFlow, PressReader’s goal was to minimize the jumping around and disruption to the reader by animating a

horizontal stream of content and enabling articles that spanned pages to “expand in place”, when tapped or clicked by the

user. This required SmartFlow to adjust not only the article’s layout, but all content around it to make room for the extra text

and images.

PressReader also decided to redesign its on-demand audio capability in HTML5 and integrate it with SmartFlow. This feature

allows readers to tap or click on content and have it automatically read to them. During the playing of the audio, the user is

presented with a horizontal stream of pages, articles and images related to the content being read.

Building a responsive layout and presentation engine was not without its challenges.

To make it even possible, PressReader needed to start by using all the latest programming elements inside HTML5, including

the newest version of JavaScript and CSS3.

It also needed to use transitions for animations, which allow property changes in CSS values to occur smoothly over a

specified duration, and many other active elements such as context menus and interactive user features for commenting,

voting, sharing and instant translation.

From Browsers to Hybrid Apps

Once SmartFlow was built for the web browser, PressReader needed to integrate it with its native applications on all mobile

devices to reduce development costs and achieve faster time to market. This concept was especially crucial for device

manufacturers who frequently release new devices or update their operating systems and browsers.

These native/HTML5 hybrid applications would be downloadable from app stores and support the full replica view of

newspapers and magazines for desktops and tablets. But once an article or publication was opened in SmartFlow, the content

would be laid out based on screen real estate and presented to readers using HTML5, making the apps well suited for

smartphones.

The problem was that although much of the PressReader.com HTML5 code was transferrable to the native apps, it was not

100 percent. There was still platform-specific development required because the devices were so different in terms of

hardware capabilities, HTML5 implementations and versions of JavaScript and CSS. So inside the general HTML5 code,

unique software branches were developed for a variety of platforms.

Performance was also a big challenge. With CSS3 transitions, the animation is actually performed on the device’s graphics

card using hardware acceleration. Unfortunately, hardware acceleration didn’t always work due to environmental

incompatibilities. So PressReader’s applications needed to be smart enough to understand when hardware acceleration

wasn’t performing properly, turn it off and switch over to its JavaScript rendering engine, all at runtime.

The same was true for many other platform-dependent capabilities, which is why PressReader’s core software includes a

comprehensive set of JavaScript libraries that detect and adapt to device limitations, emulating functions in software as

required to ensure all PressReader features are supported across all devices.

Lessons Learned

The learning curve for Responsive Design is high – both in terms of the uniqueness and complexities of the hardware

technology involved and the ever-evolving state of the HTML5 technologies.

Throughout the development lifecycle, PressReader discovered that HTML5 does speed up development when compared to

building native implementations for every single platform, but it doesn’t reduce time to market as much as expected.

Quality Assurance in cross-platform design projects also has a major impact on the software development lifecycle due to

the degree of manual testing that is needed on every mobile device. Emulators and desktop tools or scripts can only test so

much and are not reliable.

To address these issues, PressReader instituted a “continuous integration” approach to development, removing the

separation between the testing team and programmers. Once a software component is developed, there is a parallel path for

people to test it.

Development, testing and integration now overlap, reducing the time it takes to release new versions of PressReader.com or

any of the company’s iOS, Android, Android for Amazon, BlackBerry and Windows 8 PressReader apps, including the branded

apps it develops for more than 1,000 of its publishing partners.

Conclusion

PressReader took a risk on HTML5 at a time when the industry was wondering if it was ever going to be ready for prime time.

In hindsight, was it worth it?

“HTML5 is not perfect; it’s far from perfect. But it was the right solution for us and our publishing partners who need to offer

their content to readers in the most engaging way possible on whatever platform they choose to use,” said Alex Kroogman,

CEO of PressReader. “HTML5 is getting better all the time as the standard matures. Devices today are powerful enough to run

all the logic we’ve created, making PressReader.com and all our applications more portable and more robust.”

Gayle Moss is a freelance writer with over 25 years working in the technology, digital publishing, golf and

telecommunications industries. Her articles have been published in a number of trade and consumer publications including

Internet Telephony, iPhone Life, InsideGolf, Newspapers and Technology and Production Journal.

Discuss

Your Name...

Your E-mail Address...

Post

Your Website...

Share your thoughts...

Recent Posts

Imagine Publishing launches tablet-only magazine for beginning Photoshop users, Photoshop 123

Wednesday column: HTML5 versus native implementation for all publishing platforms

Amazon enters the TV set-top box game with Fire TV

Quark announces bundle offer for Creative Pro with upgrade to QuarkXPress 10

Bonnier and Net2TV add Saveur and Cycle World programs, renew Popular Science

Archives

Select Month

Categories

Select Category

Twitter Facebook YouTube RSS FeedsFOLLOW US :

© 2014 TNM DIGITAL MEDIA LLC

ABOUT TNM TNM EBOOKSTORE TABLET PUBLISHING ADVERTISE CONTACT