- Creation guidelines
- Responsive HTML Content
- Uploading HTML5 content
- Preview thumbnails for the app
- Define preferred devices for your publication
- Preview for various device screen sizes
- Useful links
Creating content in HTML5 requires a new dedicated directory for each separate HTML5 feature or widget e.g. "/myHTMLwidget/". Each HTML5 feature can contain several pages.
All landscape and portrait pages must be prefixed with "landscape" and "portrait" respectively and numbered sequentially from 1 upwards as follows:
All responsive pages must be prefixed with "responsive" and numbered sequentially from 1 upwards as
Where placing HTML within an InDesign page avoid putting your HTML pages in the same directory as your InDesign files as App Studio will assume your InDesign file assets are dependencies of the HTML widget leading to a bloated issue.
Page dimensions and margins are as follows:
- Landscape: 1024px x 768px
- Portrait: 768px x 1024px
- Responsive: No limitation
- Margin/Guide (for both orientations): top = 64px. This margin represent the area that will covered when the nav bar is showing. Images and non-vital content should not be bled into this margin.
|Note: Where clients have customized the App Studio™ client app the dimensions may differ from the standard sizes so please check with your Account Manager where required.|
You can upload Responsive HTML content that fits to many device screens without any page boundaries or limitations. Once you upload the Responsive HTML content, you can simulate preview for various device screen sizes in both orientations.
- onScreen() - This is called by the app once the page is visible
- offScreen() - This is called by the app once the page is on longer visible
- isOnline(bool) - This is called by the app when the page loads and the online status changes. A boolean of true/false is passed in, true meaning online and false meaning offline.
A good example of what the above functions should be used for are for video:
- onScreen() - Start a video to play automatically (replaces the autoplay attribute on a video tag as the user wouldn't want a video to play when the page isn't visible yet).
- offScreen() - Stop a video that is currently playing.
- isOnline(bool) - Update content from a live feed.
To upload HTML5 content into App Studio:
- Login to my.appstudio.com
- Go to your publication and then go into your issue.
- When you're in the flatplan for your issue, you will see a 'Add content' button. Click this button.
- Now click the upload link on the add content popup (located at the top right hand side).
- Source your file. Ensure this is a zip file (with all the elements in this zip). Click on image to enlarge.
- Once uploaded, press the compile button.
- From here you can preview and push to test so you can then view your content on device.
- To view your content on device, after pushing to test, login to the App Studio app (available from the App Store) and select your publication via the issues screen.
You can create a thumbnail preview image for each HTML page which will get displayed in the scrubber bar in the app reader.
You must create your own thumbnails as the following sizes:
- landscape: 164 × 120
- portrait: 125 × 163
For each file named <orientation><idx>.html e.g. portrait1.html, you can provide a screenshot named <orientation><idx>.jpg e.g. portrait1.jpg and a thumbnail named <orientation><idx>_thumb.jpg e.g. portrait1_thumb.jpg
For responsive files, e.g. responsive1.html the user could optionally provide two screenshots and two thumbnails for each orientation, e.g.
When the user does not provide page screenshots and uploads HTML zip packages with filenames starting with the string responsive_ (e.g. responsive1.html, responsive2.html, …) then the system automatically starts generating responsive screenshots.
Correspondingly for responsive content, the App Studio Apps now have the capability of picking images closest to the device size on which the content is being viewed. If you want the app to use the best possible device size, you need to provide device specific sizes using the following format: responsive<idx><landscape | portrait><width in pixels><height in pixels>.jpg_, e.g.
There are device settings available under the Publication settings:
- Device Name – The name of the device, this will also show up in the Issue Previewer drop-down.
Width x Height – These are the actual width and heights at which the AppStudio server will take the screenshots
- Orientation – Depending upon selection, it will make screenshots for each orientation per HTML file. So, for Apple iPad, it would take screenshots once with Width – 768, Height – 1024, and the second screenshot at Width – 1024, Height – 768
- Set as Default – This affects the default selected device in the Issue Previewer drop-down, as well as uses this width and height for the Issue Cover for responsive issues
Responsive HTML pages are designed in such a way, that they look different on different screen sizes. For example, CSS controls the way a website will look on a large monitor, a tablet, or a device. Based on this premise, App Studio now has a capability of simulating the preview of responsive pages on different screen sizes and in both orientations
By default, App Studio gives default device sizes based on which the server will generate screenshots, but a publication administrator has the ability to override the default device set and make his own, e.g.: