Seguro que si estás leyendo este artículo es porque has oído hablar de diseños web «responsive» o diseños web adaptables en alguna ocasión y por no quedar mal te has limitado a asentir con la cabeza.
Los dispositivos desde los que visitamos las páginas web no dejan de evolucionar y cambiar el tamaño de sus pantallas. Por eso, todos los que nos dedicamos al diseño web, hemos tenido que ir ajustando el diseño de nuestras páginas, para que estas se adapten de la mejor manera posible, al dispositivo desde el que se visualizan.
En un inicio, con la inclusión de navegadores en los teléfonos móviles, se abrió un nuevo campo de estudio e investigación para los diseñadores web, que fuimos probando una a una todas las técnicas para conseguir este resultado.
Diseño web «Adaptative»
Las primeras versiones de adaptabilidad consistían en detectar el tipo de dispositivo desde el que se conectaba el usuario y redireccionarlo a una URL o sitio web diseñado a medida para las dimensiones de su dispositivo. Este sistema, como podéis imaginar, suponía una carga de trabajo brutal para el diseñador y los desarrolladores que debían de tener en cuenta, a parte de los diferentes navegadores, la gran cantidad de dispositivos existentes de diferentes tamaños según modelos y marcas.
Diseño web «Responsive»
Dada la dificultad y con la idea de trabajar sobre una web única que se reproduzca o que se adapte automáticamente, la tendencia en diseño web avanza, desde hace algunos años, en dirección a que la web se adapte como un muelle en función del dispositivo en el que se visualiza; Es decir, el diseño web responsive, por medio de sus hojas de estilo (css) y algunas sencillas etiquetas nos permite generar sitios web adaptables al tamaño del dispositivo en el que se visualiza.
En un diseño web responsive, normalmente, se navega siempre por un mismo sitio web en el que las imágenes, tablas, columnas, tamaños de fuente etc. se deforman hasta adaptarse perfectamente al tamaño de la ventana en que se muestra.
Ventajas del Diseño web responsive
- La ventaja fundamental es que se mejora la experiencia del usuario, pues no tiene que dejarse los ojos ni hacer peripecias para rellenar formularios o leer artículos.
- La siguiente ventaja reside en la reducción de trabajo a la hora diseñar y proyectar el sitio web. Pues se trabaja en única web.
- Por si no parece suficiente, Google penaliza el posicionamiento web, desde hace cosa de un año, a las webs que no se adaptan de manera responsive a los dispositivos móviles.
¿Cómo puedo saber si mi web se adapta a dispositivos móviles?
Un sencillo método para comprobar si tu página web es responsive, consiste, simplemente, en redimensionar el tamaño del navegador hasta reducirlo al mínimo como te indicamos en la siguiente animación. Si tu web es responsive debería ir adaptándose progresivamente desde el menú de navegación hasta los textos y las imágenes.
Si quieres asegurarte de que pasas la prueba de usabilidad de Mr. Google puedes crearte una cuenta en la herramienta Search Console y hacer que tu web pase por la prueba «usabilidad móvil«.
La Casa Responsive
Para entenderlo mejor os dejo el ejemplo que nos plantea el gran Matthew James Taylor con su casa responsive.
Imagina que tu casa tuviera que adaptarse manteniendo el contenido de sus estancias al tamaño de diferentes dispositivos.
El trabajo de los diseñadores consiste en mantener y distribuir el contenido esencial y necesario para satisfacer las necesidades y experiencia de los usuarios.
¿Has comprobado tu web? ¿Qué tal se ve en dispositivos móviles?
¿Tienes alguna duda?
¡Contacta con nosotros!
Jugador de Rugby, padre y amigo de sus amigos.
- Curso de Canva CDT 2021 - 13 mayo, 2021
- Curso de Google Analytics y Google Ads (Avanzado) CDT 2021 - 23 febrero, 2021
- Como crear un Plan de Marketing digital - 3 mayo, 2019
