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

  1. 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.
  2. 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.
  3. 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.

 

Diseño web responsive

 

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“.

 

Usabilidad web para 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.

Diseño web responsive

¿Has comprobado tu web? ¿Qué tal se ve en dispositivos móviles?
¿Tienes alguna duda?

¡Contacta con nosotros!

 

 

 

 

Rafa Esteve

Rafa Esteve

CEO - co-fundador at TANTATA SOLUTIONS
Consultor de Marketing Digital y posicionamiento SEO, Profesor de Social Media Management (Community Manager) y Marketing online.
Jugador de Rugby, padre y amigo de sus amigos.

Linkedin
Rafa Esteve

Otros artículos relacionados:

¿Por qué no consigo clientes y pedidos a través de mi página web? Entiende cómo funciona el posicionamiento en buscadores y haz que tu página web se posicione entre los primeros resultados de búsqueda de Google.
¿Cómo escribir un correo para que no se considere spam? ¿Estás teniendo problemas a la hora de enviar correos? ¿Te llaman tus clientes diciéndote que no reciben tus correos? Cada vez más, los programas encargados de gestionar nuestros correos, son los encargados de filtrar los correos considerados como "...
Como crear un gif animado para tus redes sociales Los gifs animados son archivos de imagen formados por la consecución de varias imágenes diferentes y que crean el efecto visual de algo parecido a un vídeo. Tienen la ventaja de que se reproducen automáticamente en cuanto se cargan en una página...
Uso de Facebook para empresas Claves y consejos para sacarle el máximo rendimiento a las páginas de Facebook para promocionar negocios, empresas o proyectos personales.
¿Cómo instalar WordPress desde cero? En este artículo os enseñaremos como instalar wordpress desde cero y os recomendaremos el que nosotros consideramos que es el mejor hosting para wordpress.