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.
- 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.
- 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>
ycharset
más simples:<!DOCTYPE html> ... <meta charset="UTF-8">
- 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.
- 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.
- Establece la altura y el ancho del diseño en
match_parent
. Si configuras la altura y el ancho del objetoWebView
enmatch_parent
, te asegurarás de que las vistas de tu app tengan el tamaño correcto. No se recomienda configurar la altura enwrap_content
, ya que genera un tamaño incorrecto. Del mismo modo, configurar el ancho del diseño enwrap_content
no es compatible y hace que tuWebView
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 objetoWebView
tenga la altura y el ancho establecidos enwrap_content
. - 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
- IU de Pixel Perfect en WebView
- Aprende sobre el diseño responsivo
- Imágenes con valores altos de DPI para densidades de píxeles variables
- Prácticas recomendadas sobre la Web móvil
- Acelera la Web