Difference between revisions of "Mobile Web Best Practices 1.0"

Line 49: Line 49:
<span style='padding-right:3em'>{{#ask:[[:{{FULLPAGENAME}}]][[in::<q>[[Bundle:+]]</q>]]|?in=|?=-|format=list|default=none}}</span>
<span style='padding-right:3em'>{{#ask:[[:{{FULLPAGENAME}}]][[in::<q>[[Bundle:+]]</q>]]|?in=|?=-|format=list|default=none}}</span>
|-
|-
!colspan='2' style='background-color:pink;'|
|colspan='2' style='text-align:left;background-color:pink;'|
===''"Rules of Thumb"'' Advice===
===''"Rules of Thumb"'' Advice===
{{#ask:[[Advice:+]]|format=list|default= <small>No advice items found for this Best Practice</small><br/>}}
*[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 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 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 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.
<hr/>{{#formlink:form=Advice|link text=Add another "Rule of Thumb"<br/>'''''(must be from the same source''''')|link type=|query string=|query string parameters|target=|tooltip=|popup|new window}}
<hr/>{{#formlink:form=Advice|link text=Add another "Rule of Thumb"<br/>'''''(must be from the same source''''')|link type=|query string=|query string parameters|target=|tooltip=|popup|new window}}
  !colspan='1' style='background-color:lightblue;'|
  !colspan='1' style='background-color:lightblue;vertical-align:top;'|
===''Media links'' ===
===''Media links'' ===
{{#ask:[[Link:+]]|format=list|default=<small>No media found for this practice</small><br/>}}
{{#ask:[[Link:+]]|format=list|default=<small>No media found for this practice</small><br/>}}

Revision as of 14:04, 25 March 2013

source::http://www.w3.org/TR/mobile-bp/#d0e630

[[.dc:description::This document specifies Best Practices for delivering Web content to mobile devices. The principal objective is to improve the user experience of the Web when accessed from such devices.

The 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.

It is primarily directed at creators, maintainers and operators of Web sites. Readers of this document are expected to be familiar with the creation of Web sites, and to have a general familiarity with the technologies involved, such as Web servers and HTTP. Readers are not expected to have a background in mobile-specific technologies.]]

W3c home.png
Best Practice:Mobile Web Best Practices 1.0

Source:{{#show:Mobile Web Best Practices 1.0|?source=|mainlabel=-|default= Unknown source!}}
Type - Best Practice.png
A Best Practice
Mobile Web Best Practices 1.0

{{#show::Mobile Web Best Practices 1.0|?.dc:description=|mainlabel=-|default= no description found}} narrower than: {{#ask:Mobile Web Best Practices 1.0skos:broader::+|?.skos:broader=|?=-|format=list|default= none}} broader than: {{#ask:Mobile Web Best Practices 1.0skos:broader::+|?.skos:narrower=|?=-|format=list|default= none}} in bundle: {{#ask:Mobile Web Best Practices 1.0[[in::Bundle:+]]|?in=|?=-|format=list|default=none}}

"Rules of Thumb" Advice

  • [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 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 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 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.

{{#formlink:form=Advice|link text=Add another "Rule of Thumb"
(must be from the same source)|link type=|query string=|query string parameters|target=|tooltip=|popup|new window}}

Media links

{{#ask:Link:+|format=list|default=No media found for this practice
}} {{#formlink:form=Citation|link text=Add a link|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}

Community Contacts

{{#ask:Advice:+|format=list|default=No contacts found
}}


{{#formlink:form=Expert|link text=Be an expert about this topic!|link type=|query string=|query string parameters|target=|tooltip=|popup|new window}}
{{#formlink:form=Practitioner|link text=Do you or your organization use this best practice ?|link type=|query string=|query string parameters|target=|tooltip=|popup|new window}}

Expert Opinions

{{#ask:Opinion:+|format=list|default=No opinions found
}}
nopreview

{{#set:

Article has average rating={{#averagerating:}}

}} {{#showcommentform:}}

?Has comment person ?Has comment date ?Has comment text ?Has comment rating ?Belongs to comment ?Comment was deleted#true,false ?Has comment editor ?Modification date ?Has attached article format=template template=CommentResult sort=Has comment date order=asc link=none limit=100

}}


{{#formlink:form=Expert|link text=Add an expert opinion about this best practice|link type=|query string=|query string parameters|target=|tooltip=|popup|new window}}

Case studies, datasets & surveys

{{#ask:Study:+|format=list|default=No case studies found
}} {{#formlink:form=Study|link text=Add a case study|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}


{{#ask:Dataset:+|format=list|default=No open data datasets found
}}

{{#formlink:form=Dataset|link text=Add a dataset|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}


{{#ask:Survey:+|format=list|default=No surveys found}}

{{#formlink:form=Survey|link text=Add a survey|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}

Citations

{{#ask:Citation:+|format=list|default=No citations known
}} {{#formlink:form=Citation|link text=Add a citation|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}

{{#css: h1#firstHeading {display:none} }}