The following areas of the app support custom HTML content:
- Welcome page
- Help pages
- Category navigation page
- Custom Tab
The category navigation page and custom tabs are optional.
Category navigation pages are only used in apps where publications are divided into categories; this screen provides a graphical selection screen for the user to pick a category.
Templates for the category navigation screen can be provided by our App Team or entirely custom versions may be added instead to allow more bespoke content.
Dimensions and layout
For iOS, custom versions of these screens should be designed with dimensions:
- 2048 x 1536px on iPad Retina
- 1024 x 768px on iPad
- 1136 x 640px iPhone 5+
- 960 x 640px on older iPhones and iPod Touch
The content should be designed to handle both landscape and portrait orientations.
Content designed for the iPad Retina screen can be scaled down to fit on the iPad screen using JS + CSS.
On other platforms, the screen dimensions are far more variable. The content is displayed in a lightbox-‐style frame, which guarantees that the frame dimensions use a 4:3 or 3:4 ratio. The frame is limited to a maximum size, which by default is 1024x768px. However, the frame will render with smaller dimensions if necessary to fit on the screen (though still in a 4:3 or 3:4 ratio). The content must be designed to render appropriately as the frame size varies; see the Lightbox section above for recommendations on achieving this.
Advanced content
Custom html screens are not limited to static single-page layouts. All of the following are possible:
- animated content
- links to online pages
- form fields
Custom HTML sub-screens can be also be added. For example, additional pages containing HTML widgets can be included for extra functionality (such as a store finder, a feedback form, etc…), and then accessed via an app's main Home screen.
Any functionalities that rely on an internet connection should of course be designed to degrade gracefully when the device is offline.
'Latest publication' thumbnail and link
Your app Home Screen may include an image of, and link to, the latest publication available in the app, such that when a newer publication is published into the app the image and link update accordingly.
To use this for Android apps, add the following code:
<a href="about:latest-edition"><img id="latest_edition_image" src="latest_edition_image.jpg"/>
<script src="latest_edition_helper.js" /></a>
For iOS add the following code:
<a id="latest_link" href="yudu:latest-edition"> <img id="thumb_image" src="loading.jpg" /> </a>
(Specifically: the HTML should include an <img> tag with the above values for id and src, with the script file referenced at any point following the <img> tag.)
Dynamic welcome page
The Home Screen of your app can also be set up so that it displays live retrieved from an external URL. This relies on the device being online. However, the app provides a mechanism to update the welcome page in realtime that avoids this problem. This works as follows:
- When the app is built, a URL may be built into the app’s configuration for the app to check for updates to its welcome page.
- On starting up, the app checks that URL for a more recent version of the welcome page.
- If one is found, the app downloads it and stores it for use from the next time the welcome page is displayed.
- If the device is offline, the app continues to display the most recent version of the welcome page.
Speak to the YUDU technical team to enable this feature.
. 