docs/html/guide/webapps/best-practices.jd - LeafOS-Project/android_frameworks_base - Gitiles

 page.title=Best Practices for Web Apps
 @jd:body

 <div id="qv-wrapper">
 <div id="qv">

 <h2>See also</h2>
 <ul>
   <li><a href="https://developers.google.com/chrome/mobile/docs/webview/pixelperfect"
   >Pixel-Perfect UI in the WebView</a></li>
   <li><a href="http://www.html5rocks.com/en/mobile/responsivedesign/" class="external-link">Creating
   a Mobile-First Responsive Web Design</a></li>
   <li><a href="http://www.html5rocks.com/en/mobile/high-dpi/" class="external-link">High
   DPI Images for Variable Pixel Densities</a></li>
 </ul>

 </div>
 </div>


 <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>
   <p class="note"><strong>Note:</strong> Large screen Android-powered devices that should be served
 full-size web sites (such as tablets) do <em>not</em> include the "mobile" string in the user agent,
 while the rest of the user agent string is mostly the same. As such, it's important that you deliver
 the mobile version of your web site based on whether the "mobile" string exists in the user
 agent.</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>
 &lt;?xml version="1.0" encoding="UTF-8"?&gt;
 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
     "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"&gt;
 </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>
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
 </pre>
   <p>For more information about how to use viewport meta data for Android-powered devices, read <a
 href="{@docRoot}guide/webapps/targeting.html">Targeting Screens from Web Apps</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 &lt;head&gt; (or
 at the end of the &lt;body&gt;, 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>
	page.title=Best Practices for Web Apps
	@jd:body

	<div id="qv-wrapper">
	<div id="qv">

	<h2>See also</h2>
	<ul>
	<li><a href="https://developers.google.com/chrome/mobile/docs/webview/pixelperfect"
	>Pixel-Perfect UI in the WebView</a></li>
	<li><a href="http://www.html5rocks.com/en/mobile/responsivedesign/" class="external-link">Creating
	a Mobile-First Responsive Web Design</a></li>
	<li><a href="http://www.html5rocks.com/en/mobile/high-dpi/" class="external-link">High
	DPI Images for Variable Pixel Densities</a></li>
	</ul>

	</div>
	</div>



	<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>
	<p class="note"><strong>Note:</strong> Large screen Android-powered devices that should be served
	full-size web sites (such as tablets) do <em>not</em> include the "mobile" string in the user agent,
	while the rest of the user agent string is mostly the same. As such, it's important that you deliver
	the mobile version of your web site based on whether the "mobile" string exists in the user
	agent.</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/targeting.html">Targeting Screens from Web Apps</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>