How to: Design an Integrated Web App

Your Integrated Web App will be displayed within viewports of varying sizes.

When uploading your Integrated Web App to Ubiquity, you will be able to select from a range of canned size classes

It is therefore critical that you design for a range of widths and heights.

For width and height specs:

• Width: 200-2000px
• Height: a little difficult to determine. It can be set automatically to a percentage inside Ubiquity once you've zipped and uploaded your .zip

• Have items always aligned to the top, left, right or bottom of the viewport
• Have items resize depending on the viewport size
• Have items horizontally and/or vertically centered

• media queries and breakpoints
• flexbox, which is supported on Android and iOS versions that Liquid State apps support, and can dramatically simplify the layout code for your design

• Never use online files or content, unless your design includes fallback for offline users
• Avoid the excessive use of Javascript
• Avoid using large image or font files. The larger your Integrated Web App is, the slower the user experience will be. You should ideally aim for 2-3 MB maximum.