diff options
Diffstat (limited to 'docs/html/guide/webapps/best-practices.jd')
| -rw-r--r-- | docs/html/guide/webapps/best-practices.jd | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/docs/html/guide/webapps/best-practices.jd b/docs/html/guide/webapps/best-practices.jd new file mode 100644 index 0000000..1bde5bf --- /dev/null +++ b/docs/html/guide/webapps/best-practices.jd @@ -0,0 +1,90 @@ +page.title=Best Practices for Web Apps +@jd:body + +<style> +.bold li { + font-weight:bold; +} +.bold li * { + font-weight:normal; +} +</style> + +<p>Developing web pages and web applications for mobile devices presents a different set of +challenges compared to developing a web page for the typical +desktop web browser. To help you get started, the following is a list of practices you should +follow in order to provide the most effective web application for Android and other mobile +devices.</p> + +<ol class="bold"> + +<li>Redirect mobile devices to a dedicated mobile version of your web site + <p>There are several ways you can redirect requests to the mobile version of your web site, using +server-side redirects. Most often, this is done by "sniffing" the User Agent +string provided by the web browser. To determine whether to serve a mobile version of your site, you +should simply look for the "mobile" string in the User Agent, which matches a wide variety of mobile +devices. If necessary, you can also identify the specific operating system in the User Agent string +(such as "Android 2.1").</p> +</li> + + +<li>Use a valid markup DOCTYPE that's appropriate for mobile devices + <p>The most common markup language used for mobile web sites is <a +href="http://www.w3.org/TR/2008/REC-xhtml-basic-20080729/">XHTML Basic</a>. This standard +ensures specific markup for your web site that works best on mobile devices. For instance, it does +not allow HTML frames or nested tables, which perform poorly on mobile devices. Along with the +DOCTYPE, be sure to declare the appropriate character encoding for the document (such as +UTF-8).</p> + <p>For example:</p> +<pre> +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" + "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> +</pre> + + <p>Also be sure that your web page markup is valid against the declared DOCTYPE. Use a +validator, such as the one available at +<a href="http://validator.w3.org/">http://validator.w3.org</a>.</p> +</li> + + +<li>Use viewport meta data to properly resize your web page + <p>In your document {@code <head>}, you should provide meta data that specifies how you +want the browser's viewport to render your web page. For example, your viewport meta data can +specify the height and width for the browser's viewport, the initial web page scale and even the +target screen density.</p> + <p>For example:</p> +<pre> +<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> +</pre> + <p>For more information about how to use viewport meta data for Android-powered devices, read <a +href="{@docRoot}guide/webapps/targetting.html">Targetting Android Devices</a>.</p> +</li> + + +<li>Avoid multiple file requests + <p>Because mobile devices typically have a connection speed far slower than a desktop +computer, you should make your web pages load as fast as possible. One way to speed it up is to +avoid loading extra files such as stylesheets and script files in the {@code +<head>}. Instead, provide your CSS and JavaScript directly in the <head> (or +at the end of the <body>, for scripts that you don't need until the page is loaded). +Alternatively, you should optimize the size and speed of your files by compressing them with tools +like <a href="http://code.google.com/p/minify/">Minify</a>.</p> +</li> + + +<li>Use a vertical linear layout + <p>Avoid the need for the user to scroll left and right while navigating your web +page. Scrolling up and down is easier for the user and makes your web page simpler.</p> +</li> + +</ol> + +<p>For a more thorough guide to creating great mobile web applications, see the W3C's <a +href="http://www.w3.org/TR/mobile-bp/">Mobile Web Best Practices</a>. For other guidance on +improving the speed of your web site (for mobile and desktop), see Yahoo!'s guide to <a +href="http://developer.yahoo.com/performance/index.html#rules">Exceptional Performance</a> and +Google's speed tutorials in <a href="http://code.google.com/speed/articles/">Let's make the web +faster</a>.</p> + + |