Desarrollo Web Móvil

Los dispositivos móviles tienen características de hardware bastante diferentes comparados con los ordenadores de escritorio/sobremesa o portátiles. Obviamente sus pantallas son usualmente más pequeñas, pero además habitualmente también cambian automáticamente su orientación, entre retrato o paisaje, según el usuario rota el dispositivo. Por lo general tienen pantallas táctiles para la entrada de datos por parte del usuario. APIs como la geolocalización o la orientación, o bien no son soportadas en ordenadores de escritorio o son mucho menos útiles, y estas APIs ofrecen a los usuarios móviles nuevas formas de interactuar con su sitio web.

Diseño web adaptable es un término para un conjunto de técnicas que permiten a su sitio web adaptar su diseño según el entorno de visualización — lo más evidente, el tamaño y orientación de la pantalla — cambie. Incluye técnicas como:

• diseño CSS fluido, para hacer que la página se adapte sin problemas según cambie el tamaño de la ventana del navegador y
• el uso de media queries para incluir condicionalmente reglas CSS adecuadas para el ancho y alto de la pantalla.

La etiqueta meta viewport ordena al navegador que muestre su sitio web a la escala adecuada para el dispositivo del usuario.

Para usar una pantalla táctil necesitará trabajar con eventos DOM Touch. No tendrá la posibilidad de usar la pseudo-clase CSS :hover y tendrá que diseñar elementos interactivos como botones para respetar el hecho de que los dedos son más gordos que el puntero del ratón. Vea este artículo sobre diseñar para pantallas táctiles.

Puede usar el media query -moz-touch-enabled para cargar una CSS diferente en un dispositivo con pantalla táctil.

Para ayudar a los usuarios cuyos dispositivos tienen un bajo o caro ancho de banda, puede optimizar las imágenes cargando sólo aquellas apropiadas para el tamaño y resolución del dispositivo. Es algo que se hace en la CSS consultando la altura de pantalla, anchura y proporción de píxeles.

También puede hacer uso de propiedades CSS para implementar efectos visuales como gradientes y sombras sin utilizar imágenes para ello.

Finalmente, puede aprovechar las nuevas posibilidades ofrecidas por los dispositivos móviles, como la orientación y la geolocalización.

Para crear sitios web que funcionen aceptablemente en diferentes navegadores móviles:

• Intente evitar características específicas de un navegador, como las propiedades CSS prefijadas por el proveedor (vendor-prefixed).
• Si necesita utilizar estas características, compruebe si otros navegadores implementan sus propias versiones e inclúyalas igualmente.
• Para navegadores que no soportan estas características, ofrezca una alternativa aceptable.

Por ejemplo, si establece un gradiente como fondo para cierto texto usando una propiedad prefijada por el proveedor (vendor-prefixed) como -webkit-linear-gradient, es mejor incluir las otras versiones prefijadas de la propiedad linear-gradient (gradiente linear). Si no lo hace, asegúrese al menos de que el fondo por defecto contrasta con el texto. Así, la página será al menos usable en un navegador al que no esté dirigida su regla linear-gradient.

Vea esta lista de propiedades específicas para Gecko, esta lista de propiedades específicas para WebKit y la tabla de propiedades específicas de proveedores (vendor-specific) de Peter Beverloo.

Usar herramientas como CSS Lint puede ayudar a encontrar problemas como este en el código y preprocesadores como SASS y LESS pueden ser de ayuda para crear código compatible con diferentes navegadores.

Es preferible para los sitios web usar las técnicas enumeradas anteriormente con el objetivo de detectar características específicas del dispositivo, como el tamaño de pantalla y las pantallas táctiles, y adaptarse a ellas adecuadamente. Pero a veces esto no es práctico y los sitios web recurren a analizar la cadena de agente de usuario del navegador (user agent) para intentar distinguir entre ordenadores de escritorio, tabletas y teléfonos, y servir diferente contenido a cada tipo de dispositivo.

Si hace esto, asegúrese de que su algoritmo es correcto y no está sirviendo el tipo equivocado de contenido a un dispositivo porque no entiende la cadena de un agente de usuario particular. Vea esta guía para usar la cadena de agente de usuario para determinar el tipo de dispositivo.

Compruebe su sitio web en múltiples navegadores. Esto significa probarlo en múltiples plataformas — al menos iOS y Android.

• Pruebe Safari móvil en iPhone usando el simulador iOS.
• Pruebe Opera y Firefox utilizando el Android SDK. Vea estas instrucciones adicionales para ejecutar Firefox para Android usando el emulador de Android.