The following areas of the app support custom HTML content:
- Welcome page
- Help pages
- Categories navigation page
The navigation page is optional and only used in apps where publications are divided into categories; it provides a graphical selection screen for the user to pick a category. See the YUDU Media app for an example.
Examples of these pages are provided as part of the app branding pack, and these may be used with simple replacement of text, images and/or CSS styling. If preferred, entirely custom versions may be dropped in 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 versions of these pages are not limited to static single-‐page layouts. Since the content consists of HTML, all of the following are possible:
- animated content
- links to online pages
- form fields
Additional custom HTML pages can be added to the branding pack, and linked to from the standard pages. For example, additional pages containing HTML widgets can be added in for extra functionality (such as a store finder, a feedback form, …), and then linked to from the welcome page.
Any sections which rely on an internet connection should of course be designed to degrade gracefully when the device is offline.
'Latest publication' thumbnail and link
The welcome page 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
This feature is not yet supported for the Android app.
The welcome page can of course be set up so that it displays content retrieved from an external URL. The problem is that that 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.
