Channels ▼
RSS

Mobile

Mobile Web App Best Practices


The W3C has released its "best practices" guidelines for mobile Web application development. According to the W3C, "The goal of this document is to aid the development of rich and dynamic mobile Web applications. It collects the most relevant engineering practices, promoting those that enable a better user experience and warning against those that are considered harmful."

The W3C hopes these guidelines will help developers build browser and OS-agnostic applications for the mobile platform that could lead to the proliferation of Web Apps across mobile devices in 2011.

Overview

Among the pearls of web app wisdom imparted in the guidelines are:

Spare the network: Use appropriate Web protocol features to reduce network bottlenecks and latency.

  • Use transfer compression.
  • Cache resources by fingerprinting resource references.
  • Cache AJAX data.
  • Minimize external resources.
  • Minimize application and data size.
  • Use cookies sparingly.
  • Do not send cookie information unnecessarily.
  • Optimize network requests.
  • Avoid redirects.

Remember Web principles: Mobile devices are just one way to access the Web. Generic Web principles also apply to the development of robust mobile Web applications.

  • Replicate local data.
  • Ensure consistency of state between devices.
  • Do not execute unescaped or untrusted JSON data.
  • Use fragment IDs to drive application view.

Design for flexibility: Web applications are run in evolving and heterogeneous environments. Flexibility allows you to address more devices and users at reduced cost.

  • Design for multiple interaction methods.
  • Ensure text flows.
  • Prefer server-side detection where possible.
  • Use client-side detection when necessary.
  • Use device classification to simplify content adaptation.
  • Support a non-JavaScript variant if appropriate.

Exploit mobile-specific features: Some Web technologies are particularly relevant to mobile devices. Learn to use them.

  • Make telephone numbers "click-to-call".
  • Consider mobile-specific technologies for initiating Web applications.
  • Use the meta viewport element to identify the desired screen size.
  • Use appropriate client-side storage technologies for local data.

Optimize response time: Every detail matters in mobile Web applications and some technical points may significantly boost the overall user experience.

  • Aggregate static images into a single composite resource (sprites).
  • Include background images inline in CSS style sheets.
  • Keep DOM size reasonable.
  • Minimize perceived latency.
  • Optimize for application start-up time.

Conclusion

The guidelines themselves are fairly brief. According to the W3C, "In a world where the line between mobile and non-mobile is necessarily blurred ... a document that restricts its focus solely to best practices that are uniquely mobile would most likely be very short. With this in mind, the focus of this document is to address those aspects of Web application development for which there are additional, non-trivial concerns associated with the mobile context. This applies equally both to the limitations of the mobile context (e.g. small screen, intermittent connectivity), and also the additional scope and features that should be considered when developing for the mobile context (e.g. device context/location, presence of personal data on the device, etc)."

"I am very excited about this document, which I've already used myself to ensure that the W3C Cheat Sheet, a mobile Web application, works not just on mobile devices, but on all devices,” said Dominique Hazael-Massieux, W3C Mobile Web Initiative Lead. “These guidelines include sound advice from real-world Web apps developers, telcos, and browser vendors."

Adam Connors and Bryan Sullivan served as the the editors of the guidelines, with significant contributions from Daniel Appelquist and Scott Hughes from Vodafone, Jo Rabin from dotMobi, Phil Archer and Francois Daoust of the W3C, and Jeff Sonstein from the Rochester Institute of Technology.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video