Diseño web adaptado a móviles

Cuando nos referimos a que una página web está adaptada a móviles, no sólo hablamos de que sea «visible» desde un smartphone. El concepto es un poco más profundo y hoy, queremos hablaros un poco más sobre cuáles son las características del responsive design y de cómo entendemos nosotros que debe ser el diseño de una página web actualmente.

Mentalidad «First Mobile»

La navegación en Internet a través de un teléfono móvil sigue creciendo de manera firme. Cuando hablamos con nuestros clientes acerca de la importancia de que el diseño de su página web esté adaptado a todas las pantallas, solemos mencionar esta modalidad de trabajo cada vez más extendida.

No podemos olvidar que el porcentaje de visitas desde móviles / tablets / ordenador (pues son las tres principales formas de visitar una web -el smartwatch no lo tendremos en cuenta aún) varía mucho en función del sector en el que te encuentres. Es cierto que tenemos la percepción de que ya «casi todo» lo vemos a través de una pantalla pequeña, pero es sorprendente descubrir cómo en algunos sectores, las visitas desde el ordenador siguen estando a la cabeza. Hay transacciones, consultas y otras acciones que todavía se resisten a cambiar de pantalla.

Existen acciones, como la decisión final de un pago online, que seguimos prefiriendo hacer a través de una pantalla de mayor tamaño. Es lógico pensar que poco a poco la inercia nos llevará a realizar la mayoría de estas acciones a través de nuestro móvil, pero pensamos que muchas visitas seguirán viniendo de ordenadores (piensa, por ejemplo, en el número de puestos de trabajo con ordenador que existen en el mundo, encendidos durante muchas horas al día y sirviendo como única ventana de sus usuarios al mundo) y esto es importante a la hora de diseñar una página web.

Por eso, a la hora de iniciar el diseño, el dato de porcentaje de visitas desde cada dispositivo nos ayudará mucho a la hora de trabajar la navegabilidad web.

En cualquier caso, la tendencia en la mayoría de los sectores nos advierte de una evolución hacia todo lo que sea móvil, como venimos viendo en los últimos años, más aún después del Estado de Alarma en el que hemos conocido un poco mejor cómo funciona Internet 😉

First Mobile es la forma en la que diseñamos una web. La mayoría de los clientes que nos sugieren un diseño para su página web, traen en su cabeza una web vista desde una pantalla de ordenador. «Me gustaría que en la parte derecha…», «Quiero que haya un banner y cuatro columnas…», «En la barra lateral…».

Pero todo cambia cuando planteamos que su objetivo principal es tener una web diseñada para teléfonos móviles que se adapte bien a una pantalla de ordenador, y no al contrario como pensábamos antes. Este concepto se ha invertido y ahora, pensamos primero en cómo hacer el mejor diseño para que sea visible desde un smartphone estándar, para después adaptarlo a una pantalla de mayor tamaño.

Diseño web diferenciado

Este concepto nos ayuda a entender que no todo el contenido debe ser visible desde todos los dispositivos. Es decir, si trasladamos «literalmente» todo el contenido de una web tal y como se ve en un ordenador a su versión responsive (adaptada a teléfonos móviles) podremos encontrarnos con resultados inesperados, como, por ejemplo, una navegación interminables hasta que lleguemos a lo que estamos buscando.

Hay que tener en cuenta que la mayoría de las páginas webs se adaptan a móviles colocando las filas de nuestra web en formato de columnas, haciendo que el usuario tenga que desplazarse durante mucho tiempo hacia abajo para encontrar los contenidos.

Es aquí donde entra el diseño diferenciado. Debemos ser capaces de mostrar el contenido, no de forma responsive o «adaptativa», sino diferenciada. Podemos elegir qué contenidos y con qué formatos serán mostrados según el dispositivo desde el que nos visiten, haciendo la navegación más fácil y mostrando los contenidos de manera más sencilla.

El diseño en un móvil debe parecerse más a una App que a una web tradicional.

Diseño minimalista vs Diseño sobrecargado

Otra tendencia en el diseño web es minimizar el número de objetos o imágenes que son visibles desde un dispositivo móvil. Lo ideal es conseguir el equilibrio entre un diseño útil para el usuario y el volumen de información que es necesario para vender nuestros servicios y/o productos.

Las webs, diseñadas con los dos anteriores conceptos (First Mobile y Diseño Diferenciado) deben mostrar sólo aquellos contenidos que son verdaderamente útiles en la navegación, sin apostar de forma enfermiza por fondos de vídeo, grandes párrafos, contenidos muy verticalizados y otros efectos resultantes de querer meterlo todo en el mismo sitio…

Esto no significa que elimines información, sino que en las pantallas principales de tu web, debes simplificar la navegación al máximo y poner a disposición del usuario el acceso a aquellos contenidos que esté buscando mientras te visita.

Analítica web como «tratamiento»

Una forma de saber si estamos tomando las decisiones adecuadas en cuanto al diseño de nuestra web, es estudiar algunos items de la Analítica. Aquí tienes algunos importantes:

• Dispositivo. Como hemos dicho, Google Analytics te va a informar sobre el porcentaje de visitas a tu web que provienen de un dispositivo u otro (te dirá incluso la tecnología -iOS, Android, Windows…).
• Tiempo de navegación. Conviene cruzar el dato anterior con el tiempo que permanecen en nuestra web los usuarios en función del dispositivo desde el que nos visitan. Nos ayudará a tomar decisiones sobre el diseño de contenidos.
• Comportamiento. Este dato, nos muestra aquellas partes de la página web que son más visitadas, lo que también podremos cruzar con el dato de tiempo de navegación y de tipo de dispositivo para comprobar si nuestros visitantes, llegan antes al lugar que queremos en función de uno u otro dispositivo o si esto realmente no tiene importancia.

Bien, esto es todo por hoy. Recuerda que el diseño de una página web no es «una aspecto bonito» -esto te lo da cualquier plantilla. Es mucho más. Ejecutar una buena construcción te ayudará a ser más efectivo/a en tus acciones de Marketing.

Seguimos!