Android Web application development
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.
- Redirect mobile devices to a dedicated mobile version of your web site
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").
Note: Large screen Android-powered devices that should be served full-size web sites (such as tablets) do not 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.
- Use a valid markup DOCTYPE that's appropriate for mobile devices
The most common markup language used for mobile web sites is XHTML Basic. 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).
Also be sure that your web page markup is valid against the declared DOCTYPE. Use a validator, such as the one available at .
- Use viewport meta data to properly resize your web page
In your document , 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.
- Avoid multiple file requests
- Use a vertical linear layout
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.