April 2, 2014 Last Updated 8:10 am

Wednesday column: HTML5 versus native implementation for all publishing platforms

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.

For 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.

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.

T3-expand-580

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.

ChicagoTribune_radio_2-580

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.

Comments are closed.