|
|
| (22 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| {| style='width:100%;' | | {| style='width:100%;;border-collapse:collapse;border-color:white;' |
| |style='width:25%'| | | |style='width:25%'| |
| | |style='widt:49%'| |
| |style='width:25%'| | | |style='width:25%'| |
| |style='width:25%'| | | |- |
| |style='width:25%'|<span style='display:none'> | | | colspan='2' style='text-align:left;font-size:xx-large;vertical-align:top'|<!-- |
| [[source::http://www.w3.org/TR/mobile-bp/#d0e630]]
| | --><div style='font-size:medium;padding:0 .5em 0 0;float:left;'><!-- |
| [[.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.
| | -->[[File:W3c home.png|100px]]</div><!-- |
| | --><div style='font-size:small;'>Best Practice:</div><!-- |
| | --><span style='line-height:115%'>''{{PAGENAME}}''</span><!-- |
| | --><br/><span style='font-size:x-small;color:gray;font-variant:small-caps'><!-- |
| | -->Source: http://www.w3.org/TR/mobile-bp/#d0e630</span> |
|
| |
|
| 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.
| | |rowspan='4' style='text-align:center;vertical-align:top'|{{:Mediabox:Wiki_Ontology_1.0}}<!-- |
| | --><div style='border:solid darkgray;padding:.25em;height:25em;overflow:scroll'>{{Infobox:{{PAGENAME}}}}</div> |
|
| |
|
| 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.]]
| |
| </span>
| |
| |- | | |- |
| !colspan='3' style='text-align:left;font-size:xx-large'| <div style='font-size:medium;padding:.2em 1em auto .1em;float:left;margin-right:12px;'>[[File:W3c home.png]]</div><span style='padding-bottom:6px;font-size:small;display:block;'>Best Practice:</span>''{{PAGENAME}}''<br/><span style='font-size:x-small;color:gray;font-variant:small-caps'>Source:{{#show:{{FULLPAGENAME}}|?source=|mainlabel=-|default= <span style='color:black'>Unknown source!</span>}}</span>
| | | colspan='2' style='vertical-align:top;font-size:small;padding-bottom:.25em'>|<!-- |
| | --><span style='float:right;margin:-1.25em .25em 0 1em;'><!-- |
| | --><nowiki>[</nowiki>[[Summary:{{PAGENAME}}|edit]]<nowiki>]</nowiki></span><!-- |
|
| |
|
| !colspan='1' rowspan='99' style=' vertical-align: top; background- color: lightyellow' |<div style=' font-size:medium;padding :1em;float:left;margin- right: 4px;'> [[File:Type - Best Practice.png|50px]]</div>< big style='font- family: cursive'> A Best Practice</ big>< hr/>[[{{ FULLPAGENAME}}|{{PAGENAME}}]] | | --><div style='padding:.5em 1.5em 0 1.5em;font-size:medium'>{{Summary:{{PAGENAME}}}}</div><!-- |
| {{.clear}}
| | --><div style='padding- top: .5em'> <!-- |
| <div style='text-align:left'> | | --><span style='padding-left:0em;font-variant:small-caps'><small>in ''best practice'' bundle: </small></span><!-- |
| [[help:Context|'''Context''']]<hr/> | | -->[[{{NAMESPACE}}:Mobile Web Initiative]]<!-- |
| <small style='display:block'>[[help:Audience|audiences]]: </small>[[Job:Web designer]] | | --><span style='padding-left:.3em;font-variant:small-caps'><small>broader topics: </small></span><!-- |
| <br/><small style='padding-top:.25em;display:block'>[[help:Industry|industries]]: </small>[[Industry:Web development]] | | -->[[Subject:LCSH:Computer Applications|Web Applications]]<!-- |
| <br/><small style='padding-top:.25em;display:block'>[[help:Location|locations]]: </small>[[Web:Mobile Internet]] | | --><span style='padding-left:.3em;font-variant:small-caps'><small>narrower topics: </small></span><!-- |
| <br/><small style='padding-top:.25em;display:block'>[[help:Size|sizes]]: </small>
| | -->[[Subject:Nokia Operating System Applications|Nokia Operating System Applications]]<!-- |
| <small style='display:block'>[[help:Time|times]]: </small> | | --></div> |
| <br/>[[help:Infobox|'''Catalog Information''']]<hr/>
| | |
| <small>[[help:Source|source]]: </small>[http://www.w3.org/TR/mobile-bp/#d0e630 Web document]
| | |- |
| <br/><small>[[help:Tag|tags]]: </small>[[Category:Standardized]] | | | colspan='2' style='background-color:beige;vertical-align:top;'|<!-- |
| <br/><small>[[help:Status|status]]: </small>[[Category:Recommended]]
| | --><div style='text-align:left;'><!-- |
| <br/><small>[[help:Notes|notes]]: </small>
| | <span style='float:right;margin:0'><nowiki>[</nowiki>[[edit]]<nowiki>]</nowiki></span> |
| <br/> | | <div style='margin:0'><big>'''General ''"Rules of Thumb"'' Advice</big></div> |
| <br/><small>[[help:Identifier|identifiers]]: </small>[http://www.w3.org/TR/mobile-bp/ ] | | --><nowiki/> |
| <br/><small>[[help:Date|version]]: </small>29 July 2008 | | ===General ''"Rules of Thumb"'' Advice=== |
| <br/><small>[[help:Author|author]]: </small> | | ---- |
| <br/><small>[[help:Contributor|contributors]]: </small> | | *[[Rule:Rule #272|<small style='float:right'>(Stated)</small>]]<!-- |
| <br/><small>[[help:Editor|editor]]: </small>Jo Rabin, mTLD Mobile Top Level Domain (dotMobi), Charles McCathieNevile, Opera Software [Early Drafts] | | -->[THEMATIC_CONSISTENCY] Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices. |
| <br/><small>[[help:Publisher|publisher]]: </small>http://www.w3.org | | *[[Rule:Rule #272|<small style='float:right'>(Stated)</small>]]<!-- |
| <br/><small>[[help:Rights|rights]]: </small>Copyright © 2008 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply. | | -->[CAPABILITIES] Exploit device capabilities to provide an enhanced user experience. |
| | *[[Rule:Rule #272|<small style='float:right'>(Assumed)</small>]]<!-- |
| | -->[DEFICIENCIES] Take reasonable steps to work around deficient implementations. |
| | *[[Rule:Rule #272|<small style='float:right'>(Discussing)</small>]]<!-- |
| | -->[TESTING] Carry out testing on actual devices as well as emulators. |
| | *[[Rule:Rule #273|<small style='float:right'>(Agreed)</small>]]<!-- |
| | -->[URIS] Keep the URIs of site entry points short. |
| | *[[Rule:Rule #274|<small style='float:right'>(Tabled)</small>]]<!-- |
| | -->[NAVBAR] Provide only minimal navigation at the top of the page. |
| | *[[Rule:Rule #274|<small style='float:right'>(Voting)</small>]]<!-- |
| | -->[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. |
| | *[[Rule:Rule #261|<small style='float:right'>(Withdrawn)</small>]]<!-- |
| | -->[NAVIGATION] Provide consistent navigation mechanisms. |
| | *[[Rule:Rule #109|<small style='float:right'>(Discussing)</small>]]<!-- |
| | -->[ACCESS_KEYS] Assign access keys to links in navigational menus and frequently accessed functionality. |
| | *[[Rule:Rule #280|<small style='float:right'>(Presumed)</small>]]<!-- |
| | -->[LINK_TARGET_ID] Clearly identify the target of each link. |
| | *[[Rule:Rule #282|<small style='float:right'>(Finalized)</small>]]<!-- |
| | -->[LINK_TARGET_FORMAT] Note the target file's format unless you know the device supports it. |
| | *[[Rule:Rule #283|<small style='float:right'>(Constructing)</small>]]<!-- |
| | -->[IMAGE_MAPS] Do not use image maps unless you know the device supports them effectively. |
| | *[[Rule:Rule #283|<small style='float:right'>(Re-stated)</small>]]<!-- |
| | -->[POP_UPS] Do not cause pop-ups or other windows to appear and do not change the current window without informing the user. |
| | *[[Rule:Rule 301|<small style='float:right'>(Questioned)</small>]]<!-- |
| | -->[AUTO_REFRESH] Do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it. |
| | *[[Rule:Rule 301|<small style='float:right'>(Re-questioned)</small>]]<!-- |
| | -->[REDIRECTION] Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes. |
| | *[[Rule:Rule 301|<small style='float:right'>(Re-proposed)</small>]]<!-- |
| | -->[EXTERNAL_RESOURCES] Keep the number of externally linked resources to a minimum. |
| | *[[Rule:Rule 301|<small style='float:right'>(Re-agreed)</small>]]<!-- |
| | -->[SUITABLE] Ensure that content is suitable for use in a mobile context. |
| | *[[more|more...]] |
| | <!-- |
| | <div style='margin-top:.75em'> |
| | <span style='float:right;'><nowiki>[</nowiki>[[edit]]<nowiki>]</nowiki></span> |
| | <div style=''><big>'''Conditional ''"Rules of Thumb"'' Advice'''</big></div> |
| | ---- |
| | </div> |
| | --><nowiki/> |
| | ==='''Conditional ''"Rules of Thumb"'' Advice'''=== |
| | * |
| </div> | | </div> |
| |- | | |- |
| |colspan='3' style='background-color:lightgreen;font-size:small;'|<nowiki/>
| | !colspan='2' style='background-color:coral;;vertical-align:top;'| |
| <span style='display:block;padding-bottom:.5em;font-size:large'>{{#show::{{FULLPAGENAME}}|?.dc:description=|mainlabel=-|default= no description found}}</span> | | <div style='font-size:medium;font-weight:bold;text-align:center;padding:.5em 0 0 0'>Expert Opinions</div> |
| <span style='font-variant:small-caps'>narrower than: </span>
| |
| <span style='padding-right:3em'>{{#ask:[[:{{FULLPAGENAME}}]][[skos:broader::+]]|?.skos:broader=|?=-|format=list|default= none}}</span>
| |
| <span style='font-variant:small-caps'>broader than: </span>
| |
| <span style='padding-right:3em'>{{#ask:[[:{{FULLPAGENAME}}]][[skos:broader::+]]|?.skos:narrower=|?=-|format=list|default= none}}</span>[[Subject:LOC:Computer Applications|LOC:Computer Applications]]
| |
| <span style='font-variant:small-caps'>in bundle: </span>[[{{NAMEPACE}}:Mobile Web Initiative]]
| |
| <span style='padding-right:3em'>{{#ask:[[:{{FULLPAGENAME}}]][[in::<q>[[Bundle:+]]</q>]]|?in=|?=-|format=list|default=none}}</span>
| |
| |-
| |
| |colspan='2' style='text-align:left;background-color:pink;'|
| |
| ===''"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.
| |
| <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;vertical-align:top;'|
| |
| ===''Media links'' ===
| |
| {{#ask:[[Link:+]]|format=list|default=<small>No media found</small><br/>}}
| |
| {{#formlink:form=Citation|link text=Add a link|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}
| |
| |-
| |
| !colspan='1' style='background-color:yellow;color:teal;'|
| |
| ===Community Contacts===
| |
| {{#ask:[[Advice:+]]|format=list|default=<small>No contacts found</small><br/>}}
| |
| <hr/>{{#formlink:form=Expert|link text=Be an expert about this topic!|link type=|query string=|query string parameters|target=|tooltip=|popup|new window}}<hr/>{{#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}}
| |
| !colspan='2' style='background-color:coral;'|
| |
| ===Expert Opinions===
| |
| {{#ask:[[Opinion:+]]|format=list|default=<small>No opinions found</small><br/>}}{{comments|show=True}} | | {{#ask:[[Opinion:+]]|format=list|default=<small>No opinions found</small><br/>}}{{comments|show=True}} |
| <hr/>{{#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}}
| | |
| |-
| |
| !colspan='3' style='background-color:white;color:teal;'|
| |
| <div style='text-align:center;'>[[{{TALKPAGENAME}}|Community discussion happens on the Talk page!]]</div>
| |
| |- | | |- |
| !colspan='2' style='background-color:cornsilk;color:teal;vertical-align:top;'|
| | !colspan='2' style='background-color:white;color:teal;'| |
| ===Case studies, datasets & surveys=== | | <div style='text-align:center;font-size:medium;padding:1em;'>[[{{TALKPAGENAME}}|Community discussion & public comments happen on the "Talk" page]]</div> |
| {{#ask:[[Study:+]]|format=list|default=<small>No case studies found</small><br/>}}
| |
| {{#formlink:form=Study|link text=Add a case study|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}
| |
| <hr/> {{#ask:[[Dataset:+]]|format=list|default=<small>No open data datasets found</small><br/>}}
| |
| {{#formlink:form=Dataset|link text=Add a dataset|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}} | |
| <hr/> {{#ask:[[Survey:+]]|format=list|default=<small>No surveys found</small>}}
| |
| <span style='float:right'>{{#formlink:form=Survey|link text=Add a survey|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}</span>
| |
|
| |
|
| !colspan='1' style='background-color:lightblue;vertical-align:top'|
| | |}__NOTOC__ |
| ===Citations===
| |
| {{#ask:[[Citation:+]]|format=list|default=<small>No citations known</small><br/>}}
| |
| {{#formlink:form=Citation|link text=Add a citation|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}
| |
| |}__NOTOC____NOEDITSECTION__ | |
| {{#css: | | {{#css: |
| h1#firstHeading {display:none} | | h1#firstHeading {display:none} |
| | li {line-height:115%;margin-top:.5em} |
| | }} |
| | {{#seo: |
| | |title=mobile web best practices | bestpracticeswiki.net |
| | |keywords=best practices, mobile web, software design, mobile device applications |
| | |description=Best Practices for delivering Web content to mobile devices. |
| }} | | }} |
