Difference between revisions of "Mobile Web Best Practices 1.0"

 
(8 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%'|
|-
|-
  !colspan='3' style='text-align:left;font-size:xx-large;line-height:110%'| <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: http://www.w3.org/TR/mobile-bp/#d0e630</span>
| colspan='2' style='text-align:left;font-size:xx-large;vertical-align:top'|<!--
--><div style='font-size:medium;padding:0 .5em 0 0;float:left;'><!--
-->[[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>
 
|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>


!colspan='1' rowspan='3' 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}}]]
{{.clear}}
<div style='text-align:left'>
[[help:Context|'''Context''']]<hr/>
<small style='display:block'>[[help:Audience|audiences]]: </small>[[Job:Web designer]]
<br/><small style='padding-top:.25em;display:block'>[[help:Actvity|activities]]: </small>[[Industry:Web development]]
<br/><small style='padding-top:.25em;display:block'>[[help:Location|locations]]: </small>[[Web:Mobile Internet]]
<br/><small style='padding-top:.25em;display:block'>[[help:Size|sizes]]: </small>
<small style='display:block'>[[help:Time|times]]: </small>
<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:Standard]][[:Category:Standard|Standard]]
<br/><small>[[help:Status|status]]: </small>[[Category:Reviewed]][[Category:Recommended]][[:Category:Reviewed|Reviewed]], [[:Category:Recommended|Recommended]]
<br/><small>[[help:Notes|notes]]: </small>
<br/>
<br/><small>[[help:Identifier|identifiers]]: </small>[http://www.w3.org/TR/mobile-bp/ ]
<br/><small>[[help:Date|version]]: </small>29 July 2008
<br/><small>[[help:Author|author]]: </small>
<br/><small>[[help:Contributor|contributors]]: </small>
<br/><small>[[help:Editor|editor]]: </small>Jo Rabin, mTLD Mobile Top Level Domain (dotMobi), Charles McCathieNevile, Opera Software [Early Drafts]
<br/><small>[[help:Publisher|publisher]]: </small>http://www.w3.org
<br/><small>[[help:Rights|rights]]: </small>Copyright © 2008 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
</div>
|-
|-
|colspan='3' style='background-color:white;font-size:small;'|<!--
| colspan='2' style='vertical-align:top;font-size:small;padding-bottom:.25em'>|<!--
--><span style='display:block;padding:1.5em;font-size:medium'><!--
--><span style='float:right;margin:-1.25em .25em 0 1em;'><!--
-->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.</span><!--
--><nowiki>[</nowiki>[[Summary:{{PAGENAME}}|edit]]<nowiki>]</nowiki></span><!--
--><span style='padding-left:0em;font-variant:small-caps'>in bundle: </span><!--
 
--><div style='padding:.5em 1.5em  0 1.5em;font-size:medium'>{{Summary:{{PAGENAME}}}}</div><!--
--><div style='padding-top:.5em'><!--
--><span style='padding-left:0em;font-variant:small-caps'><small>in ''best practice'' bundle: </small></span><!--
-->[[{{NAMESPACE}}:Mobile Web Initiative]]<!--
-->[[{{NAMESPACE}}:Mobile Web Initiative]]<!--
--><span style='padding-left:.3em;font-variant:small-caps'>narrower than: </span><!--
--><span style='padding-left:.3em;font-variant:small-caps'><small>broader topics: </small></span><!--
-->[[Subject:LOC:Computer Applications|LOC:Web Applications]]<!--
-->[[Subject:LCSH:Computer Applications|Web Applications]]<!--
--><span style='padding-left:.3em;font-variant:small-caps'>broader than: </span><!--
--><span style='padding-left:.3em;font-variant:small-caps'><small>narrower topics: </small></span><!--
-->[[Subject:Nokia Operating System Applications|Nokia Operating System Applications]]
-->[[Subject:Nokia Operating System Applications|Nokia Operating System Applications]]<!--
--></div>
 
|-
|-
|colspan='2' style='text-align:left;background-color:beige;'|
| colspan='2' style='background-color:beige;vertical-align:top;'|<!--
===''"Rules of Thumb"'' Advice===
--><div style='text-align:left;'><!--
*[[Rule:Rule #272|<small style='float:right'>(Rule #272)</small>]]<!--
<span style='float:right;margin:0'><nowiki>[</nowiki>[[edit]]<nowiki>]</nowiki></span>
<div style='margin:0'><big>'''General ''"Rules of Thumb"'' Advice</big></div>
--><nowiki/>
===General ''"Rules of Thumb"'' Advice===
----
*[[Rule:Rule #272|<small style='float:right'>(Stated)</small>]]<!--
-->[THEMATIC_CONSISTENCY] Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.
-->[THEMATIC_CONSISTENCY] Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.
*[[Rule:Rule #273|<small style='float:right'>(Rule #273)</small>]]<!--
*[[Rule:Rule #272|<small style='float:right'>(Stated)</small>]]<!--
-->[CAPABILITIES] Exploit device capabilities to provide an enhanced user experience.
-->[CAPABILITIES] Exploit device capabilities to provide an enhanced user experience.
*[[Rule:Rule #274|<small style='float:right'>(Rule #274)</small>]]<!--
*[[Rule:Rule #272|<small style='float:right'>(Assumed)</small>]]<!--
-->[DEFICIENCIES] Take reasonable steps to work around deficient implementations.
-->[DEFICIENCIES] Take reasonable steps to work around deficient implementations.
*[[Rule:Rule #261|<small style='float:right'>(Rule #261)</small>]]<!--
*[[Rule:Rule #272|<small style='float:right'>(Discussing)</small>]]<!--
-->[TESTING] Carry out testing on actual devices as well as emulators.
-->[TESTING] Carry out testing on actual devices as well as emulators.
*[[Rule:Rule #109|<small style='float:right'>(Rule #109)</small>]]<!--
*[[Rule:Rule #273|<small style='float:right'>(Agreed)</small>]]<!--
-->[URIS] Keep the URIs of site entry points short.
-->[URIS] Keep the URIs of site entry points short.
*[[Rule:Rule #280|<small style='float:right'>(Rule #280)</small>]]<!--
*[[Rule:Rule #274|<small style='float:right'>(Tabled)</small>]]<!--
-->[NAVBAR] Provide only minimal navigation at the top of the page.
-->[NAVBAR] Provide only minimal navigation at the top of the page.
*[[Rule:Rule #282|<small style='float:right'>(Rule #282)</small>]]<!--
*[[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.
-->[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 #283|<small style='float:right'>(Rule #283)</small>]]<!--
*[[Rule:Rule #261|<small style='float:right'>(Withdrawn)</small>]]<!--
-->[NAVIGATION] Provide consistent navigation mechanisms.
-->[NAVIGATION] Provide consistent navigation mechanisms.
*[[Rule:Rule 301|<small style='float:right'>(Rule 301)</small>]]<!--
*[[Rule:Rule #109|<small style='float:right'>(Discussing)</small>]]<!--
-->[ACCESS_KEYS] Assign access keys to links in navigational menus and frequently accessed functionality.
-->[ACCESS_KEYS] Assign access keys to links in navigational menus and frequently accessed functionality.
*[[Rule:Rule 301|<small style='float:right'>(Rule 301)</small>]]<!--
*[[Rule:Rule #280|<small style='float:right'>(Presumed)</small>]]<!--
-->[LINK_TARGET_ID] Clearly identify the target of each link.
-->[LINK_TARGET_ID] Clearly identify the target of each link.
*[[Rule:Rule 301|<small style='float:right'>(Rule 301)</small>]]<!--
*[[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.
-->[LINK_TARGET_FORMAT] Note the target file's format unless you know the device supports it.
*[[Rule:Rule 301|<small style='float:right'>(Rule 301)</small>]]<!--
*[[Rule:Rule #283|<small style='float:right'>(Constructing)</small>]]<!--
-->[IMAGE_MAPS] Do not use image maps unless you know the device supports them effectively.
-->[IMAGE_MAPS] Do not use image maps unless you know the device supports them effectively.
*[[Rule:Rule 301|<small style='float:right'>(Rule 301)</small>]]<!--
*[[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.
-->[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'>(Rule 301)</small>]]<!--
*[[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.
-->[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'>(Rule 301)</small>]]<!--
*[[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.
-->[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'>(Rule 301)</small>]]<!--
*[[Rule:Rule 301|<small style='float:right'>(Re-proposed)</small>]]<!--
-->[EXTERNAL_RESOURCES] Keep the number of externally linked resources to a minimum.
-->[EXTERNAL_RESOURCES] Keep the number of externally linked resources to a minimum.
*[[Rule:Rule 301|<small style='float:right'>(Rule 301)</small>]]<!--
*[[Rule:Rule 301|<small style='float:right'>(Re-agreed)</small>]]<!--
-->[SUITABLE] Ensure that content is suitable for use in a mobile context.
-->[SUITABLE] Ensure that content is suitable for use in a mobile context.
*[[more|more...]]
*[[more|more...]]
<hr/>{{#formlink:form=Advice|link text=Add another "Rule of Thumb" '''''(from the same source only)'''''|link type=|query string=|query string parameters|target=|tooltip=|popup|new window}}
<!--
!colspan='1' style='background-color:lightblue;vertical-align:top;'|
<div style='margin-top:.75em'>
===Media links ===
<span style='float:right;'><nowiki>[</nowiki>[[edit]]<nowiki>]</nowiki></span>
{{#ask:[[Link:+]]|format=list|default=<small>No media items found</small><br/>}}
<div style=''><big>'''Conditional ''"Rules of Thumb"'' Advice'''</big></div>
{{#formlink:form=Link|link text=Add a link|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}
----
===See also===
{{#ask:[[Relation:+]]|format=list|default=<small>No other items found</small><br/>}}
{{#formlink:form=Relation|link text=Add a link|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}
<div style='background-color:yellow;color:teal;margin-top:1em'>
===Community Contacts===
{{#ask:[[Advice:+]]|format=list|default=<small>No contacts found</small><br/>}}
<hr/>{{#formlink:form=Expert|link text=Be a go-to expert<br/>about this practice|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}}
</div>
</div>
<div style='background-color:gray;color:darkblue;margin:0 0 1.5 0'>
--><nowiki/>
{{#formlink:form=Search|link text='''Search for more<br/>''Best Practices''<br/>like this one'''|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}
==='''Conditional ''"Rules of Thumb"'' Advice'''===
</div>
*
<div style='background-color:limegreen;color:teal;margin:1em 0 1em 0'>
===Group Blog===
{{#formlink:form=Blog|link text='''Start a group blog<br/>for this best practice'''|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}
</div>
<div style='background-color:sandybrown;color:white;margin-top:1em'>
===''Snap Poll''===
{{#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}}
{{#formlink:form=Poll|link text=Create a poll|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}
</div>
</div>
|-
|-
!colspan='4' style='background-color:white;color:teal;'|
<div style='text-align:center;font-size:medium;padding:1em;'>[[{{TALKPAGENAME}}|Community discussion & public comments happen on the "Talk" page]]</div>
|-
|colspan='2' style='background-color:cornsilk;color:teal;vertical-align:top;'|
===Case studies, datasets & surveys===
{{#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='2' style='background-color:coral;;vertical-align:top;'|
!colspan='2' style='background-color:coral;;vertical-align:top;'|
===Expert Opinions===
<div style='font-size:medium;font-weight:bold;text-align:center;padding:.5em 0 0 0'>Expert Opinions</div>
{{#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}}


|}__NOTOC____NOEDITSECTION__
|-
!colspan='2' style='background-color:white;color:teal;'|
<div style='text-align:center;font-size:medium;padding:1em;'>[[{{TALKPAGENAME}}|Community discussion & public comments happen on the "Talk" page]]</div>
 
|}__NOTOC__
{{#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.
}}
}}

Latest revision as of 14:44, 16 July 2015

W3c home.png
Best Practice:
Mobile Web Best Practices 1.0
Source: http://www.w3.org/TR/mobile-bp/#d0e630
Attached Media

{{#ask:Link:+|format=list|default=No media items found
}} {{#formlink:form=Link|link text=Attach multi-media
to this Best Practice|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}

See also

{{#ask:Relation:+|format=list|default=No other items found
}} {{#formlink:form=Relation|link text=Add an external link|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}

Search for similar

{{#formlink:form=Search|link text=Go to query form|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}

Group Blogs

{{#formlink:form=Blog|link text=Start a group blog
for this best practice|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}

Snap Polls
  • {{#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}}
Community Contacts

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


{{#formlink:form=Expert|link text=Are you a go-to resource
about this 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}}

[edit]
in best practice bundle: Mobile Web Initiativebroader topics: Web Applicationsnarrower topics: Nokia Operating System Applications

General "Rules of Thumb" Advice


  • (Stated)[THEMATIC_CONSISTENCY] Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.
  • (Stated)[CAPABILITIES] Exploit device capabilities to provide an enhanced user experience.
  • (Assumed)[DEFICIENCIES] Take reasonable steps to work around deficient implementations.
  • (Discussing)[TESTING] Carry out testing on actual devices as well as emulators.
  • (Agreed)[URIS] Keep the URIs of site entry points short.
  • (Tabled)[NAVBAR] Provide only minimal navigation at the top of the page.
  • (Voting)[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.
  • (Withdrawn)[NAVIGATION] Provide consistent navigation mechanisms.
  • (Discussing)[ACCESS_KEYS] Assign access keys to links in navigational menus and frequently accessed functionality.
  • (Presumed)[LINK_TARGET_ID] Clearly identify the target of each link.
  • (Finalized)[LINK_TARGET_FORMAT] Note the target file's format unless you know the device supports it.
  • (Constructing)[IMAGE_MAPS] Do not use image maps unless you know the device supports them effectively.
  • (Re-stated)[POP_UPS] Do not cause pop-ups or other windows to appear and do not change the current window without informing the user.
  • (Questioned)[AUTO_REFRESH] Do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it.
  • (Re-questioned)[REDIRECTION] Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes.
  • (Re-proposed)[EXTERNAL_RESOURCES] Keep the number of externally linked resources to a minimum.
  • (Re-agreed)[SUITABLE] Ensure that content is suitable for use in a mobile context.
  • more...

Conditional "Rules of Thumb" Advice

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

}}


{{#css: h1#firstHeading {display:none} li {line-height:115%;margin-top:.5em} }}