91 lines
4.0 KiB
Plaintext
91 lines
4.0 KiB
Plaintext
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>
|
|
|
|
|