You can create rich, interactive app content by uploading custom HTML to Ubiquity.
Custom HTML is considered an advanced import. For more information on import types, see Liquid State Ubiquity Import Types.
Preparing your Custom HTML
In order for Ubiquity to properly ingest your HTML content, your HTML files must be arranged in a certain way.
Please ensure your HTML files meet the following requirements before attempting to import them to Ubiquity:
- Your custom HTML must be uploaded as a .zip file
- All page folders and common resource folders should be included in the root of the .zip file.
- Custom HTML should include any number of .html pages, each contained within a separate folder, with relative links to assets and other pages within your import.
- Every .html page within your import will be converted to an app page upon import.
- Content which is used only in one HTML file can be contained in folders in the same directory as the HTML file that uses it.
- Any number of common resources folders can be included, but these must not contain any .html or .htm files.
If your HTML files have been properly prepared, they will be self-contained static HTML. You should be able to open and operate your pages locally within your web browser.
Example Custom HTML File Structure
Here is an example of some HTML that is structured for Ubiquity.
The root folder in this example is the Example Custom HTML folder.
The root folder contains an assets folder and a folder for each page.
Each page folder contains the page HTML itself (in this case called index.html), and any other page-specific resources (in this case, page-specific CSS).
The page folder also includes an assets folder. This assets folder contains all assets used within the page, such as image and video files.
All links within the HTML point to the relevant resource/asset files within the file structure.
The root folder is compressed, and imported to Ubiquity as a .zip file.
Custom HTML FAQs
Pages created using custom HTML may be less flexible than pages created from other source documents.
The Liquid State system will not be able to automatically scale any pages with fixed sized elements, such as fixed page background sizes.
We recommend creating code that will responsively resize/reflow.
To achieve responsive content, you can:
As mentioned above, your page-to-page links must be relative.
This means your hyperlink destination must point to the destination page's location within your HTML file structure.
You can only link to pages that are included within the same HTML import.
Once imported to the Ubiquity, these pages will be contained within the same document.
Document-to-document links are not currently supported for custom HTML imports.
Any embedded web-based content will be served over a secure connection.
Therefore, you must use an HTTPS prefix (rather than the standard HTTP) on any such resource.
This could apply any web-based content, such as an embedded YouTube video, or a link to an external website.
Choosing the right fonts can be challenging.
There are a handful of standard fonts which will be automatically recognised across different platforms.
If you have licensed custom fonts for mobile and tablet applications, you can include them using the @font-face CSS rule.
We recommend using Web Open Font Format (WOFF) for your font licensing.
Mispositioned content, such as content that appears further down a page than it is supposed to, is sometimes caused by attempts within the code to reposition page elements.
As a result, you should avoid:
Sometimes, tapping an interactive element on the page will not trigger the intended action.
Instead, the app interface (including the top menu bar and the lower reading history) will be displayed.
The following jQuery function calls can be used: