Code Corner: Spice Up DPS with HTML Overlays

The typical Adobe DPS app workflow involves having a designer create beautiful, largely static layouts in InDesign, which get packaged up into folios to distribute through Adobe’s publication system. This allows us to produce new content for apps without necessarily needing to submit a new version of the app to stores.

InDesign has some pretty impressive tools for animating, transitioning between and laying out your content, but it assumes you have all your content at the time you’re creating your layouts. If you want to have new content in the app every day, someone is going to need to spend time in InDesign laying it all out and publishing new folios each day.  Then when users use the app, they’re prompted to download the new/updated folios, and then get to wait while they’re updated.

So, is there a way we can keep the content in our DPS app fresh without having to be constantly editing folios, pushing them to Adobe’s server and prompting end-users to update?

HTML Overlays can help solve this problem nicely.  An HTML Overlay is essentially an “iframe” that can take up part or all of device’s screen within a given folio or article. Within the HTML Overlay we can display remote or local HTML with full JavaScript and CSS support.  This allows us to have JavaScript within the app that can pull dynamic content from the web, style it, animate it and display it in such a way that it appears exactly like the content that was built in InDesign.  If the HTML Overlay only covers part of the screen, we can now mix this “live” content in with the static content inside a folio, which is a pretty neat trick.

Some use cases for this:

  • put your company’s blog content inside your app
  • live “top articles of the day” sections in your layouts
  • content from your social media accounts on social media info pages within your app
  • related content from the web, specific to the article your reader is currently looking at
  • the number of “shares” on social media of the article your reader is currently looking at

If you combine HTML Overlay functionality with HTML5 localStorage and the DPS APIs, you can do really fancy things like display different content based on what other folios the user has downloaded, display different content based on which folios the user has read, etc.

Stay tuned for in-depth looks at some of the exciting things we’re currently working on that leverage HTML Overlays, and let us know about awesome stuff you do with them.