Save the date! Android Dev Summit is coming to Mountain View, CA on November 7-8, 2018.

Best practices for web apps

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. Refer to the following related resources:

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.

  1. Redirect mobile devices to a dedicated mobile version of your website

    There are several ways you can redirect requests to the mobile version of your website, 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 look for the "mobile" string in the User Agent.

  2. Note: Large screen Android-powered devices that should be served full-size websites (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 website based on whether the "mobile" string exists in the User Agent.

  3. Use HTML5 DOCTYPE for mobile devices

    The most common markup language used for mobile websites is HTML5. This standard encourages mobile-first development to ensure that websites work well on a variety of devices. Unlike previous web languages, HTML5 requires simpler <DOCTYPE> and charset declarations:

    <!DOCTYPE html>
    ...
    <meta charset="UTF-8">
    
  4. Use viewport metadata to properly resize your web page

    In your document <head>, you should provide metadata that specifies how you want the browser's viewport to render your web page. For example, your viewport metadata can specify the height and width for the browser's viewport, the initial web page scale, and even the target screen density.

    For example:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    

    For more information about how to use viewport metadata for Android-powered devices, read Targeting Screens from Web Apps.

  5. 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.

  6. Set the layout height and width to match_parent

    Setting your WebView object's height and width to match_parent ensures that your app's views are sized correctly. We discourage setting the height to wrap_content because it results in incorrect sizing and, in apps targeting Android 4.4 (API level 19) and lower, the HTML viewport meta tags are ignored to preserve backwards compatibility. Similarly, setting the layout width to wrap_content is not supported and causes your WebView to use the width of its parent instead. Because of this behavior, it is also important to make sure that none of your WebView object's parent layout objects have their height and width set to wrap_content.

  7. Avoid multiple file requests

    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 <head>. A better way that you can optimize page loading on mobile devices is by performing mobile analysis with Google’s PageSpeed Insights. If you want to optimize your app’s performance, see PageSpeed Insights Rules.

For a more thorough guide on creating great mobile web applications, see the W3C's Mobile Web Best Practices. For other guidance on improving the speed of your website (for mobile and desktop), see Google's speed tutorials in Make the Web Faster.