Qué es Responsive Web Design, un término que se refiere a la adaptabilidad de las páginas web a todo tipo de medios, pantallas y dispositivos. En este artículo explicaremos el origen y la importancia de este conjunto de técnicas de diseño web.
Responsive Web Design es la técnica que nos permite crear sitios adaptables a las condiciones del ordenador o dispositivo desde donde se van a acceder, sobre todo en lo que tiene relación con la pantalla del sistema donde se están visualizando. Aunque el término es suficientemente general como para poder referirse a una adaptabilidad en torno a cualquier condición. En este artículo vamos a intentar aclarar el término para que los lectores sepan bien a qué nos referimos.
Para abordar el Responsive Web Design vamos a tratar los siguientes apartados de interés.
¿Qué significa responsive?
Responsive es una palabra en ingles que significa "sensible" o "perceptible". En todo caso, entre sus muchas acepciones con "responsive" nos referimos de manera general a la característica de un sistema que es capaz de tener una respuesta hacia el medio que le rodea.
No es algo específico de la web, sino que lo encontramos en el día a día. Por ejemplo, una luz que se enciende cuando alguna persona pasa al lado, una puerta que se abre cuando nos situamos cerca para entrar o un semáforo que se pone en rojo cuando pasa un coche a velocidad mayor de la permitida. Todo ello son sistemas "responsive", que tienen una respuesta conforme al medio o las condiciones donde se encuentran.
La traducción podría ser "Responsivo", que sí se encuentra en el diccionario de la Real Academia Española y significa "Perteneciente o relativo a la respuesta". Sin embargo en términos de una página web sería más adecuado usar la palabra "Adaptable", pues la página es capaz de adaptarse al dispositivo u ordenador donde se encuentra. En fin, aunque el término esté en inglés es suficientemente conocido en el mundo del diseño como para usar la palabra "Responsive" sin necesidad de traducirlo al español, la menos por lo que respecta al público al que nos dirigimos, por lo que preferimos no traducirlo.
Marco actual donde surge el Responsive Web Design
Antes de introducirnos en el término responsive en particular en el ámbito del diseño web es necesario entender el estado actual de la web y la enorme cantidad de dispositivos que permiten acceder a ella.
Cuando se inventó la web y en las primeras décadas de funcionamiento de este medio existían solo ordenadores donde se consumían los contenidos. Sin embargo hoy podemos consultar Internet en cualquier tipo de dispositivo: móviles, tablets, televisores, libros electrónicos, relojes e incluso neveras permiten acceder a la Web y sus servicios.
La web por tanto la web debe antender a múltiples medios, que tienen ademñas distintas características. Generalmente el detalle más marcante es la pantalla, pero tenemos que entender que no solamente puede ser la pantalla, sino también la paleta de colores, la resolución, densidad de píxeles, si un medio es táctil o no, etc. Los diseñadores web, por tanto, deben preocuparse actualmente en que los sitios se consuman correctamente en cualquier medio o dispositivo.
¿Versión para móviles?
Tradicionalmente en la web los sitios estaban optimizados para ordenadores de escritorio. Luego, al popularizarse el acceso a Internet en móviles, o al introducirse el mercado de los tablets, lo habitual era la existencia de diversas versiones de un mismo sitio, creadas y optimizadas específicamente para teléfonos, tabletas y ordenadores personales.
Aún seguimos viendo esa solución en la Internet de hoy e importantes sitios mantienen versiones distintas para su web. Esa forma de trabajar era mayoritaria hasta el año 2010 aproximadamente, sin embargo, no es práctica.
Hacer una versión para escritorio y otra para móviles nos obligaba a diseñar una web varias veces y mantener layouts para diversos tipos de dispositivos. El trabajo por tanto se duplicaba o triplicaba y no solo el de creación del sitio, sino lo que es peor, el de mantenimiento. Por ejemplo, si el administrador de una web decidía crear una nueva sección, o reformular una existente, estaba obligado a actualizar las webs de cada uno de los sistemas para los que había creado versiones distintas.
Pero el problema se agravó con la llegada de la Internet en la televisión, en el coche, etc. ¿Qué tenemos que hacer? ¿una versión web para cada uno de los dispositivos nuevos que vayan apareciendo? El trabajo podría no tener fin y afortunadamente la tendencia no va por ahí.
Para atender a las necesidades actuales y futuras, necesitamos crear sitios web que sean adaptables a cualquier medio donde queramos consumirlas, presentes y futuros. Tener una única web es la mejor situación y justamente la mejor ventaja que nos ofrece el "responsive".
Tecnología que surge para cubrir las necesidades de adaptabilidad
Aparentemente, el trabajo de adaptar una web no es tan complicado, pero hace falta tecnología que nos permita realizarlo. En la segunda y tercera generación de sitios y antes de la implantación de las CSS3, teníamos pocas herramientas para conseguir la deseada adaptabilidad. Existían los diseños fluidos y en DesarrolloWeb.com ya hablábamos de ellos en 2001, que en contraposición de los sistemas rígidos permitían tener layouts capaces de utilizar todo el ancho de la pantalla. Era lo más parecido a un sitio responsive de hoy.
Las páginas fluidas se construían con contenedores que tenían la anchura de la ventana donde estaban visualizándose. Sin embargo, estaban pensados para que una web se viese bien en pantallas de 800, 1024 o 1280 píxeles de ancho. No estaban ingenidados con las características de los móviles en la cabeza. Hacer que una tabla (en aquel momento aún se llevaba la maquetación con tablas y se estaba comenzando a ver la maquetación con CSS) o un elemento DIV tenga la anchura de la pantalla es muy sencillo, pues requiere solo un atributo de estilo, sin embargo, conseguir que tu diseño se vea bonito en cualquier dimensión ya no es tan fácil.
Sobre todo hay que pensar que con la llegada de los móviles el rango de dimensiones habituales de las pantallas es mucho más amplio. Tenemos pantallas que van desde los 300 píxeles de ancho a los 2000 o 3000 píxeles o más. De hecho, hoy incluso hay pantallas que superan los 5000 píxeles de ancho. Si estiras un diseño concebido para 300 píxeles de ancho, para llevarlo a dimensiones del doble de anchura, el triple, o más, en la mayoría de los casos tendrás un diseño horrible. Como no había tecnología para poder crear sitios elásticos que se vieran bien en cualquier dimensión de pantalla, los autores de web establan obligados a crear diferentes versiones de las páginas.
En resumen, 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 sobre todo a las Media Queries o a atributos tan simples como max-width o min-width (aunque estos últimos pertenencen a CSS 2.1). Gracias a estas utilidades somos capaces de reaccionar ante distintas circunstancias como la anchura de la pantalla, ventana o contenedor donde están aquellos elementos a maquetar. Los veremos con calma a lo largo del Manual de Responsive Web Design.
Origen del término Responsive Web Design
No podemos terminar este artículo sin dar crédito al diseñador que acuñó el término de "Responsive Web Design". Se trata de Ethan Marcotte que publicó un post en "List Apart" y un libro donde explicaba todas las circunstancias y técnicas relacionadas con el diseño adaptable.
Aunque es cierto que no fue el primer diseñador que pensó en la necesidad de adaptar el layout de las webs a las diferentes pantallas (de hecho los creadores del estándar CSS ya habían creado tecnologías para producir sitios adaptables), sí fue el primero en usar ese término que hoy es tan popular.Cómo aprender Responsive Web Design
En DesarrolloWeb.com somos de los pioneros en acercar el término en español a la comunidad, en diversos eventos en directo y conferencias. Estos vídeos se pueden complementar con el Manual de Responsive web Design.
En EscuelaIT se ofreció el primer curso de Responsive Web Design en español que actualmente sigue siendo una fuente increíble de recursos indispensables para el aprendizaje de diseño web.
Conclusión
En resumen y como conclusión podemos decir que "Responsive" engloba muchos campos, pensamientos, prácticas, tencologías y técnicas que pueden incluso crecer con el tiempo. A medida que aparecen nuevos sistemas y dispositivos singulares, surgen nuevas necesidades, a las que se da respuesta ya sea con técnicas reformuladas, usando tecnologías existentes, o con tecnologías y estándares nuevos. Todo ello lo iremos cubriendo en este manual.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...