Best practices for mobile Web application development

By Peter V. Mikhalenko July 18, 2006, 6:10pm PDT The principal objective ofrecently issued working draft guidelines on Mobile Web by theW3C is to improve the user experience of the Web when accessed from mobiledevices. These recommendations are built on some of the same concepts describedby the Device Independence principles. The Mobile Web guidelines have somepresentations issues including input and output capacity, bandwidth and costfor end-users requirements, delivery context, etc. This document coversbest practices for delivering Web content to mobile devices. It is importantthat all recommendations refer to deliveredcontent and not to the processes by which it is created, nor to the devices oruser agents to which it is delivered. Readers are expected to be familiar withWeb technologies such as Web servers and HTTP.

Mobile Web initiative

Because of the widespreaduse of World Wide Web technologies over the Internet, a variety of content andservices are now easily accessible from desktop and notebook computingplatforms. Web technologies have the potential to play the same role for mobiledevices. However, the mobile Internet today suffers from many problems thatmake the Web unattractive for most subscribers. The intention of the Mobile Web Initiative isto make Web access from a mobile device as simple, easy and convenient as Webaccess from a desktop device. Aside from representing a further deliverychannel for existing Web users, it could represent the only, or primary,delivery channel to end users who do not have access to any other Web enableddevices. Extending the reach of the Web contributes to one of the primary W3Cgoals ---bringing the benefits of the Web to all people. The mission of theMobile Web Initiative Best Practices Working Group is to enable the reach ofthe Web to be easily extended onto mobile devices. It intends to specify andpublish a set of technical best practices and to develop amobileOK trust mark for Web pages that support suchpractices and provide an appropriate user experience on mobile devices. Thebest practice guidelines are intended to improve the delivery and display ofcontent to mobile and other portable small screen-devices.

Scope of recommendations
Most of differences between fixed and mobile userexperience are fall in these categories: Types of content; Network and device capabilities; Context in which the content is received (e.g., sitting at a desk vs. sitting on a bus). An example of the content issues involved is a large bitmap. The bitmap may be unsuitable for use on a mobile device and it would need to be resized or cropped, while maintaining the relevant information. Examples of device and access network capabilities that need to be considered because ofpossible technical, ergonomic or economic implications for a mobile userinclude: Bandwidth - Basic cellular radio access often offers lower bandwidth than a fixed connection;

Battery -Battery capacity is very constrained in mobile devices - certain activities tend to increase power consumption and shorten battery life; Capabilities - like screen size, memory size, etc.; Cost -Cellular network connectivity is commonly charged per data volume; Input -Mobile device input capabilities tend to differ, but are usually more constrained than in desktop terminals; Memory -Significantly less working memory and storage is available on mobile devices than in desktop terminals; Processing power -Significantly less processing power is available on mobile devices than in desktop terminals; Text input -Text input tends to be very slow and cumbersome on a mobile device;

Mobile Web Requirements

Presentation
Today, Many Webpages are laid out for presentation on desktop size displays, and exploitcapabilities of desktop browsing software. Accessing such a Web page on amobile device often results in a poor or unusable experience. Contributingfactors include pages not being laid out as intended. Because of the limitedscreen size and the limited amount of material that is visible to the user,context and overview are lost. It is particularlyimportant in the mobile context to help the user create a mental image of thesite. This can be assisted by adopting a consistent style and can beconsiderably diminished by an uneven style.

Input
Mobile device inputis often difficult when compared with use of a desktop device equipped with akeyboard. Mobile devices often have only a very limited keypad, with smallkeys, and there is frequently no pointing device. One of the difficulties ofthe mobile Web is that URLs are very difficult to type. Lengthy URLs and thosethat contain a lot of punctuation are particularly difficult to type correctly.Because of the limitations of screen and input, forms are hard to fill in. Thisis because navigation between fields may not occur in the expected order andbecause of the difficulty in typing into the fields. While many moderndevices provide back buttons, some do not, and in some cases, where backfunctionality exists, users may not know how to invoke it. This means that itis often very hard to recover from errors, broken links and so on.

Cost and bandwidth

Mobile networks canbe slow compared with fixed data connections and often have a measurably higherlatency. This can lead to long retrieval times, especially for lengthy contentand for content that requires a lot of navigation between pages. Mobile datatransfer often costs money. The fact that mobile devices frequently supportonly limited types of content means that a user may follow a link and retrieveinformation that is unusable on their device. Web pages can contain contentthat the user has not specifically requested - especially advertising and largeimages. In the mobile world this extra material contributes to poor usability andmay add considerably to the cost of the retrieval.

User goals
Mobile userstypically have different interests to users of fixed or desktop devices. Theyare likely to have

more immediate and goal-directed intentions than desktop Webusers. Their intentions are often to find out specific pieces of informationthat are relevant to their context. An example of such a goal-directedapplication might be the user requiring specific information about schedulesfor a journey they are currently undertaking. Equally,mobile users are typically less interested in lengthy documents or in browsing.The ergonomics of the device are frequently unsuitable for reading lengthydocuments, and users will often only access such information from mobiledevices as a last resort, because more convenient access is not available.

Advertising
Developers ofcommercial Web sites should note that different commercial models are often atwork when the Web is accessed from mobile devices as compared with desktopdevices. For example, some mechanisms that are commonly used for presentationof advertising material do not work well on small devices and are thereforecontrary to the Best Practice recommendations.

