Creating Interactive HTML Content

  • CRM Desktop (Mac, Windows)
  • iPad
  • iPhone

HTML5 provides a rich set of tools for creating interactive media for users. In general, anything that can be done in Flash can be replicated in HTML5. Some simple suggestions for adding interactivity to otherwise static media include:

  • Create an HTML button linked to an online resource, such as a patient information site
  • Use motion to visually guide the viewer to key pieces of information, such as efficacy results, rather than animating background or secondary information
  • Provide interactions which meaningfully customize the message for an HCP, such as filtering data by demographic or zip code
  • Add audio narration of important aspects of content
  • For videos also available on YouTube, embed a local copy of the video and display it within a frame or open it full screen via a button, so it is always available regardless of 3G coverage. The YouTube URL can be referenced as a hyperlink.
  • Link to or embed (using a frame) external systems, such as a send additional info mini-website or a subscribe to mailing list web-form

Some considerations when creating HTML5 media:

  • HTML5 speed: HTML5 documents in CLM render faster than loading from a remote website but slower than loading from the browser’s cache. Testing all content in CLM is recommended.
  • JavaScript speed: The JavaScript execution speed of Safari on the iPad is less than 10% of the speed on a desktop computer. Complex animations that render smoothly on a computer may appear to stutter on the iPad. Using subtler or slower animations reduces the visibility of these performance limitations.
  • Navigation: The Veeva CRM app handles transitioning to the next piece of media via a swipe to the left. Internal navigation should be limited so users don’t lose their place when swiping left and right through media. Each slide should be created as a separate piece of media.
  • Zooming: This can be disabled on iPad using <meta name=viewport content=width=device-width,initial-scale=1,user-scalable=no /> as part of the HTML. See Apple’s developer documentation for more information.

HTML5 media can be tested by loading it into a website and viewing the website from iPad’s Safari browser or Windows’ IE browser. Various HTML editor applications can provide more accurate representations of how content displays. These tools are a good proxy for how content displays in Veeva, with the following exceptions:

  • Page loading times are slightly faster than loading from a website, but significantly slower than loading from the browser cache. If the initial page load creates any flashes or wait time, smaller media files or different background colors are recommended.
  • The top left corner of the page (60 x 176 pixels) is obscured by navigation controls, so interactive media should not be placed there

In order to increase interactive options and dynamic content within HTML5 media, Veeva provides several API functions that can be embedded within HTML5 slides. See the CLM JavaScript library for more information on the available functions.