Understanding a mobile device’s limitations and optimization of response time were two of the key recommendations the World Wide Web Consortium made in its “Mobile Web Application Best Practices” report.

In development since 2008 and published in December, this set of best practices specifically addressed mobile Web application development, “because [mobile development] is not really the future anymore; it’s today,” said François Daoust, mobile Web specialist at W3C.

The purpose of the document is to advise those just getting into mobile development and don’t know where to start or what’s important, he added. But the guidelines are not targeted solely at developers, the W3C said; interaction and graphic designers, site administrators, and tool developers are also encouraged to read it.

To Daoust, the most important points are understanding the data constraints of a mobile device and reducing the use of the network because data is not always free, he said. “Mobile Web developers have to assume the user is accessing data ‘on the go’ and may not always be connected to a wi-fi connection… On a wi-fi connection the data transfer is a lot faster, but it may not always be available or may cost an additional fee to connect to in a public place, such as a coffee shop. There is, eventually, a ‘real’ cost because mobile users do not all have flat rates, and cost can be around US$1 per 100KB.”

Increasing caching is one way to reduce reliance on the network, he said. Two recommendations to increase caching are fingerprinting resource references and caching AJAX data. According to the W3C, “a resource that is embedded within an application (an avatar, a style sheet, a script) that may change from time to time can still be flagged with a version number.”

Additionally, “Web applications exchange data on a dynamic basis, but this does not necessarily mean that the data itself is dynamic. Caching directives may be set for AJAX data, which is a quality that is often overlooked,” the W3C said.

Developed with the Mobile Web Best Practices Working Group (which includes AT&T, Deutsche Telekom, Google, Nokia and Opera Software), the best practices also address the importance of exploiting a mobile device’s capabilities to enhance the user experience, while understanding not all devices have the same capabilities.

“This means a developer should take advantage of touch-based screens, but still design for other forms of interaction,” Daoust said.

Additionally, the W3C advises developers to not only respect a device’s data constraints, but also its physical constraints (such as a small screen). According to a W3C “cheat sheet,” limiting scrolling to one direction (if it can be avoided), or excluding images that a device cannot render are some ways of respecting device limitations.

Other suggestions included that all information conveyed in color should also be available without color, as well as to not rely on embedded objects or scripts.

“The normal way of developing Web applications is adding a lot of JavaScript code, but developers often forget or don’t try to understand what it is they are doing and often do too many operations in the application’s structure,” Daoust explained.

And this is the real unfriendly way of developing mobile Web applications, he added. It’s overlooking optimization and a device’s restrictions at the expense of cost and battery power.  

The W3C Mobile Web Application Best Practices

Spare the network
Use appropriate Web protocol features to reduce network bottlenecks and latency.
– Cache AJAX data
– Minimize external resources, applications and data size
– Use cookies sparingly
– Optimize network requests

Set users free
Mobile devices are used in various contexts, from killing time at home to urgent requests on the go. Let users know and control what happens to earn their trust.
– Ensure the user is informed about use of personal and device information
– Offer users a choice of interfaces
– Don’t change focus when dynamically updating page sections

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
– Don’t execute unescaped or untrusted JSON data

Design for flexibility
Web applications are run in evolving and heterogeneous environments. Flexibility allows you to address more devices and users to reduce costs.
– Design for multiple interaction methods
– Ensure text flows
– Support a non-JavaScript variant if appropriate
– Prefer server-side detection where possible; use client-side detection when necessary

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 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
– Minimize perceived latency
– Optimize for application start-up time
– Keep Document Object Model size reasonable