Delivery context
It is likely thatapplication designers and service providers will wish to provide the bestpossible experience in the context in which their service has the most appeal.However, while services may be most appropriately experienced in one context oranother, it is considered best practice to provide as reasonable experience asis possible given device limitations and not to exclude access from anyparticular class of device, except where this is necessary because of devicelimitations. The widely varyingcharacteristics of mobile devices can make it difficult for a Web site toprovide an acceptable user experience across a significant range of devices.For example different devices support different markup features and differentscreen sizes may demand different sized images. Consequently, it is very commonwhen delivering content to mobile devices to vary the details of the markup,format of images, image sizes, color depths, and so onto suit the characteristics of the device in question. The process of alteringcontent to enhance the user experience on particular devices is referred to as Content Adaptation. Providing variationson the user experience that are appropriate in different cases requires thecontent provider to know a significant amount about the characteristics of thedevice, the properties of the browser in use and the transparency of thenetwork connection to the device. For simple sites that present an interfacewhich is similar across a broad range of contexts the need for such informationis diminished when compared with a sophisticated site that has an optimizednavigation structure, presents different size images or carries out otheradaptations to suit the particular delivery context. There are several methodsby which a content provider can discover information about the deliverycontext, such as CC/PP, UAPROF, CSS Media Queries and various outputs of the Device Independence WorkingGroup. Since mobile deviceshave such a wide range of differences in their properties, the Best PracticesWorking Group has defined a Default Delivery Context: Screen width: minimum of 120 pixels; Markup language: XHTML Basic Profile(http://www.w3.org/TR/xhtml-basic/); Character encoding: UTF-8(http://www.ietf.org/rfc/rfc3629.txt); Image formats supported, at least: JPEG, GIF 89a (non-interlaced, non-transparent, non-animated); Maximum page size: 20 Kb; Color range: "Web-safe", i.e. red/green/blue components chosen only from the values 0, 51, 102, 153, 204, and 255; Style sheet support: External CSS Level 1(http://www.w3.org/TR/REC-CSS1)

HTTP version, earliest: HTTP/1.0.

Mobile Web recommended principles

There are some generalprinciples, as well as a few more concrete ones, that underlie delivery tomobile devices, according to described requirements. Thematic consistency - This is a realization of the One Web principle, whereby content should be accessible on a range of devices irrespective of differences in presentation capabilities and access mechanism. It ensures that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices. Exploit device capabilities -While encouraging content providers to be sensitive to the needs of the Default Delivery Context, it is not intended that this will result in a diminished experience on more capable devices. Develop sites that target the Default Delivery Context. In addition, where appropriate, use device capabilities to provide a better user experience on more capable devices. Testing -Carry out testing on actual devices as well as emulators. Many manufacturers provide emulators for their device that can provide a convenient preliminary means of testing. However, in practice, many of the emulators behave in a different way to the devices they emulate. Consequently testing should be carried out in as wide a range of real devices and specific software versions as is practical. Resource URLs -Keep the URLs of site entry points short. Typing URLs on mobile devices can be difficult, and it is expected that users will prefer to use alternative methods of obtaining URLs when available - such as following a hyperlink (from an e-mail, SMS or other Web page), WAP Push, 2D bar code, color bar code, RFID tag and Bluetooth. However, typing a URL may in some cases be the only option available. By keeping site entry point URLs short it is possible to reduce the chance of error and provide a more satisfactory user experience. Navigation bar -Provide only minimal navigation at the top of the page. Balanced structure -Take into account the trade-off between having too many links on a page and asking the user to follow too many links to reach what they are looking for. Target identification of links -Clearly identify the target of each link. Users of mobile devices may suffer undue delay and cost as a result of following links. It is important to identify where a link leads so users can make an assessment of whether following it will be of interest to them. Image maps -Do not use image maps unless you know the device supports them effectively. Refreshing, redirection and pop-up -Do not cause pop-ups or other windows to appear and do not change the current window without informing the user. Do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it. Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes. Externally linked resources -Keep the number of externally linked resources to a minimum. Each linked resource (images, style sheets and other objects) requires a separate request across the network. This may add significantly to the load time of the page in the mobile context. Page content and layout -. Ensure that content is suitable for use in a mobile context. Use clear and simple language. Limit content to what the user has requested. This is because users in a mobile context are often looking for specific pieces of information, rather than browsing. Divide pages into usable but limited size portions. If pages are too big they may take an unduly long time to load. In addition, mobile devices typically have restrictions on the largest page they can accommodate. Limit scrolling to one direction, unless secondary scrolling cannot be avoided. The page should lay out so that simple repeated scrolling in the same direction (axis) allows the user to experience all its content.

However some content (such as maps and other images) cannot be displayed without secondary scrolling. Do not use graphics for spacing. The popular mechanism of using a 1 pixel graphic for absolute positioning does not work on a variety of screens. When using background images make sure that content remains readable on the device. Page definition -Provide a short but descriptive page title. The device may use the page title as the default label for bookmarks. Again, space may be limited, so use it to help identify the content and not for other purposes. Do not use frames. Many mobile devices do not support frames. In addition, frames are recognized as being generally problematic (see http://www.w3.org/TR/xframes/#s_intro(http://www.w3.org/TR/xframes/#s_intro) for a discussion of problems with frames). Do not use tables unless the device is known to support them. Provide a text equivalent for every non-text element. Actually page definition requirements include many others, such as encoding, scripts, cookies, fonts, styles etc. The general principle: the simpler the better. User input - Provide pre-selected default values where possible. Keep the number of keystrokes to a minimum. Label all form controls appropriately and explicitly associate labels with form controls. Position labels so they lay out properly in relation to the form controls they refer to.