Tip

A look at the W3C’s mobile Web application best practices

The W3C’s Mobile Web Best Practices Working Group updated its best practices for mobile Web app developers in December, and the practices have been endorsed as a W3C Recommendation.

The best practices cover the areas of application data, security and privacy, user awareness and control, conservative use of resources, user experience, and handling variation in delivery content.

The following summarizes the best practice tips, and the “why.” For the “how-to” see the

    Requires Free Membership to View

Mobile Web Application Best Practices documentation at W3C. A caveat: Some of the how-tos are not yet prevalent in the development community, but the working group expects them to become so.

Use cookies sparingly. Since information stored in cookies is sent to the server for every request, this can negatively impact performance on a mobile network. Further, cookie support may be disabled in the device configuration or the mobile network.

Use appropriate client-side storage technologies for local data. Taking advantage of client-side storage puts Web apps on par with native apps in terms of start-up time and responsiveness.

Replicate local data to a server if necessary. Data in a client-side storage API is not visible to the user’s other devices. Data that needs to be shared should be replicated back to the server as soon as possible.

Do not execute unescaped or untrusted JSON data. This can represent a security risk, particularly for personal information on mobile devices.

Ensure the user is informed about use of personal and device information. A notice when the user first accesses the Web app should provide enough information for the user to decide if they want the app to access their data.

Enable automatic sign-in. This is important on a mobile device where data input is more difficult than on a desktop. Also, provide a sign-out link.

Regarding the use of mobile device resources, the W3C recommends the following best practices for minimizing the use of device memory, processor power and network bandwidth: 

  • Use transfer compression
  • Minimize application and data size
  • Avoid redirects
  • Optimize network requests
  • Minimize external resources
  • Aggregate static images into a single composite resource (Sprites)
  • Include background images inline in CSS style sheets
  • Cache resources by fingerprinting resource references
  • Cache AJAX data
  • Do not send cookie information unnecessarily
  • Keep DOM size reasonable

The recommendations that deal with user experience include:

  • Optimize for application start-up time
  • Minimize perceived latency
  • Design for multiple interaction methods: focus based, pointer based and touch based
  • Preserve focus on dynamic page updates
  • Use fragment IDs to drive application view
  • Make telephone numbers "click-to-call"
  • Ensure paragraph text flows
  • Ensure consistency of state between devices, so user preferences captured on one device are accessible on other devices
  • Consider mobile specific technologies for initiating Web apps
  • Use the meta viewport element to identify desired screen size

Finally, for handling variations in delivery content, the best practice recommendations are:

Prefer server-side detection. Where possible, use the evidence available on the server to determine the properties of the delivery context, and adapt the responses to the client before transfer.

Use client-side capability detection when it’s not possible to determine certain properties of the delivery context from the server. The information can be used directly to adapt the presentation, or request adapted content from the server.

Use device classification to simplify content adaptation. Build a single application variant for each class. This allows you to exploit device capabilities with a manageable code base.

Support a non-JavaScript variant if appropriate. If broadest reach is a primary concern, consider providing a variant of the application that uses synchronous FORM posts in place of XHR requests.

Offer users a choice of interfaces. Automatic detection is not sufficient as the only mechanism for determining which version is appropriate.

This was first published in January 2011

There are Comments. Add yours.

 
TIP: Want to include a code block in your comment? Use <pre> or <code> tags around the desired text. Ex: <code>insert code</code>

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy
Sort by: OldestNewest

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.