Difference between revisions of "Mobile Web Best Practices 1.0"

(Created page with "{| style='width:100%;' |style='width:25%'| |style='width:25%'| |style='width:25%'| |style='width:25%'| source::http://www.w3.org/TR/mobile-bp/#d0e630 |- !colspan='3' ...")
 
 
(33 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%'| [[source::http://www.w3.org/TR/mobile-bp/#d0e630]]
|-
|-
  !colspan='3' style='text-align:left;font-size:xx-large'| <div style='font-size:medium;padding:1em;float:left;background-color:lightgray;height:4em;width:4em;margin-right:4px;'>Source<br/>Logo</div><span style='padding-bottom:6px;font-size:small;display:block;'>Best Practice:</span>''{{PAGENAME}}''<br/><br/><span style='font-size:x-small;color:gray;font-variant:small-caps'>Source:{{#ask:[[:{{FULLPAGENAME}}]][[Source::+]]|?Source=|?=-|format=list|default= <span style='color:black'>Unknown source!</span>}}</span>
| colspan='2' style='text-align:left;font-size:xx-large;vertical-align:top'|<!--
!colspan='1' rowspan='99' style='vertical-align:top;background-color:lightyellow'|<div style='font-size:medium;padding:1em;float:left;background-color:lightgray;height:4em;width:4em;margin-right:4px;'>Best Practice<br/>Logo</div><big style='font-family:cursive'>Best Practice</big><hr/>[[{{FULLPAGENAME}}|{{PAGENAME}}]]
--><div style='font-size:medium;padding:0 .5em 0 0;float:left;'><!--
{{.clear}}
-->[[File:W3c home.png|100px]]</div><!--
<div style='text-align:left'>
--><div style='font-size:small;'>Best Practice:</div><!--
[[help:Context|'''Context''']]<hr/>
--><span style='line-height:115%'>''{{PAGENAME}}''</span><!--
<small>[[help:Audience|audiences]]: </small>
--><br/><span style='font-size:x-small;color:gray;font-variant:small-caps'><!--
<br/><small>[[help:Industry|industries]]: </small>
-->Source: http://www.w3.org/TR/mobile-bp/#d0e630</span>
<br/><small>[[help:Location|locations]]: </small>
 
<br/><small>[[help:Job|jobs]]: </small>
|rowspan='4' style='text-align:center;vertical-align:top'|{{:Mediabox:Wiki_Ontology_1.0}}<!--
<br/><small>[[help:Size|sizes]]: </small>
--><div style='border:solid darkgray;padding:.25em;height:25em;overflow:scroll'>{{Infobox:{{PAGENAME}}}}</div>
<br/><small>[[help:Time|times]]: </small>
 
<br/>[[help:Infobox|'''Catalog Information''']]<hr/>
<small>[[help:Source|source]]: </small>
<br/><small>[[help:Tag|tags]]: </small>
<br/><small>[[help:Status|status]]: </small>
<br/><small>[[help:Notes|notes]]: </small>
<br/>
<br/><small>[[help:Identifier|identifiers]]: </small>
<br/><small>[[help:Date|version]]: </small>
<br/><small>[[help:Author|author]]: </small>
<br/><small>[[help:Contributor|contributors]]: </small>
<br/><small>[[help:Editor|editor]]: </small>
<br/><small>[[help:Publisher|publisher]]: </small>
<br/><small>[[help:Rights|rights]]: </small>
</div>
|-
|-
|colspan='3' style='background-color:lightgreen;font-size:small;'|<nowiki/>
| colspan='2' style='vertical-align:top;font-size:small;padding-bottom:.25em'>|<!--
<span style='display:block;padding-bottom:.5em;font-size:large'>{{#ask:[[:{{FULLPAGENAME}}]][[dc:description::+]]|?.dc:description=|?=-|format=list|default= no description found}}</span>
--><span style='float:right;margin:-1.25em .25em 0 1em;'><!--
<span style='font-variant:small-caps'>narrower than: </span>
--><nowiki>[</nowiki>[[Summary:{{PAGENAME}}|edit]]<nowiki>]</nowiki></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>
--><div style='padding:.5em 1.5em  0 1.5em;font-size:medium'>{{Summary:{{PAGENAME}}}}</div><!--
<span style='padding-right:3em'>{{#ask:[[:{{FULLPAGENAME}}]][[skos:broader::+]]|?.skos:narrower=|?=-|format=list|default= none}}</span>
--><div style='padding-top:.5em'><!--
<span style='font-variant:small-caps'>in bundle: </span>
--><span style='padding-left:0em;font-variant:small-caps'><small>in ''best practice'' bundle: </small></span><!--
<span style='padding-right:3em'>{{#ask:[[:{{FULLPAGENAME}}]][[in::<q>[[Bundle:+]]</q>]]|?in=|?=-|format=list|default=none}}</span>
-->[[{{NAMESPACE}}:Mobile Web Initiative]]<!--
--><span style='padding-left:.3em;font-variant:small-caps'><small>broader topics: </small></span><!--
-->[[Subject:LCSH:Computer Applications|Web Applications]]<!--
--><span style='padding-left:.3em;font-variant:small-caps'><small>narrower topics: </small></span><!--
-->[[Subject:Nokia Operating System Applications|Nokia Operating System Applications]]<!--
--></div>
 
|-
|-
!colspan='2' style='background-color:pink;'|
| colspan='2' style='background-color:beige;vertical-align:top;'|<!--
===''"Rules of Thumb"'' Advice===
--><div style='text-align:left;'><!--
{{#ask:[[Advice:+]]|format=list|default= <small>No advice items found for this Best Practice</small><br/>}}
<span style='float:right;margin:0'><nowiki>[</nowiki>[[edit]]<nowiki>]</nowiki></span>
<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}}
<div style='margin:0'><big>'''General ''"Rules of Thumb"'' Advice</big></div>
!colspan='1' style='background-color:lightblue;'|
--><nowiki/>
===''Media links'' ===
===General ''"Rules of Thumb"'' Advice===
{{#ask:[[Link:+]]|format=list|default=<small>No media found for this practice</small><br/>}}
----
{{#formlink:form=Citation|link text=Add a link|link type=button|query string=|query string parameters|target=|tooltip=|popup|new window}}
*[[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.
*[[Rule:Rule #272|<small style='float:right'>(Stated)</small>]]<!--
-->[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>
|-
|-
!colspan='1' style='background-color:yellow;color:teal;'|
!colspan='2' style='background-color:coral;;vertical-align:top;'|
===Community Contacts===
<div style='font-size:medium;font-weight:bold;text-align:center;padding:.5em 0 0 0'>Expert Opinions</div>
{{#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.
}}
}}

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} }}