The principal objective of recently issued working draft guidelines on Mobile Web by the W3C is to improve the user experience of the Web when accessed from mobile devices. These recommendations are built on some of the same concepts described by the Device Independence principles. The Mobile Web guidelines have some presentations issues including input and output capacity, bandwidth and cost for end-users requirements, delivery context, etc.
This document covers best practices for delivering Web content to mobile devices. It is important that all recommendations refer to delivered content and not to the processes by which it is created, nor to the devices or user agents to which it is delivered. Readers are expected to be familiar with Web technologies such as Web servers and HTTP.
Mobile Web initiative
Because of the widespread use of World Wide Web technologies over the Internet, a variety of content and services are now easily accessible from desktop and notebook computing platforms. Web technologies have the potential to play the same role for mobile devices. However, the mobile Internet today suffers from many problems that make the Web unattractive for most subscribers. The intention of the Mobile Web Initiative is to make Web access from a mobile device as simple, easy and convenient as Web access from a desktop device. Aside from representing a further delivery channel 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 enabled devices. Extending the reach of the Web contributes to one of the primary W3C goals ---bringing the benefits of the Web to all people.
The mission of the Mobile Web Initiative Best Practices Working Group is to enable the reach of the Web to be easily extended onto mobile devices. It intends to specify and publish a set of technical best practices and to develop amobileOK trust mark for Web pages that support such practices and provide an appropriate user experience on mobile devices. The best practice guidelines are intended to improve the delivery and display of content to mobile and other portable small screen-devices.
Scope of recommendations
Most of differences between fixed and mobile user experience 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 of possible technical, ergonomic or economic implications for a mobile user include:
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 Web pages are laid out for presentation on desktop size displays, and exploit capabilities of desktop browsing software. Accessing such a Web page on a mobile device often results in a poor or unusable experience. Contributing factors include pages not being laid out as intended. Because of the limited screen size and the limited amount of material that is visible to the user, context and overview are lost.
It is particularly important in the mobile context to help the user create a mental image of the site. This can be assisted by adopting a consistent style and can be considerably diminished by an uneven style.
Mobile device input is often difficult when compared with use of a desktop device equipped with a keyboard. Mobile devices often have only a very limited keypad, with small keys, and there is frequently no pointing device. One of the difficulties of the mobile Web is that URLs are very difficult to type. Lengthy URLs and those that 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. This is because navigation between fields may not occur in the expected order and because of the difficulty in typing into the fields.
While many modern devices provide back buttons, some do not, and in some cases, where back functionality exists, users may not know how to invoke it. This means that it is often very hard to recover from errors, broken links and so on.
Cost and bandwidth
Mobile networks can be slow compared with fixed data connections and often have a measurably higher latency. This can lead to long retrieval times, especially for lengthy content and for content that requires a lot of navigation between pages. Mobile data transfer often costs money. The fact that mobile devices frequently support only limited types of content means that a user may follow a link and retrieve information that is unusable on their device. Web pages can contain content that the user has not specifically requested - especially advertising and large images. In the mobile world this extra material contributes to poor usability and may add considerably to the cost of the retrieval.
Mobile users typically have different interests to users of fixed or desktop devices. They are likely to have more immediate and goal-directed intentions than desktop Web users. Their intentions are often to find out specific pieces of information that are relevant to their context. An example of such a goal-directed application might be the user requiring specific information about schedules for 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 lengthy documents, and users will often only access such information from mobile devices as a last resort, because more convenient access is not available.
Developers of commercial Web sites should note that different commercial models are often at work when the Web is accessed from mobile devices as compared with desktop devices. For example, some mechanisms that are commonly used for presentation of advertising material do not work well on small devices and are therefore contrary to the Best Practice recommendations.
It is likely that application designers and service providers will wish to provide the best possible experience in the context in which their service has the most appeal. However, while services may be most appropriately experienced in one context or another, it is considered best practice to provide as reasonable experience as is possible given device limitations and not to exclude access from any particular class of device, except where this is necessary because of device limitations.
The widely varying characteristics of mobile devices can make it difficult for a Web site to provide an acceptable user experience across a significant range of devices. For example different devices support different markup features and different screen sizes may demand different sized images. Consequently, it is very common when delivering content to mobile devices to vary the details of the markup, format of images, image sizes, color depths, and so on to suit the characteristics of the device in question. The process of altering content to enhance the user experience on particular devices is referred to as Content Adaptation.
Providing variations on the user experience that are appropriate in different cases requires the content provider to know a significant amount about the characteristics of the device, the properties of the browser in use and the transparency of the network connection to the device. For simple sites that present an interface which is similar across a broad range of contexts the need for such information is diminished when compared with a sophisticated site that has an optimized navigation structure, presents different size images or carries out other adaptations to suit the particular delivery context. There are several methods by which a content provider can discover information about the delivery context, such as CC/PP, UAPROF, CSS Media Queries and various outputs of the Device Independence Working Group.
Since mobile devices have such a wide range of differences in their properties, the Best Practices Working Group has defined a Default Delivery Context:
Screen width: minimum of 120 pixels;
Markup language: XHTML Basic Profile;
Character encoding: UTF-8;
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 version, earliest: HTTP/1.0.
Mobile Web recommended principles
There are some general principles, as well as a few more concrete ones, that underlie delivery to mobile 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 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.