¿Qué es el Responsive Design?
El Responsive Web Design (RWD) es la forma más actual y recomendable de diseñar y desarrollar páginas web, de forma que se adapten automáticamente al tamaño de pantalla disponible, y utilizando el mismo código HTML.
La traducción al español sería “diseño web adaptable”, y presenta numerosas ventajas con respecto a las alternativas anteriormente utilizadas.
Y, ¿qué se hacía antes del Responsive Design?
Bueno, antiguamente no se hacía nada. Se diseñaban y programaban las páginas web con un tamaño fijo (la resolución mayoritaria del momento), y el que tuviera un monitor más pequeño de esa medida, allá se las viera. Le aparecía el temido scroll horizontal, y la usabilidad de la página se iba al traste.
Oye, a mi me suena que había una técnica llamada “diseño elástico”
Te suena bien, con la llegada de la diversificación en los tamaños de monitores, empezó a estilarse el “diseño elástico” o fluido, que no estaba nada mal y que según mi opinión fue la antesala del Responsive Web Design. Pero presentaba algunos inconvenientes importantes, ya que todos los elementos del diseño debían ser elásticos, y no permitía tener controlada su disposición en ningún tamaño, ni mostrar u ocultar los elementos en función de un tamaño u otro.
Me imagino que cuando llegaron los móviles, se complicó bastante la cosa
Fue con la aparición de los dispositivos móviles cuando realmente hubo que plantearse alternativas, ya que la navegación desde un terminal tan pequeño como un móvil no era nada fácil de resolver con las herramientas existentes. Ya no era cuestión de que los elementos se adaptasen ligeramente, hacía falta ofrecer una navegación y experiencia del usuario completamente diferentes.
¿Qué se hizo en ese momento? Ofrecer diferentes versiones de la página para cada dispositivo. Al cargar la página, el servidor detectaba el tipo de dispositivo y le ofrecía un código HTML diferente en cada caso. Fue la llegada de la famosa “versión móvil”, que permitió resolver los problemas de usabilidad en dispositivos pequeños. Tenía, cómo no, inconvenientes: diferentes páginas con diferentes códigos que mantener y actualizar, contenido duplicado que a Google no le gusta nada, o la necesidad de detectar con acierto el dispositivo cuando constantemente aparecen nuevos tipos, marcas y formatos. ¿Cómo se resuelve un tablet? ¿Y un ordenador portátil minúsculo de esos que salieron hace ya unos años? ¿Una versión diferente de la página para cada formato?
Vaya historia, entonces, ¿qué aportó el Diseño Web Adaptable?
Pasó a limpio toda esta lucha con los tipos de dispositivo. En resumen, vino a decir: “No me importa qué dispositivo seas, yo me guío por el tamaño disponible”.
Gracias a la aparición del lenguaje CSS3 (con el que definimos todo el estilo de las páginas), que permitió las “Media Queries”, pudimos empezar a definir diferentes estilos CSS para diferentes rangos de tamaño.
Así, podemos crear un estilo cerrado, con una navegación específica, para el rango inferior a 300px, otro para el rango inferior a 456px, otro para 768px, etc. Y hablo de un estilo cerrado, en el que tenemos controlado qué aparece y desaparece, qué aspecto y tamaño tiene, pudiendo controlar perfectamente la usabilidad de la web en cada caso.
Implica hacer hasta 6 diseños diferentes para una misma página, pero una vez resueltos no es necesario interesarse por el tipo de dispositivo.
Vaya, como si quieres visitar la página desde una alpargata WI-FI, sé que la verás bien, y utilizando el mismo código HTML.
Comentarios (2)
Whitney
21/07/2020 00:48h
buscando por el buscador yahoo diseño de tiendas online talavera y llegué de rebote a este post, gracias admin.
Yen Ortega
18/02/2022 23:31h
muy bien explicado tu post. gracias
también soy diseñador web yenortega.es aunque en el CSS no defino con px uso Rem. me funciona mejor.