¿Qué es un Diseño web responsive?

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

Otras entradas de nuestro Blog

Tantata, diseño web, marketing digital y posicionamiento SEO
Como crear un Plan de Marketing

Como crear un Plan de Marketing

1. La importancia de tener un plan Toda proyecto empresarial requiere de un plan. Un plan no es más que un conjunto de objetivos...

La primera foto de un Agujero Negro

La primera foto de un Agujero Negro

Ayer, más de un siglo después de que el genio, Albert Einstein, teorizara la existencia de "unos cuerpos supermasivos capaces de...