How to: Design an Integrated Web App

Integrated Web Apps should be designed responsively and using breakpoints, media queries, flexbox

 Viewport Sizes

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
 What a Web App should do...
  • 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
 Recommended CSS features...
  • 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
 Technical recommendations...
  • 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.

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