Claves para la web móvil

Este artículo es complementario de Accesibilidad y usabilidad móvil: web móvil y app nativa

Hace un par de meses participé en el curso “Buenas prácticas en web móvil” del W3C. El curso me resultó muy interesante tanto por su carácter práctico como por la cantidad y calidad de las aportaciones en el foro, estuvo bien coincidir con tantas caras virtuales conocidas.

En este artículo sintetizo las claves que me parecieron más relevantes, muchas de las cuales se solapan con requisitos básicos de accesibilidad y usabilidad.

1. Estándares: código válido y semántico

Usa código (X)HTML correcto, válido y semántico, de acuerdo a la especificación definida en el DOCTYPE.

2. Separar el contenido y la presentación

Define todos los estilos en las CSS. NO a los estilos en línea, a las etiquetas tipo <font> o <center>, a los espacios o imágenes en blanco para separar o a la maquetación por tablas.

Define los tamaños con medidas relativas (%, em).

Ten cuidado con el posicionamiento de los elementos mediante float y display, revisa que el efecto sea el esperado con diferente dispositivos y resoluciones.

Ojo con el uso del color y las imágenes de fondo: el contraste de color debe ser suficiente y los enlaces estar subrayados. Ten en cuenta que los usuarios de dispositivos móviles a menudo navegan bajo condiciones de escasa visibilidad (luz brillante, mala iluminación).

3. Mejora progresiva (progressive enhancement)

La “mejora progresiva” es una estrategia de diseño y desarrollo que permite que la información, las funcionalidades o las características más avanzadas estén disponibles para los agentes de usuario que las soportan, pero sin que esto perjudique ni excluya al resto de usuarios, ofreciéndoles una alternativa viable. Se aplica a todo: a las CSS, al código javascript, al código (X)HTML, a las funcionalidades de la página, etc.

Por ejemplo, podemos usar HTML5 y gracias al siguiente script:

<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]—>

los usuarios de versiones anteriores de Explorer no tendrán problemas con la definición de los estilos en la CSS para las nuevas etiquetas semánticas de HTML5.

Por ejemplo, no dejaremos de usar javascript, o cookies, o funcionalidades de geoposicionamiento, o propiedades CSS3, pero no asumiremos que se soportan y no dependeremos de ellas. Así, por ejemplo, en el caso de javascript, implementamos la página como si no fuera a soportar javascript y después añadimos una capa de mejora con javascript no intrusivo.

En este sentido habrá que tener en cuenta que muchos móviles no tendrán soporte para Flash, PDF, ActiveX, Silverlight, ventanas emergentes, GIF animados, transparencias PNG, iframes, etc.

4. Viewport, CSS Media Queries y Responsive Design

Define el meta viewport de la siguiente manera:

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

Este meta indica que nuestra página será flexible para adaptarse a los diferentes anchos de pantalla y le indica al navegador que no aumente o reduzca la página, que use el zoom por defecto.

Imagen tomada de la gran presentación de Hernan Beati: Web móvil: ¿inclusiva y accesible?

Esta definición del viewport debe estar respaldada por un diseño web adaptable (responsive design) a todos los dispositivos, sin necesidad de barras de desplazamiento, gracias al uso de CSS Media Queries:

<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style2col.css" media="all and (min-width: 600px)" /> <link rel="stylesheet" type="text/css" href="style3col.css" media="all and (min-width: 800px)" /> <!--[if lt IE 9 & !IEMobile]> <link rel="stylesheet" type="text/css" href="style3col.css" /> <![endif]—>

El uso de CSS Media Queries permitirá adaptar la visualización del contenido a los diferentes tamaños de pantalla: posicionar de diferente manera el contenido, reducir el tamaño de las imágenes de fondo en las pantallas más pequeñas, etc.

Ejemplo de una web diseñada cuyo contenido se adapta al ancho de la ventana

Imagen tomada de Responsive Web Design: 50 Examples and Best Practices donde se pueden consultar muchos más ejemplos.

Los usuarios de dispositivos móviles deben visualizar la información, percibir que la página ha cambiado, sin necesidad de hacer scroll, para ello es necesario una cabecera más reducida o un sistema de navegación adaptado.

5. Adaptar contenido en el servidor

No ocultes contenido para la versión móvil con display:none, pues el contenido será descargado igualmente, consumiendo tiempo. Lo correcto es usar responsive design para adaptar la visualización, pero la adaptación del contenido (que no tiene porque ser siempre necesario, dependerá del sitio) debe hacerse en el servidor.

Detectar el dispositivo desde el servidor permite saber si la página será presentada en una dispositivo móvil o no, y en función de ello adaptar el contenido que se muestra desde el servidor: diferentes tamaños de imagen, menos contenido (o diferente), una cabecera o un sistema de navegación distinto, etc.

Da libertad al usuario. No decidas por él. Permite al usuario cambiar de la versión móvil a la versión escritorio y viceversa; y recuerda usar link=”canonical” para indicar a los buscadores cuál es el recurso original cuando tengas varias URIs para un mismo recurso.

Yo utilicé para detectar el dispositivo y permitir cambiar de una versión a otra el código PHP de Alex Pot.

En "Ejemplos de sitios web versión escritorio y móvil" hay una recopilación de ejemplos.

6. Diferentes modos de interacción

El foco debe ser siempre visible (no lo ocultes con outline:0px).

En los dispositivos táctiles es especialmente importante el tamaño y la distancia entre los elementos clicables.

Usa manejadores de evento independientes del dispositivo.

7. Reducir el tamaño de la página y las llamadas al servidor

El objetivo es minimizar la carga de la red, los Kb que nos descargamos (y por los que muchos usuarios pagan) el tiempo de procesamiento, y así aumentar la velocidad de descarga y de paso no calentar el móvil ni fundirnos la batería.

Se deben incluir los estilos en las CSS, optimizarlas y comprimirlas, llamar al menor número necesario de CSS (unificándolas cuando sea posible) y poner especial cuidado a las reglas que utilizamos (los navegadores modernos no descargan los recursos vinculados en las hojas de estilo a menos que sean llamados en la página: ver test de TimKadlec.com).

Se debe incluir todo el javascript en ficheros JS externos y reutilizables, optimizados y comprimidos, y llamar al mínimo de ficheros necesarios (unificándolos cuando sea posible). La página se procesará más rápido si puedes incluir los scripts al final de la página o usas el atributo defer

Configura correctamente la caché.

Optimiza el tamaño y peso de las imágenes, usa el atributo ALT por si no se cargan y define sus atributos width y height. Si no indicas el alto y el ancho de la imagen, el navegador vuelve a analizar la página durante el análisis sintáctico para adaptarse a los nuevos objetos, el reescalado requiere potencia de procesamiento, consume la vida de la batería, genera calor innecesariamente, y retrasa la entrega de la página al usuario.

Cuando sea posible unifica imágenes para hacer menos peticiones al servidor, por ejemplo puedes utilizar CSS Sprites para unificar en una única imagen varias imágenes decorativas del sitio.