Creating Interactive HTML Content
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, allowing content creators to develop targeted and dynamic content..
Who can use this feature?
- iPad, iPhone, Windows Users
- Users do not require an additional license
- Content Creator Users, End Users
Creating HTML5 Content as
Content Creator Users
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
HTML5 media can be tested by loading it into a website and viewing the website from iPad’s Safari 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.
Considerations
- 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 Vault 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.
