¿Sabías que 3 de cada 4 usuarios españoles ya navega a través de su smartphone? Otro dato fascinante que ha revelado la Comisión Nacional de los Mercados y la Competencia (CNMC) es que el 85% de los cibernautas se conectó a la red a través de dispositivos móviles durante el 2º trimestre de 2017. Este y otros informes demuestran la importancia del diseño web para móviles. Incorporar esta tecnología a tu página web no podía ser más sencillo, por lo que te animamos a conocer todas las claves del diseño adaptativo o responsive.

Diseña con varios tamaños de pantalla en mente

La pantalla de un dispositivo inteligente puede variar considerablemente, de manera que hoy no basta con diseñar para 3 ó 4 posibles formatos. Trasladar sencillamente todos los elementos de la versión de escritorio a un dispositivo móvil dará como resultado diferentes problemas de visualización: texto demasiado pequeño, imágenes superpuestas, CTAs desubicados, etc.

Lo más recomendable es diseñar las interfaces adaptadas a móviles desde cero, teniendo siempre presente los diferentes tamaños de pantalla donde se visualizará el contenido.

Olvídate del click: lo que te interesa es el touch

Y no hablamos únicamente de reemplazar los clicks de ratón por los toques de dedo: los movimientos de desplazamiento (scroll), de escritura, de ampliar imágenes, etc., deben ser considerados durante la creación de nuestro diseño web para móviles. De lo contrario, el resultado será una navegabilidad deficiente.

La persona responsable del diseño debe realizarse constantemente preguntas del tipo: ¿los botones son lo suficientemente grandes para que las personas hagan touch cómodamente?, ¿hay suficiente espacio entre los elementos?, etc. En otras palabras, parte del trabajo del diseñador consiste en ponerse en los ‘zapatos’ del usuarios, es empatizar con su experiencia en la web.

Evita los fuegos artificiales: el usuario sólo quiere navegar

Las imágenes, animaciones, ciertos códigos CSS y otros elementos que dan forma a la versión de escritorio de una web, pueden ser prescindibles en su versión para dispositivos inteligentes. Simplificar y optimizar esta última versión es una de las claves para conseguir un diseño web para móviles de primera calidad.

El tamaño y la velocidad de carga son las dos medidas de rendimiento más importantes para un sitio móvil. No uses elementos pesados para lograr efectos extravagantes, como degradados, sombras y demás. Incluso si te apasionan las fuentes de fantasía, con mucho ornamento, la versión responsiva puede ser una buena oportunidad para optar por fuentes más claras y limpias, como las sans. Todo es poco para garantizar una óptima navegación y usabilidad a nuestros visitantes, que no esperan encontrar ‘fuegos artificiales’ en nuestra web, sino acceder a contenidos o servicios.

Olvídate de las Pop-Ups

Del punto anterior se desprenda la máxima de que no todo lo que conviene a la versión de escritorio es apropiado para el diseño web para móviles. Un buen ejemplo son los pop-ups, que están en el punto de mira a raíz de uno de los cambios de algoritmos de Google en 2017. Las páginas que muestran estos pantallazos intersticiales proporcionan una experiencia de navegación muy pobre para los usuarios de móviles y tabletas. Debido al pequeño tamaño de las pantallas de estos dispositivos, algunas ventanas emergentes (como los anuncios Adsense, los formularios de suscripción o determinados avisos) puede ocupar la totalidad de la pantalla sin previo aviso, lo que tiende a incrementar los porcentajes de rebote.

Como se hace evidente, estas líneas no pretenden ser una ‘biblia’ del diseño web para móviles que sintetice lo esencia de esta metodología, sino ofrecer una serie de consejos y prácticas que permiten realizar un RWD de primera calidad, adaptado a las necesidades del usuario actual. Si quieres ampliar esta información, no te pierdas estos secretos para optimizar el SEO móvil de una tienda online.