¿Qué es responsive web design?

Actualizado en 2021:

(podéis leer artículos más actualizados con ejemplos de menú hamburguesa y barra de navegación mobile modernas)

Han pasado ya 10 años casi desde que escribí este artículo. Los palabros responsive web design sonaban alto y claro. Google ya nos estaba dando pistas claras de por dónde venían los tiros. A nosotros nos costaba el cambio, adaptarnos a las nuevas formas de diseño móvil, pero ahora, en 2021, hemos tenido a adaptarnos sí o sí.

Tantos años oyendo que venía el lobo, y efectivamente el lobo llegó con el algoritmo de Google Mobilegeddon, que nos puso las pilas a todo correr. Después de 10 años de luchar por estar en primera página de Google, nos damos cuenta que dónde queremos estar es en la primera página de las pantallas de nuestros smartphones, porque es realmente allí donde se ganan las batallas.

Nadie pone ya en duda que las webs deber estar adaptadas a dispositivos móviles, de que los diseños web pasan por tener una versión escritorio y otra mobile. Y yo miro con nostalgia cuando hablábamos de «responsive web design» como si fuera la novedad más grande del mundo. Bueno, con cariño os dejo el post que escribí entonces.

 

Hoy me decido a hablar del responsive web design, porque parece que últimamente oigo esta palabras por doquier… y seguro, que más de uno no sabe qué es el responsive web design, verdad?

Aunque yo no soy la más experta del mundo mundial, sí es verdad que estoy rodeada de grandes profesionales, que se mueven como pez en el agua con esta nueva corriente de diseño. A mí personalmente, me llama la atención, pero no tengo muy claro si me tiene del todo cautivada..

Hasta ahora, si queríamos que nuestra web se visualizara bien en los dispositivos móviles, lo que necesitábamos es una versión móvil de nuestra web. Ahora el responsive design permite que nuestra web se adapte a todo tipo de dispositivos. La web va cambiando el número de columnas (se va adaptando a la pantalla) según la anchura del dispositivo en cuestión. Esto permite que el contenido no sea excesivamente pequeño al ojo humano y no tendremos que andar ampliando la imagen continuamente.

Si queréis ver cómo se va mostrando una web realizada con un diseño adaptado, podéis utilizar la herramienta screenqueri.es . Tenéis que meter la url y arrastrar el contorno, así iréis viendo como se van moviendo los elementos.

Ya nos contaréis qué tal! 😉