App code

Outside of the different colors and imagery that apps use, an app's design isn't necessarily dynamic: the principles of designing a flexible app are largely the same. But the style and tools a developer uses in coding an application is a completely different story. Numerous libraries and frameworks are available for coding mobile apps.

JavaScript libraries

jQuery Mobile

jQuery's official mobile framework is jQuery Mobile. jQuery Mobile provides a unified, HTML5-based user interface system for all popular mobile device platforms. jQuery Mobile also provides a theme builder for application design as well as development.

Dojo Mobile

Dojo Mobile is the Dojo Toolkit's mobile framework, boasting a series of flexible views and widgets, automatic device detection and themes, and more. The Dojo Mobile Showcase shows advanced Dojo Mobile usage in action.

MooTools Moobile

The unofficial mobile framework of MooTools is called Moobile. Moobile provides a mobile application boilerplate as well as a host of simple mobile widgets.

Numerous other mobile JavaScript frameworks are available to aid the development of mobile web apps. When looking for a good mobile web app JavaScript framework, look for multi-device support, touch and gesture event support, and a unified API with its host framework.

The web app built in this tutorial will utilize jQuery Mobile. Experiment and evaluate different mobile frameworks based on the goals of your app before selecting one (or deciding against using any at all). In many cases, a framework app will be save you time; in other cases, a framework could be overkill.

CSS libraries, helpers, and techniques

CSS plays an important role in any web-based technology. There are a variety of CSS libraries than may aid you in creating, maintaining, and organizing your CSS.

CSS preprocessors

While CSS is a simple language, its lack of variables and the need for repeated style assignments with vendor prefixes can make CSS difficult to maintain—a pain no mobile app developer needs. CSS preprocessors ease development of apps, allowing for better code organization and faster development.

With one of those CSS preprocessors, LESS, CSS can be written like this:

@someColor: #000; /* color var */

.rounded-corners (@radius: 5px) { /* function */
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

p {
  color: @someColor;
  a {
    color: #fff;
    background: @someColor;
    
    .rounded-corners;
  }
}
	

This gets converted into the following by the LESS preprocessor:

p { 
  color: #000;
}

p a {
  color: #fff;
  background: #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
	

While LESS is the most popular CSS preprocessor, SASS and Stylus are also available and useful.

CSS3 techniques

Web apps may take advantage of numerous CSS techniques that allow for enriched design and strategies for avoiding the need for imagery.

Gradients

CSS3 provides the ability to create linear and radial gradients with some simple CSS code:

h1 { 
  background-image: linear-gradient(#6facd5, #497bae);
}

Box and text shadows

Box shadows and text shadows provide a subtle depth enhancement to block elements and text:

.shadower {
  box-shadow: 10px 5px 5px #000;
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}

Shapes with CSS

CSS also provides the ability to cleverly create shapes likes triangles and circles:

.arrowRight {
  width: 0; 
  height: 0; 
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  border-left: 5px solid #2f2f2f;
  font-size: 0;
  line-height: 0;
}

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Creating responsive layouts

Coding responsive layouts is paramount in creating flexible apps that work on multiple devices and in multiple orientations. The following are some techniques for creating such a design.

Our desktop layout

desktop-screenshot1.png

Our mobile device & phone layouts

iphone-screenshot1.pngiphone-screenshot2.png

Percentage widths

Fixed pixel widths should rarely be used. Percentage widths are preferred as they let elements adjust to device viewport dimensions. Fixed widths (and heights) should generally be used only for small, genuinely fixed-sized items.

Viewport size-dependent element display

Showing and hiding elements based on viewport size is a common practice. Instead of cramming a lot of content into a smaller space, or changing an app's design completely, simply hiding those "supporting" elements may be the best option.

Viewport size-dependent imagery

Adapting image sizes to the device viewport size is also a common practice, making vector images (using SVG, for example) the best practice for your web app.

Media queries

CSS media queries let developers adjust layout and element styles to viewport size, orientation, aspect ratio, and more:

/* screen size media queries */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}

/* orientation media queries */
@media (orientation:portrait) {

}
@media (orientation:landscape) {

}

/* advanced media query usage */
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {

}

/* aspect ratio */
@media screen and (device-aspect-ratio: 16/9) {

}

orientationchange and resize events

Orientation changes can also be detected with JavaScript. Most browsers fire an orientationchange event while all browsers are known to fire the resize event.

window.addEventListener("resize", function() { 
  // Detect orientation based on width
  var orientation = window.innerWidth > window.innerHeight ? "landscape" : "portrait";
  
  // Execute more code accordingly...
}, false);

Web app bootstraps

Server side processing of information can be handled by the server side technology of your choice. Popular server side languages include PHP, Python, and NodeJS + express. There's a likelihood that your application will want to implement Mozilla Persona for app sign in.

App manifests

Apps submitted to the Firefox Marketplace require an application manifest. This manifest contains basic information that a web browser needs to interact with an app. Manifests are written in JSON. A sample manifest could look like this:

{
  "version": "0.1",
  "name": "Area Tweet",
  "description": "Find tweets by for any location",
  "icons": {
    "16": "http://areatweet.com/images/icon-16.png",
    "48": "http://areatweet.com/images/icon-48.png",
    "128": "http://areatweet.com/images/icon-128.png"
  },
  "developer": {
    "name": "David Walsh",
    "url": "http://areatweet.com"
  },
  "installs_allowed_from": [
    "https://marketplace.firefox.com",
    "http://areatweet.com"
  ],
  "default_locale": "en"
}

The application manifest lives on the host server, not the Firefox Marketplace. It's recommended that your manifest be saved with a .webapp extension. The manifest must be served with a Content-Type HTTP header of application/x-web-app-manifest+json. Use of HTTPS is recommended.

A complete listing of all manifest properties can be found here. There's also a Frequently Asked Questions document which provides tips for creating your manifest and explanations for why the manifest hosting process is the way it is.

Use absolute paths within the manifest, even for images. The Firefox Marketplace will not currently accept manifests with relative paths.

Application cache

See Using the application cache for details.

When an Open Web App is running in the Web runtime, no navigation controls are displayed. If you want to detect this, check the window.locationbar.visible property. If window.locationbar.visible is false, no navigation is displayed. You might want to check for this so you can provide navigation controls for the app user. This is also one way to check if the app is installed, or to check if the app is running in the Web runtime.

For other ways to check if you are running inside an app, see How can my app detect that it is in the Web runtime?

Attachments

File Size Date Attached by
iphone-screenshot1.png
62820 bytes 2012-05-31 17:25:47 jackblack
iphone-screenshot2.png
135295 bytes 2012-05-31 17:25:48 jackblack
desktop-screenshot1.png
264806 bytes 2012-05-31 17:25:45 jackblack

Document Tags and Contributors

Tags:
Contributors to this page: Sheppy, Yoshino, MarkGiffin, dbruant
Last updated by: Yoshino,