Fue Ethan Marcotte quien utilizó por primera vez el término “Responsive Web Design” (que podemos traducir como diseño web sensible o adaptativo), en un artículo en A Line Apart en el año 2010.

Indicó como punto clave la forma en la que debemos tratar el creciente número de dispositivos web como diferentes aspectos de la misma experiencia.

“En lugar de ajustar diseños desconectados a cada uno de un número cada vez mayor de dispositivos web, podemos tratarlos como facetas de la misma experiencia. Podemos diseñar para una experiencia de visualización óptima, pero integrando tecnologías basadas en estándares dentro de nuestros diseños para hacerlos no sólo más flexibles, sino también más adaptables a los medios que los reproducen. En resumen, tenemos que practicar el responsive web design.”

Lo que Marcotte está sugiriendo aquí es que todas las pantallas deben recibir el mismo contenido. Sin embargo, tiene que ser construido de manera que sea flexible para poder adaptarse correctamente a las diferentes pantallas. El sitio web debe adaptarse de una forma que optimice la experiencia para ese dispositivo.

Responsive Web Design - DispositivosCuando el iPhone se presentó en 2007, fue un punto de inflexión para el diseño web. De repente, los diseñadores web perdieron el control del espacio en el que diseñaban sitios web. Anteriormente, los sitios web sólo tenían que trabajar en las pantallas de monitores que variaban en tamaño, pero no demasiado. ¿Cómo se supone que debemos hacer para que nuestros sitios web funcionen en estas diminutas pantallas?

Durante un tiempo se hicieron sitios web para móviles separados de los sitios web “normales”, optimizándoles para el tamaño de una pantalla de iPhone. Mantener dos sitios web no era malo del todo, pero pronto hubo muchos más teléfonos de diferentes tamaños y, a continuación las tablets, y tablets más pequeñas, y con el tiempo se hizo evidente que no se podía hacer un sitio web para cada una de las posibles pantallas en los que nuestros sitios web podrían verse.

Se hizo necesaria una solución que funcionara en todos los tamaños de pantalla, una manera de diseñar sitios web que pudiera adaptarse a todas las pantallas en las que la página web se exhibiera.

Llevó tiempo la confrontación de un montón de ideas diferentes antes de que una encajara. Responsive Web Design es un método de diseño de sitios web que hace que sean flexibles, que no se basan en un tamaño fijo de pantalla, y que también son capaces de detectar el tamaño de la pantalla del dispositivo ajustando el diseño para proporcionar una experiencia de visualización óptima para ese dispositivo.

Al igual que cualquier otra nueva técnica, el Responsive Web Design tuvo un comienzo difícil. Muchas personas argumentaron (y algunas hoy todavía lo hacen), que era necesario crear sitios web específicos para los teléfonos móviles. Sin embargo, con la proliferación de dispositivos en el mercado hoy en día, está claro que no podemos confiar en un modelo de teléfono móvil para ser nuestro patrón de diseño; tenemos que ser capaces de dar cabida a todos estos dispositivos con pantallas en casi todos los tamaños que se pueda imaginar.

Y el Responsive Web Design ha crecido también. Ya no se trata solamente de ser capaz de adaptarse a los distintos tamaños de pantalla, sino también poder adaptarse a las capacidades de los diferentes dispositivos como son las pantallas táctiles, pantallas de retina, y conexiones lentas.

A principios de 2014, el 58% de los adultos estadounidenses poseían un smartphone, es decir, un teléfono con un sistema operativo como iOS, Android o Windows Phone, que permiten al usuario un acceso completo a la Web. Y el 35% de los adultos estadounidenses tienen una tablet propia. Existen dispositivos increíbles, y el Responsive Web Design nos ayuda a sacar el máximo provecho de la web.

Sin embargo, aunque la mayoría de los adultos estadounidenses tienen smartphones, un 32% tiene un teléfono móvil que no es un smartphone. Muchas de esas personas utilizan sus teléfonos para acceder a la Web utilizando navegadores con capacidades limitadas que pueden no ser capaces de mostrar los sitios web de la forma prevista. El Responsive Web Design es una solución para esto también.

Un sitio web diseñado con el Responsive Web Design en mente comienza con un diseño simple, con un contenido muy enfocado que no se basa en las hojas de estilo en cascada avanzadas (CSS) o en JavaScript, y que se puede visualizar en prácticamente cualquier dispositivo conectado a Internet. Usando un proceso de mejora progresiva, el sitio web Responsive se basa en eso, creando un diseño que es optimizado para el tamaño de la pantalla en el que se visualiza y para las capacidades de ese dispositivo. De esta forma, los teléfonos antiguos con características y capacidades limitadas obtendrán sólo lo que pueden utilizar, mientras que los dispositivos más nuevos recibirán un rico diseño y una interfaz que encaja perfectamente en la pantalla, aprovechando de las características de estos dispositivos. El Responsive Web Design nos permite presentar el mejor sitio web posible a todos los usuarios independientemente de los dispositivos que utilizan. La Web tiene que estar a disposición de todo el mundo, y el Responsive Web Design es quién nos permite hacerlo.

La creación de un sitio web Responsive no es sólo una cuestión de aprender algunos nuevos fragmentos de código. Se trata de volver a examinar la manera en que pensamos acerca de los sitios web, se centra en la experiencia del usuario y de asegurarse que el contenido y la funcionalidad no son ideas de último momento en el diseño.

También tenemos que cambiar la forma de trabajar en los sitios web, para pasar a un proceso más de colaboración entre los diseñadores, desarrolladores y otros miembros del equipo.

Hay algunos nuevos fragmentos de código que es necesario aprender, pero el Responsive Web Design no es un nuevo lenguaje de programación. La creación de un sitio web Responsive sólo requiere HTML, CSS, y a veces, un poco de JavaScript. Si ya sabes cómo crear un sitio web, para crear uno Responsive el 90% de lo que tendrás que hacer es lo mismo que lo que haces al crear un sitio web que no lo es. Pero además de utilizar algunas de técnicas nuevas, necesitarás manejar las básicas correctamente, utilizando un marcado correctamente estructurado compatible con los estándares (HTML y CSS). Sin esta base sólida, no podrás tener confianza en que tu web funcione correctamente y que se muestre adecuadamente en los dispositivos.

El objetivo del Responsive Web Design es proporcionar un diseño y una experiencia de usuario óptima para cualquier dispositivo.