Responsive Web Design no es ninguna moda. Actualmente  en nuestro planeta existen más de 5 billones de dispositivos conectados  a Internet y debido a la gran demanda actual de terminales como smartphones, tablets, libros electrónicos, televisiónes, videoconsolas, etc… esta evolución crece a pasos agigantados. Concretamente, según un estudio reciente de Intel, en el año 2020 estiman una cantidad de 31 billones de dispositivos conectados a internet.

En nuestro país el Instituto Nacional de Estadística estima que el 56% de los usuarios españoles de Internet se han conectado alguna vez con un dispositivo móvil, una cifra que representa alrededor del 34% de la población total. Es evidente la diversidad de dispositivos disímiles que podemos encontrar y actualmente los dispositivos móviles ganan terreno sobre los dispositivos fijos. Según un estudio realizado por IAB Spain en este último año se ha triplicado la presencia de tablets en el mercado español.

Debido a la pluralidad de terminales, en los últimos años los diseñadores webs han buscado soluciones para adaptar sus interfaces de usuario a la diversidad de tamaños de pantalla y resoluciones de los dispositivos que actualmente usan el servicio web.

En el año 2000, en el mundo de los diseñadores se comenzaron a realizar páginas webs basadas en la resolución, siendo el cliente el que debía de adaptarse a la resolución para la cual se había optimizado el contenido, todo lo contrario de lo que se busca hoy en día, donde el contenido es el que debe adaptarse al dispositivo en concreto.

Fue en 2007 cuando el mercado tecnológico se revolucionó con el lanzamiento de iPhone, el cual ha marcado un antes y un después, apareciendo el término de smartphones. Posteriormente Apple lanzó nuevos productos como pueden ser iPod Touch, o unos años después iPad, los cuales tenían la capacidad de navegar por la red. Algo cambió en aquel entonces y se buscaron soluciones para poder dar soporte a estas plataformas y las que posteriormente vendrían. Frente a esto se reaccionó lanzando webs con dos dominios, creando versiones móviles detectando el tipo de dispositivo que se conectaba, se intentaron adaptar webs a través de sistemas de grids, pero la solución final apareció con el término de Responsive Design.

Responsive Design como filosofía

El término Responsive Design se acuña en la búsqueda de estas soluciones, concretamente la idea nació en el año 2008 por el consorcio W3C en su recomendación “Mobile Web Best Practices” que definieron el concepto “One Web”, que se basa en la idea de realizar un diseño web para todos y accesible desde cualquier dispositivo, buscando que la experiencia del usuario se enriquezca.

“One Web” significa proporcionar, en la medida de lo posible, la misma información y servicios disponibles para todos los usuarios, independientemente del dispositivo que estos empleen. Esto no significa que el mismo contenido esté disponible en la misma representación en todos los dispositivos. El contexto del empleo del dispositivo móvil, las distintas variedades de las capacidades del dispositivo, problemas de ancho de banda en la red afectan a la representación. Además de estas razones, ciertos servicios y contenidos son más adecuadas en ciertos a contextos a usuarios específicos. Por lo tanto “One Web” se opone a la idea de separar la versión móvil y de escritorio.

En el año 2010 Ethan Marcotte publicó un artículo donde describió los conceptos teóricos y prácticos fundamentales para realizar un diseño web Responsive. La idea principal de esta técnica no es realizar gran cantidad de diseños para cada tipo de dispositivo, sino por el contrario ser más flexible, hacer un único diseño que sepa adaptarse a las necesidades del dispositivo en cuestión, siendo transparente para el cliente esta transformación y haciendo que la usabilidad de la aplicación sea realmente cómoda para el usuario.

Este concepto quiere adelantarse al futuro, se quiere realizar un único diseño que se adapte tanto a la nevera, como a la televisión, o a la cafetera.  El diseño no debe venir dado por el dispositivo en concreto, ya que no sabemos que nos deparará el mañana en dispositivos accesibles a la web.

Para llevar a cabo esta práctica se utilizan las últimas tecnologías web del lado del cliente. La aparición y establecimiento de HTML5, CSS3 y JavaScript en el mundo web ha dado la posibilidad que la web móvil consiga adoptar las mismas funcionalidades y obtenga la misma importancia que la web de escritorio. El concepto Responsive Design aplicado con estas tecnología tiene el objetivo de reacomodar los elementos de una web para adaptarlos a la resolución de pantalla del dispositivo, mediante la utilización de grids fluidos, imágenes flexibles, media-queries en la hoja de estilo CSS y posibles modificaciones en la disposición del contenido. Además, con una versión única en HTML y CSS se cubren todas las resoluciones de pantalla, evitando los problemas de usabilidad que presentan los sitios web de ancho fijo.

Sin embargo el término Responsive Design no depende únicamente de un código como tal, es también usabilidad, conlleva diseñar una experiencia para el usuario  donde el contenido es lo más importante y es en lo que el diseñador debe tener cuenta. Este término quiere aportar una filosofía para afrontar el diseño de una página web.

 

Para conocer con más detalle esta técnica recomiendo que echéis un vistazo a mi proyecto de fin de grado