How to: Import Custom HTML

Owned by Oliver Michael (Unlicensed)
Last updated: Aug 21, 2017 by Broderick Gaggi (Unlicensed)
4 min read

 

 

On This Page

 

 

Overview

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.
  • Common resources, such as CSS and JavaScript files, should be contained within a folder - not within the root of the .zip.
    • 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.

The assets folder contains resources that are common to all pages (the entire document), such as CSS and Javascript files.

 

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

 

 Will my custom HTML pages resize on different devices?

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:

  • Create your HTML in a layout program that allows you to define break points in your pages, e.g. Adobe Edge Reflow.
  • Hand-code responsive HTML with browser-native methods, such as CSS, or media queries for varied layouts.

Never use Javascript to force custom repositioning of page elements.

 

 Why aren't my page-to-page links working?

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.

 

 Why aren't my external web hyperlinks working?

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.

 

 Some of my fonts aren't displaying correctly. What do I do?

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.

 

 My page content is mispositioned. What's going on?

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:

  • Setting absolute positioning with CSS
  • Repositioning elements using Javascript

 

 Why does tapping an interactive element bring up the app interface?

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.

To address this document, you should stop propagation and prevent default handling for Javascript interaction events.

The following jQuery function calls can be used:

event.preventDefault();
event.stopPropagation();

 

 

Unless otherwise indicated in the Overview page of this WIKI the information contained within this space is Classified according to the /wiki/spaces/ISMS/pages/739344530 as

INTERNAL