¿Qué es el diseño web Responsive?

El Responsive Web Design es algo que cualquier diseñador web conoce. Lo ves cada vez que miras Internet. Incluso si no estás familiarizado con el diseño web, es muy probable que hayas oído el término, puede que en este mismo blog.

¿Pero, qué es exactamente el diseño Responsive? Hoy nos hemos propuesto contestaros a esta pregunta.

Empecemos por lo básico ¿Qué significa el término Responsive? Responsive es como se llama a la característica de un sistema que tiene respuesta hacia el medio que le rodea. No son exclusivos de los medios online, si no que los vemos todos los días. La puerta del super, los sistemas de alarmas o los faros de coche que se encienden solos por la noche son ejemplos de sistemas adaptables o Responsive.

En los albores de internet, los sitios web estaban optimizados únicamente para ordenadores (no es que hubiese muchas más opciones), pero al popularizarse las plataformas móviles, o al introducirse las tablets en el mercado, había que crear otros sitios específicamente para esos dispositivos.

Esto es algo que aun seguimos viendo. Importantes sitios mantienen versiones diferenciadas de su web. Pero sin embargo, no es una solución práctica. Nos obliga a diseñar una misma web varias veces y mantener layouts para diversos tipos de dispositivos. El trabajo se duplica o triplica, y no solo en la creación del sitio, también en el mantenimiento. Si decidimos que una web requiere una nueva sección, nos vemos obligados a realizar los cambios a cada una de las versiones.

El diseño Responsive llega para solucionar esto. Este nos permite redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario. Se caracteriza porque los layouts e imágenes son fluidos y se usa código media-queries de CSS3.

CSS3 vino para solucionar algunas de las necesidades actuales, por medio de nuevos atributos y construcciones capaces de responder al entorno donde se encuentran. Nos referimos a atributos tan simples como max-width o min-width. Gracias a estos atributos somos capaces de reaccionar ante distintas circunstancias como la anchura de la pantalla, ventana o contenedor donde están los elementos a maquetar.

Todo esto nos permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos al permitir compartirlos de una forma mucho más rápida y natural.