¿Qué es el Responsive Design? · Blog del Diseñador web freelance Álvaro Fernández

AlvaroWeb Diseño Web Diseñador web Freelance
Alvaro Web Diseño Web Diseñador Web Freelance

« Inicio Blog

(0) 10/02/2015 12:41h

¿Qué es el Responsive Design?

¿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?

Responsive design freelance

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.

 

Desarrollo web, Diseñador web freelance, Diseño web, Responsive design, Usabilidad
Anterior Siguiente

Comentarios (0)

¿Quieres comentar este post?

Escriba el código anti Spam

Aviso legal y Responsabilidad de los comentarios

¿Puedo ayudarte?
Pulsa para que te llame
Llamadas dentro de España y en horario de oficina.
Ir a la sección de contacto info@alvaroweb.com 636 905 518