App design

Draft
This page is not complete.

There are many considerations to ponder before designing your web app.

Design considerations

Device support and design emulation

Knowing the types of devices your application should work on is of utmost importance. Knowing the target devices and their capabilities tells us what features we can likely count on, what UI components should look like, and so on. Many mobile JavaScript frameworks, Dojo Mobile being one of them, provide multiple device themes for easy device theme implementation. Even if you prefer not to use the given JavaScript framework, you can still study the device theme stylesheet and borrow styles as desired.

Orientation support

Orientation support is a huge consideration when creating a web app capable of working on mobile devices. One obvious orientation consideration is that desktop apps use horizontal orientation by default, whereas most mobile devices use portrait as the default orientation. An ideal web application looks good and works well in both orientations. Both JavaScript and CSS media queries provide developers the capability to detect and react to orientation changes as they happen.

Gestures vs. simple touch events

Consider the navigation interaction paths you want for your application. Will the application be navigable by button touches or gestures? The answer to that question decides whether your application must make room for static controls or must subtly communicate to the user that gestures should be available. JavaScript libraries like jGestures exist to aid in gesture detection.

Basic app design principles

Regardless of the specific devices you plan to support, there are a few basic principles which should be obeyed when creating web applications:

Avoid pixel-based widths when designing for multiple devices and/or multiple orientations
Use vector graphics so that their dimensions may be elegantly adjusted between devices
Don't assume features on any device; feature detection is still important
The more flexible the app design, the more portable it will be when considering broader device support

The design of our app will be very typical, with two panes. The first pane will provide a search box for field for entering the user's location, as well as a list of previous location searches. The second pane will simply show a list of tweets from Twitter. Each pane will use a standard heading.

Our app will also be dynamic in that it will lay out properly in both landscape and portrait orientation, respond to a simple swipe gesture, and display reasonably on desktop and mobile devices. The file structure of the app will look like this:

- app
  -  app.css
  -  app.manifest
  -  app.js
  -  images/
      -  icon-16.png
      -  icon-48.png
      -  icon-128.png
  -  index.html

The structure of your application may vary. Since this is a small sample application, there's no need for more specific directory structures. The images are provided in different sizes for different devices. For example, the icon-128.png file will be used for Mac OS X desktop installations.

« Previous Next »