Showcase Workshop HTML Zip File
The file's contents will be loaded within the custom browser container within the Showcase App. User experience is therefore seamless and appears to be a natural extension of the App.
At present, HTML .zips work on the Showcase iOS, Android, Windows, and Chrome Apps.
The only required file is
index.htmlat the root of the .zip file. The custom browser container will initialize with this file.
The file name of the zip must end in
.html.zipto be recognized by Showcase Workshop.
HTML .zips can only be previewed in one of the apps (iOS, Android, Windows, or the Chrome App), once the content is correctly linked and the showcase is published. The website won't show .zips via Preview or the Showcases tab, even if the HTML .zip has been correctly linked and published.
If your application needs to use the Showcase data API, it must include
If subfolders are included in your web content, references to content must use relative paths (e.g.
As with showcase menu screens, active fields or buttons should be kept away from the ‘dead zones’ of the top left, top right and bottom left corner.
The orientation of the .zip’s appearance needs to be consistent with the orientation of the showcase – e.g., an HTML page cannot appear portrait within a landscape showcase, and vice versa.
How to author HTML .zips for Showcase
Put as much layup and graphics into the background png as possible (i.e. create all visual elements in Photoshop, Illustrator or InDesign.)
Use animation sparingly.
Use only minimal lightweight frameworks such as: JQuery, Underscore, numeral.js, velocity, bootstrap js (don't rely on CSS classes from bootstrap, as they are not based on VW units!).
As the supported apps are for iOS, Android, Chrome, and Windows, any HTML you author is effectively running in Mobile Safari, Android Webview, Chrome and IE 11.
Test everything on:
- Mobile Safari
- Internet Explorer 11
Make a Zip in Linux or macOS
Sample command line syntax (assuming
index.html in it):
cd html-zip/sample-basic-layout zip -r ../sample-basic-layout.html.zip *
Putting the HTML .zip into Showcase
Your HTML .zip file, once saved correctly with the extension
.html.zip, needs to be uploaded into the Showcase
Workshop File Library.
To embed an HTML .zip file into a Showcase, choose the hotspot which will contain the web content, then set the target
content type to be Document, then choose the
.html.zip file as the target document.
Remember, HTML .zips can only be previewed in one of the apps (iOS, Android, Windows, or the Chrome App), once the content is correctly linked and the showcase is published. The website won't show .zips via Preview or the Showcases tab, even if the HTML .zip has been correctly linked and published.
For assistance with any of the above, hit up email@example.com.