Prácticas recomendadas para aplicaciones web

El desarrollo de páginas web y aplicaciones web para dispositivos móviles representa un grupo diferente de desafíos en comparación con el desarrollo de una página web para el navegador web de escritorio típico. Consulta los siguientes recursos relacionados:

Con el objetivo de ayudarte a dar los primeros pasos, a continuación, te brindamos una lista de prácticas que debes seguir para ofrecer la aplicación web más efectiva para Android y otros dispositivos móviles.

Redirecciona los dispositivos a una versión exclusiva para dispositivos móviles de tu sitio web
Existen varias maneras de redireccionar las solicitudes a la versión para dispositivos móviles de tu sitio web mediante redireccionamientos del servidor. Con frecuencia, esto se logra "examinando" la string del usuario-agente que proporciona el navegador web. A fin de determinar si deseas entregar una versión para dispositivos móviles de tu sitio, debes buscar la string "mobile" en el usuario-agente.

Nota: Los dispositivos con pantalla grande de Android en los que se deben publicar sitios web en tamaño original (como las tablets) no incluyen la string "mobile" en el usuario-agente, pero el resto de la string es casi igual. Por lo tanto, es importante que publiques la versión para dispositivos móviles de tu sitio web en función de si la string "mobile" existe en el usuario-agente.

Usa DOCTYPE de HTML5 para dispositivos móviles
El lenguaje de marcación más común que se usa para los sitios web móviles es HTML5. Este estándar fomenta el desarrollo pensado para la tecnología móvil con el fin de garantizar que los sitios web funcionen bien en una variedad de dispositivos. A diferencia de los lenguajes web anteriores, HTML5 requiere declaraciones <DOCTYPE> y charset más simples:
```
    <!DOCTYPE html>
    ...
    <meta charset="UTF-8">
    
```
Utiliza los metadatos del viewport para cambiar correctamente el tamaño de tu página web
En el <head> de tu documento, debes proporcionar 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, el ajuste inicial de la página web y también la densidad de la pantalla de destino.

Por ejemplo:
```
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    
```
Si quieres obtener más información sobre cómo usar los metadatos del viewport para dispositivos con Android, consulta Cómo orientar pantallas desde aplicaciones web.
Usa un diseño lineal vertical
Evita la necesidad de que el usuario se desplace hacia la izquierda y la derecha mientras navega por la página web. El desplazamiento hacia arriba y abajo es más fácil para el usuario y simplifica tu página web.
Establece la altura y el ancho del diseño en match_parent
Si estableces la altura y el ancho del objeto WebView en match_parent, garantizas que las vistas de tu app tengan el tamaño correcto. No recomendamos establecer la altura en wrap_content porque genera un tamaño incorrecto y, en apps orientadas a Android 4.4 (API nivel 19) o versiones anteriores, se ignoran las metaetiquetas HTML de la vista del puerto para preservar la retrocompatibilidad. Del mismo modo, establecer 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 asegurarse de que ninguno de los objetos de diseño superiores de tu objeto WebView tengan la altura y el ancho establecidos en wrap_content.
Evita múltiples solicitudes de archivos
Debido a que los dispositivos móviles generalmente tienen una velocidad de conexión mucho más lenta que una computadora de escritorio, debes hacer que tus páginas web se carguen lo más rápido posible. Una manera de lograrlo es evitar la carga de archivos adicionales, como hojas de estilo y archivos de secuencias de comandos en el <head>. Un método mejor para optimizar la carga de páginas en dispositivos móviles es realizar un análisis móvil con PageSpeed Insights de Google. Si deseas optimizar el rendimiento de tu app, consulta el artículo Reglas de PageSpeed Insights.

A fin de acceder a una guía más completa sobre cómo crear aplicaciones web excelentes para dispositivos móviles, consulta las prácticas recomendadas sobre la Web móvil de W3C. Si quieres obtener más información sobre cómo mejorar la velocidad de tu sitio web (para dispositivos móviles y computadoras de escritorio), consulta los instructivos de Google sobre velocidad en el artículo Cómo lograr una Web más rápida.