Installed app considerations

Introduction

Lors du design d'une Open Web App installable, il y a un certain nombre de considération à garder à l'esprit à propos de la façon dont va se comporter l'application après l'installation. Cet article apporte des conseils sur chacunes d'entre-elles. 

Ce n'est pas un navigateur

Après que l'application est installée, elle va fonctionner comme une entitée, sans l'interface utilisateur (UI) du navigateur. Cela signifie que vous avez besoin d'apporter à l'utilisateur tout ce dont il a besoin pour utiliser l'application, sans la disponibilité des fonctions du navigateur, et que vous devez prendre en considération les effets que cela pourra avoir sur la mise en page de l'application, le layout (voir "Flexible and responsive", plus bas). De plus, une application ressemble plus à une seule page au contenu changeant dynamiquement, qu'à une série de différentes page entre lesquelles l'utilisateur navigue. 

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.