Spare the network
Use appropriate Web protocol features to reduce network bottlenecks and latency.
– Cache AJAX data
– Minimize external resources, applications and data size
– 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
– 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
There is also a great Mobile Web “Cheat Sheet”
List of Best Practice Statements
- THEMATIC_CONSISTENCY Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.
- CAPABILITIES Exploit device capabilities to provide an enhanced user experience.
- DEFICIENCIES Take reasonable steps to work around deficient implementations.
- TESTING Carry out testing on actual devices as well as emulators.
- URLS Keep the URLs of site entry points short.
- NAVBAR Provide only minimal navigation at the top of the page.
- BALANCE 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.
- NAVIGATION Provide consistent navigation mechanisms.
- ACCESS_KEYS Assign access keys to links in navigational menus and frequently accessed functionality.
- LINK_TARGET_ID Clearly identify the target of each link.
- LINK_TARGET_FORMAT Note the target file’s format unless you know the device supports it.
- IMAGE_MAPS Do not use image maps unless you know the device supports them effectively.
- POP_UPS Do not cause pop-ups or other windows to appear and do not change the current window without informing the user.
- AUTO_REFRESH Do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it.
- REDIRECTION Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes.
- EXTERNAL_RESOURCES Keep the number of externally linked resources to a minimum.
- SUITABLE Ensure that content is suitable for use in a mobile context.
- CLARITY Use clear and simple language.
- LIMITED Limit content to what the user has requested.
- PAGE_SIZE_USABLE Divide pages into usable but limited size portions.
- PAGE_SIZE_LIMIT Ensure that the overall size of page is appropriate to the memory limitations of the device.
- SCROLLING Limit scrolling to one direction, unless secondary scrolling cannot be avoided.
- CENTRAL_MEANING Ensure that material that is central to the meaning of the page precedes material that is not.
- GRAPHICS_FOR_SPACING Do not use graphics for spacing.
- LARGE_GRAPHICS Do not use images that cannot be rendered by the device. Avoid large or high resolution images except where critical information would otherwise be lost.
- USE_OF_COLOR Ensure that information conveyed with color is also available without color.
- COLOR_CONTRAST Ensure that foreground and background color combinations provide sufficient contrast.
- BACKGROUND_IMAGE_READABILITY When using background images make sure that content remains readable on the device.
- PAGE_TITLE Provide a short but descriptive page title.
- NO_FRAMES Do not use frames.
- STRUCTURE Use features of the markup language to indicate logical document structure.
- TABLES_SUPPORT Do not use tables unless the device is known to support them.
- TABLES_NESTED Do not use nested tables.
- TABLES_LAYOUT Do not use tables for layout.
- TABLES_ALTERNATIVES Where possible, use an alternative to tabular presentation.
- NON-TEXT_ALTERNATIVES Provide a text equivalent for every non-text element.
- OBJECTS_OR_SCRIPT Do not rely on embedded objects or script.
- IMAGES_SPECIFY_SIZE Specify the size of images in markup, if they have an intrinsic size.
- IMAGES_RESIZING Resize images at the server, if they have an intrinsic size.
- VALID_MARKUP Create documents that validate to published formal grammars.
- MEASURES Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values.
- STYLE_SHEETS_USE Use style sheets to control layout and presentation, unless the device is known not to support them.
- STYLE_SHEETS_SUPPORT Organize documents so that if necessary they may be read without style sheets.
- STYLE_SHEETS_SIZE Keep style sheets small.
- MINIMIZE Use terse, efficient markup.
- CONTENT_FORMAT_SUPPORT Send content in a format that is known to be supported by the device.
- CONTENT_FORMAT_PREFERRED Where possible, send content in a preferred format.
- CHARACTER_ENCODING_SUPPORT Ensure that content is encoded using a character encoding that is known to be supported by the target device.
- CHARACTER_ENCODING_USE Indicate in the response the character encoding being used.
- ERROR_MESSAGES Provide informative error messages and a means of navigating away from an error message back to useful information.
- COOKIES Do not rely on cookies being available.
- CACHING Provide caching information in HTTP responses.
- FONTS Do not rely on support of font related styling.
- MINIMIZE_KEYSTROKES Keep the number of keystrokes to a minimum.
- AVOID_FREE_TEXT Avoid free text entry where possible.
- PROVIDE_DEFAULTS Provide pre-selected default values where possible.
- DEFAULT_INPUT_MODE Specify a default text entry mode, language and/or input format, if the target device is known to support it.
- TAB_ORDER Create a logical order through links, form controls and objects.
- CONTROL_LABELLING Label all form controls appropriately and explicitly associate labels with form controls.
- CONTROL_POSITION Position labels so they lay out properly in relation to the form controls they refer to.