Mobile Web Best Practices & Standards Top Level Summary

DESIGN
Keep it Simple.
o Keep pages short and the content truncated, unless the user calls for it. o Tablet devices do not need to be limited in the same way that is needed for smaller mobile devices. o Do not use high-resolution graphics. o Use a single column layout. o Reduce the amount of clicks required to achieve an action. o Avoid scrolling if possible, and never require horizontal scrolling. o Utilize large and easy to press links and clickable objects. o Reengineer your copy to ensure readability on devices. o Avoid visual embellishments and large CSS background images or byteheavy info-graphics. o Exercise moderation with audio and video. Dont make it start downloading until requested.

Customize Your Site for the Mobile Device.

o Redirect your mobile users to a mobile version of the site. Provide a link that goes to either version of the website. o Use m. or /mobile within your site rather than hosting the content elsewhere. o Reduce excess images, text, and media for your mobile site. o Beware of Flash and other closed formats that arent compatible on some devices.

o Dont auto-play. o Because of the small screen size, the top 3 search results are even more critical. o Utilize the devices unique way of navigating bump, shake, swipe, orientation, etc. o Unify the content to be touch-driven: Create single, clickable objects.

Make it User-Centric.
o Remember that half of all search has location intent. o Exploit the devices unique capabilities to enhance the user experience.

PROGRAMMING
Character Encoding: If you do not specify the correct character encoding
for your pages your page may display strange characters when rendered on a mobile device. The recommendation is to use UTF-8 encoding for maximum compatibility.

XHTML MP 1.0 Doctype: For now, use XHTML MP 1.0 as the default
markup for mobile-specific pages.

MIME Types: For XHTML-MP and Basic, the recommended MIME type is
application/xhtml+xml. Unlike HTML, XHTML-MP shouldnt be served as text/html except in some very specific circumstances.

Page Titles: Avoid excessive <title> usage. Add a short descriptive

page title for easy identification while keeping in mind that the mobile device may truncate the title. Most devices use the page title as a default label for bookmarks, so a title helps the user identify content within bookmarks.

Stylesheets: Using CSS stylesheets helps with consistency and

centralizing styles, and lowers the overall page size.

Objects or Scripts: Skip scripts and embedded objects.

Auto Refresh: Omit creating periodically auto-refreshed pages unless you notify
the user and provide a way to stop it or configure the refresh interval.

Redirects: In order to decrease load time, if you need to use redirects, configure
the server to perform redirects using HTTP 3xx codes.

Caching: By specifying cache information on your mobile pages, you lower the
number of times devices download common resources. This especially helps with resources like a stylesheet or logo.

Structure: It is good practice for documents to show structure with headings and
sub-headings. This means coding in order and in a semantically correct fashion to ensure the code elements and the order in which they appear makes sense without manipulating the presentation.

Tables: Unless you know a device supports tables, shun using tables. Smaller tables
with two or three columns work on most devices, but its not a recommended approach.

Nested Tables: Instead of nested tables to control presentation, create well-formed

XHTML and control the presentation with stylesheets.

Access Keys: Associating an access key attribute with each link gives the user an
easy way to access the link using the devices keypad. They come in handy when used consistently across a site letting users jump quickly to their chosen sections without scrolling to find a link.

Tables for Layout: The Web design industry considers using tables for layout a bad
practice, particularly for mobile devices. Its more efficient to do page layouts with a style-based layout producing a layout that adapts well to the narrow screens. Tablebased layouts combine presentation and markup making development more difficult and adapting a page for other mediums almost impossible.

Frames: Instead of framesets, apply server side includes (SSI) or other techniques
for loading local content. Instead of using a frameset to hold a site within yours, use a link to the other site.

Content: Try to limit links to 10 links per page and add access keys to links
whenever possible, so that user can navigate with the keypad rather than having to scroll to the desired link.

Free Text Input Controls: Try to use text boxes and text areas as rarely as
possible. Cut the need for text entry by relying on radio buttons, select boxes and lists of links.

Default Input Mode: Automatically set the input mode (alphanumeric or numeric) of
the mobile devices keypad according to the input mask value.

Images: Edit images so theyre as small as possible in terms of pixel dimensions

unless you know that the device supports bigger images. Most mobile device screens are about 120 pixels wide. Keep images narrower wider than the screen size unless theres no better way to represent the information.

Declare Image Dimensions: Images such as bitmaps have an intrinsic pixel size.
Telling the browser its size in advance prevents the browser from having to rerender the page when it receives the image. Letting the server resize the image cuts down the data transferred and the time it takes for the client to process and scale the image. If the specified width and height attributes match the intrinsic size, then the client doesnt resize the image.

Image Maps: Omit image maps unless you know the requesting device supports
them.

Alt Text: Creating pages that are readable without images lets your users browse your
page in text-only mode. As a result, download times and costs go down. If the user has images turned on, textual descriptions help users assess the pages usefulness prior to the images arrival. Always provide alt text value for images.

Valid Markup: Use valid XHTML Basic or MP on mobile pages for maximum
efficiency.

Pop-up Windows: Even when devices support pop-up windows, changing the current
window confuses the user. Avoid the use of pop-up windows.

External Resources: Carefully consider the number of external resources you use,
limit them and keep each resources file size as small as possible without sacrificing usability across multiple devices.

FACTS

Dominance: Mobile phones will overtake PCs as the dominant web

access device worldwide by 2013.

Demographics: 48% of all Internet users come from just five

countries (Brazil, Russia, China, India and the U.S.).

Usage: In 2009, 23% of American adults accessed the internet on a

handheld device on a typical day and 38% had ever used the internet on a handheld.

Video accounts for 69% of mobile data traffic. Facebook is the single largest repository for user-generated content. Apple and Android platforms are gaining, while Windows Mobile, RIM
and Palm are in decline.

The Cloud: Users are expecting to have access to their items in the
cloud.

The Social Web: More and more users are accessing the social web
from a mobile device.

Skype: If it were a telecommunications carrier, it would be the largest

carrier in the world, with 521 million registered users.

Games are bigger than any other app. Real-time technology and location-based services are expected
to drive mobile retail.

Online ad sales are growing, but virtual goods, premium content and
other models are big business, especially for the mobile web.

Less Talk: The average iPhone user only spends 45% of his on-device
time making voice calls.

The Future: HTML 5 is replacing apps.

EXAMPLES

SOURCES
1. Smart Mobile Marketing via Search. A presentation at SES

Accelerator Conference on February 10, 2011 by Michael Martin, PMP, of Mobile Martin.
2. Mobile Web Developers Guide from .mobi. 3. Mobile Web Best Practice & WCAG 2.0. Presentation by Phil

Archer at the W3C Mobile Web Initiative Conference. February 2, 2010. [www.w3.org/TR/mobile-bp/]