Installed app considerations

Introduction

When designing an installable Open Web App, there are a number of considerations to keep in mind about how the app will behave after it is installed. This article provides advice on each one.

There is no browser

After the app is installed, it will run as a self-contained entity, without the browser UI. This means you need to provide the user with everything they need to use the app, without the browser's functions being available, and consider the effect this might have on the app's layout (see "Flexible and responsive," below.) An app more often than not feels like a single page with content changing dynamically on it, NOT a series of different pages that we navigate between.

There is no back button

You can't rely on users having the back button available to navigate back through the different app pages or views they've already been to. In general, it makes sense to create all your app functionality on a single page--provide your own back button, or a tabbed interface for accessing the different pages, or a swipe gesture to move back and forth, or some other mechanism particular to the app itself.

There is no history or bookmarks

In the same way that you can't rely on the back button, you also can't rely on browser history or bookmarks. If you want to give the user a way to store information states to look up later, you need to provide it to them.

There is no search

I'm sure you get the idea by now! Search is another function that users often rely on while using a web app, for further or related information, or usage instructions. To save users the irritation of having to keep going back and forth to and from their browser app, provide an in-app view to give users the resources they are most likely to need, such as a glossary, or a basic usage guide. Although saying that, if an app is so complicated that it needs a large usage manual to accompany it, it would be questionable whether it works as a single app.

There is no browser zoom

You also need to consider availability of accessibility features. The browser's zoom function won't be available, and you can't set apps to have an increased default text size, so you'll need to progam in your own functionality for increasing text size, etc.

Flexible & responsive

Given that a lot of installed Open Web Apps are going to be run on a variety of different devices, they'll need to be developed in a flexible manner so that the layout and graphics will work in a variety of situations, so wide and narrow screen, low and high resolution, etc. In addition, the browser chrome won't be available, which may have an effect on the UI space available on some devices. The best approach to catering for a wide variety of different taget devices is generally to force your UI to take up the whole viewport, size it flexibly using percentages, and use media queries to apply optimized layouts to the main different classes of screen you are targeting (so, for example, cinema monitor, desktop/laptop, tablet, smartphone, feature phone, TV.)

You can find more information out about Open Web App layouts at our App layout page.

Native look versus web individuality

One issue you will come across when designing an installable Open Web App concerns going with the native look of the device, versus preserving individuality. After all, most platforms tend to have design guidelines that the device manufacturers like third party apps to adhere to, to a greater or lesser degree, but on the other hand the web champions individuality of sites, and you don't want your creations looking exactly the same as everyone else's (often an issue when you use a popular UI framework for rapid app development.)

If you are making an app mainly aimed at the Firefox OS platform, there are Firefox OS design guidelines available, but you should try to follow those as closely as possible while still preserving a bit of your own personality. One option is even to apply a custom stylesheet to your UI when it is installed on a certain platform, but by default use something more individual.