Prácticas recomendadas para las aplicaciones web

Desarrollar páginas web y aplicaciones para dispositivos móviles presenta desafíos diferentes en comparación con desarrollar una página web para navegadores web de computadoras. Las siguientes prácticas pueden ayudarte a proporcionar la aplicación web más eficaz para Android y otros dispositivos móviles.

  1. Redirecciona los dispositivos móviles a una versión móvil dedicada de tu sitio web. Existen varias formas de hacerlo con redireccionamientos del servidor. Un método común es “sniff” la string de usuario-agente que proporciona el navegador web. A fin de determinar si entregar una versión para dispositivos móviles de tu sitio, busca la string "mobile" en el usuario-agente.
  2. Usa HTML5 para dispositivos móviles. HTML5 es el lenguaje de marcación más común para los sitios web móviles. Este estándar fomenta el desarrollo mobile first para garantizar que los sitios web funcionen en una variedad de dispositivos. A diferencia de los lenguajes web anteriores, HTML5 usa declaraciones <DOCTYPE> y charset más simples: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Usa metadatos de viewport para cambiar correctamente el tamaño de tu página web. En el documento <head>, proporciona metadatos que especifiquen cómo quieres que el viewport del navegador renderice la página web. Por ejemplo, los metadatos de tu viewport pueden especificar la altura y el ancho del viewport del navegador, la escala inicial de la página y la densidad de la pantalla de destino.

    En el siguiente ejemplo, se muestra cómo configurar los metadatos del viewport:

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

    Para obtener más información sobre el uso de los metadatos del viewport para dispositivos con Android, consulta Cómo brindar compatibilidad con diferentes pantallas en aplicaciones web.

  4. Usa un diseño lineal vertical. Evita la necesidad de que el usuario se desplace hacia la izquierda y la derecha mientras navega por tu página. Desplazarse hacia arriba y hacia abajo es más fácil para el usuario y simplifica tu página.
  5. Establece la altura y el ancho del diseño en match_parent. Si configuras la altura y el ancho del objeto WebView en match_parent, te asegurarás de que las vistas de tu app tengan el tamaño correcto. No se recomienda configurar la altura en wrap_content, ya que genera un tamaño incorrecto. Del mismo modo, configurar el ancho del diseño en wrap_content no es compatible y hace que tu WebView use el ancho de su elemento superior. Debido a este comportamiento, también es importante asegurarte de que ninguno de los objetos de diseño superiores de tu objeto WebView tenga la altura y el ancho establecidos en wrap_content.
  6. Evita varias solicitudes de archivos. Dado que los dispositivos móviles suelen tener una velocidad de conexión más lenta que la de las computadoras de escritorio, haz que la página se cargue lo más rápido posible. Una forma de acelerar el proceso es evitar la carga de archivos adicionales, como hojas de estilo y archivos de secuencias de comandos, en el <head>. Además, puedes realizar análisis móviles con PageSpeed Insights de Google para obtener sugerencias de optimización detalladas específicas para tu app.

Recursos adicionales