21 Mobile Web Best Practices 1.0 (2 Requirements (2.7 Advantages (:check:…
21 Mobile Web Best Practices 1.0
list of best practice
[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.
[URIS] Keep the URIs 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 sty
:check: illustrative :red_cross: exhaustive
2.1 Presentation Issues
limited screen size & limited material visible to user -> lay out unusable
:check: scroll to fix limited size
:check: mental image of the site -> important -> consistent style
:check: no pointing device
:red_cross: type URI
:red_cross: fill in forms -> navigation between fields & typing into the field
:red_cross: back buttons -> not have & user not know how to invoke
2.3 Bandwidth and Cost
:red_cross: slow network
:red_cross: latency -> long retrieval times
:red_cross: mobile data costs money -> follow a link but return when unusable
:red_cross: size & not requested content -> large image & ads -> scroll
2.4 User Goals
:check: have more immediate and goal-directed intentions
:check: find out specific pieces of information
:red_cross: less interested in lengthy documents & browser
:red_cross: pop-ups, pop-unders and large banners
2.6 Device Limitations
:red_cross: Mobile browsers often do not support scripting or plug-ins
:red_cross: rendering Web pages & power & CPU
:red_cross: limited memory available
:check: location awareness
:check: one-handed operation
:check: always on
:check: universal alerting device
3 Delivery Context
3.1 One Web