Decálogo para las webs responsive – Versión móvil

En la era de los smartphone no podemos dejar pasar por alto detalles que mejorarán la experiencia de usuario y usabilidad de nuestro proyecto.

En esta entrada voy a dar lo que para mí son algunas de las claves (aunque hay más) que todo sitio web responsive debería cumplir en su versión móvil (smartphone y tablet).

Diseña táctil

Parece obvio, ¿no? Pues muchos sitios web obvian esto y tratan la versión móvil como una de escritorio: enlaces muy estrechos, menús difíciles de pulsar, interacción con el sitio extraña para los gestos móviles…

Si diseñas un sitio móvil piensa en eso, en móvil. Tu usuario puede tener los dedos finos, gruesos, mal pulso o sujetar el móvil con una sola mano… Si lo haces bien todos podrán utilizar y navegar por tu sitio web.

Cuidado con las imágenes

Asegúrate de que todas las imágenes que incluyas en tu sitio web tienen sentido y sustitúyelas por código siempre que sea posible (colores planos, sombras, etc)

Piensa que las imágenes tienen que ayudar al visitante a navegar por tu sitio, haz que cumplan su misión.

No pongas texto en las imágenes (salvo que no sea importante)

En el responsive, tendemos no sólo a re-colocar elementos sino que a menudo los redimensionamos y escalamos al tamaño adecuado. Si tus imágenes contienen texto, en su versión móvil se verán pequeñas y el texto no se leerá correctamente.

No a los elementos hover – Menús «dropdown» o desplegables

Aunque a título personal no me gustan nada los menús desplegables (los de un nivel los tolero, los de varios niveles me parecen una aberración) entiendo que en ocasiones pueden ser (más o menos) necesarios y estar correctamente implementados. Pero piensa que en un móvil no existe el efecto «hover» tal y como lo conocemos en el mundo del escritorio. Si dependes de un efecto hover en un dispositivo móvil, algo falla.

No pienses en un sistema operativo concreto, ni tampoco en una única resolución

Un fallo que cometí yo cuando hice este diseño (sí, el que ves) es pensar en resoluciones. Si disminuyes la ventana del navegador, verás que «hace saltos» para las distintas resoluciones. Esto lleva a un pequeño problema con ciertos terminales móviles que tienen resolución alta o no tan baja como se supondría para un dispositivo de su tamaño. En definitiva, no pienses en píxeles o anchos fijos y dale elasticidad a tu web (siempre pensando en el responsive, claro).

La tarifa de datos, siempre la tarifa de datos

Aunque cada vez tenemos tarifas de datos con disponibilidad de datos más altas, tenemos que pensar en aquellos que tienen pocos megas en sus tarifas y evitar que nos odien por consumírselos al visitar nuestra web.

Intenta que tu web no pese mucho, échale un ojo a mi guía de WPO (Web Performance Optimization)

Evita incluir librerías JS pesadas

JavaScript es muy útil a la hora de darle vidilla a la web, pero es muy pesado para dispositivos móviles (y eso que en las últimas generaciones han mejorado bastante).

Además la utilidad de librerías tipo JQuery, etc… Trae un contra, el peso. La velocidad de carga es más importante de lo que crees y aún más en móvil, donde no siempre tenemos la mejor cobertura. Si quitas scripts innecesarios, el usuario lo notará. Si utilizas JavaScript para hacer un simple mostrar/ocultar de algún elemento, deberías plantearte utilizar otro sistema.

El contenido es el rey

Tranquilo, no te voy a hablar de SEO. En móvil, más que en escritorio, premia mostrar el contenido. Es el rey y el diseño la reina, pero en el móvil has de escoger cuál quieres que tenga más visibilidad.

Personalmente, en la versión móvil trato de mostrar el contenido por encima de lo demás; el diseño pasa a un segundo plano.

Minimiza el scroll

Si no quieres provocarle un esguince a los visitantes de tu página web, trata que sea lo menos extensa posible. Ve al grano y evita que tu página mida ochocientos kilómetros de alta.

Testea, prueba y vuelve a probar

Hay estupendos simuladores donde podrás ver cómo se visualiza y comporta tu sitio web en móviles. Web Developer Toolbar para Chrome o Firefox, GTMetrix, Google pagespeed te ayudan no sólo a visualizarla sino a valorar el tiempo de carga y otros parámetros.

Como digo, pruébala antes de lanzarla y asegúrate que todo está donde debe.

Si te ha gustado, compártelo.