Si somos dueños de un negocio y tenemos página web, seguramente hayamos escuchado el término «web responsive» miles de veces. Y es completamente normal. En pleno 2022, apenas existen páginas webs que no tengan está funcionalidad, muchas veces de forma natural si utilizamos plantillas predefinidas o ya programadas.
Es uno de los factores más importantes y extendidos. Sin el responsive, perderemos prácticamente el 80% de nuestra visibilidad en la línea, siendo algo incluso crucial y vital para determinados negocios, convirtiéndose en su 90 o 95% de visibilidad total. Pero, vamos por partes, porque si estás leyendo esto quizá aún tengas dudas de lo que significa, y lo importante que puede ser.
¿Qué significa «Web Responsive»?
Responsive es un término dentro de la programación y diseño web que refiere a una versión para móviles/tablets de nuestra página. Es decir, que nuestra página será visible y completamente funcional en todos los dispositivos, desde ordenador, televisores, tabletas, y sobre todo móviles.
De ahí viene la pérdida grande de visibilidad en línea, pues si nuestra página no es responsive (es decir, no tiene versión móvil), directamente no aparecemos en los exploradores web de un teléfono, y si pinchan en el enlace de nuestro negocio o blog desde algún perfil, verán que no es funcional y lo cerrarán. Por ello en Let´s Marketing nos especializamos desde hace años en crear páginas webs optimizadas para móviles.
El número antes dado viene de las propias analíticas de internet. El 70-80% de los usuarios que navegan ya lo hacen desde un móvil, y si rechazamos el responsive, estaremos rechazando a todo ese público.
Existen errores de principiante, sin saber que nuestra página no es funcional para móviles, y adelantarnos a comprar publicidad para nuestro negocio. Y en las estadísticas podemos ver un resultado completamente negativo. Antes de hacer cualquier tipo de movimiento de visibilidad, es importante comprobar ya no solo que sea funcional, sino que no existan errores que puedan entorpecer al usuario.
¿Cómo debe ser un diseño web responsive?
Esto se responderá con un «depende». Es cierto que hay páginas web con más o menos diseño cargado en escritorio. Diseños que, por desgracia, en móvil normalmente no podremos ver. Lo más común cuando hacemos una búsqueda de información y entramos a un portal o blog, es que tengamos un fondo blanco, con letras medianamente grandes y márgenes cómodos. Nada más, a excepción de botones funcionales y fotografías.
Sin embargo, si accedemos en escritorio, no solo veremos una barra superior bonita con un menú cómodo y un logotipo. También podremos ver barras laterales y muchos más detalles que en móvil no podremos percibir en un primer momento.
Pero así es como debe ser un diseño web responsive. A pesar de que la web sea visible y funcional, no tendría sentido que lo primero que ofrezcamos a un visitante desde el teléfono, sean los botones y los detalles de una barra lateral, como podría ser un buscador o un listado de temas/categorías. El usuario recibirá (la gran mayoría de veces), el título de lo que quiere leer, el autor, la fotografía, y el texto que busca.
En eso se basa un responsive, en hacer la web cómoda y manejable para todo tipo de usuarios. Y aquí también podrían entrar versiones para tablet (pues representan habitualmente el 1% del tráfico total), y hasta televisores.
Si somos curiosos y queremos aprender, seguramente hayamos entrado a plataformas como YouTube o Netflix desde el televisor, y hayamos visto una versión diferente a móvil y escritorio. Esto es porque (aún) siguen mejorando y trabajando en esas versiones responsive.
¿Qué debemos tener en cuenta a la hora de preparar un buen diseño responsive?
Hasta ahora sólo hemos mencionado las funcionalidades. El cómo debe verse una web responsive para ser efectiva y correcta. Sin embargo esto no es todo, pues un teléfono móvil no es lo mismo que un ordenador. Cargarán y priorizarán elementos de forma distinta, y debemos favorecer al dispositivo para mejorar estos detalles. Además, tener una web optimizada para móviles afecta directamente al posicionamiento de la web.
En primer lugar, debemos tener en cuenta que no todo el mundo utilizará el teléfono de forma vertical. Si ofrecemos una versión de móvil en horizontal, podremos dar una experiencia más amena y un reparto de los detalles y la información mejor, con la posibilidad del usuario de hacer zooms.
Las imágenes y vídeos deberían cargar de forma independiente al texto. Esto se debe a que es posible que, a la hora de crear un responsive estándar, las imágenes se descuadren ligeramente, sobre todo si utilizamos varias columnas. Es decir, que una imagen aparezca y se «junte» con la columna móvil de texto, pero en un orden incorrecto. En vez de después de un párrafo concreto para dar contexto, antes.
Regresando a la usabilidad, debemos ofrecer menús y botones más cómodos. De mayor tamaño o más fáciles de utilizar en móviles. En vez de un menú superior con todas las opciones, podemos hacer un menú desplegable, en un botón que nos siga mientras deslizamos, y así podamos cambiar de página en cualquier momento. Estos factores son determinates para que google pueda posicionar nuestra web de forma óptima.
Sobre todo, los tiempos de carga(WPO), actualmente uno de los factores más importantes del SEO. Un móvil es más lento que un ordenador, es así. Debemos optimizar desde imágenes reduciendo la resolución, hasta las tipografías, utilizando un formato más grande y más ligero. Además de reducir los efectos y todo lo relacionado con la carga habitual de escritorio que sea innecesario. Si empleamos vídeos, podemos habilitar mediante código que sea lo último en cargar, al igual que otros detalles.
Y sobre efectos, existen un montón de modalidades de escritorio que en móvil no tiene mucho significado emplear. Por ejemplo, los efectos parallax. Eliminando esos códigos en las versiones de teléfono, facilitará mucho la experiencia y la velocidad. Al igual que podemos añadir efectos SOLO para el móvil, como un botón de «leer más» para que la carga no sea tan lenta, y el usuario pueda continuar después de uno o dos párrafos si lo desea.
