¿De que hablamos cuando hablamos de Responsive web design?
Se habla mucho de Responsive Web Design y ahora vengo yo y hablo un poco más, o digo más de lo mismo. Mi intención por el momento es hacer una introducción sin meterme demasiado en lo técnico. El Responsive Web Design o diseño web sensible fue introducido por Ethan Marcotte en el artículo Responsive Web Design que publicó en A List Apart en 2010. Esta nota generó un movimiento muy grande en el ámbito del diseño y desarrollo e hizo que muchos profesionales web comenzaran a utilizarlo para sus proyectos.
Antes del Responsive Web Design, si una empresa quería que su sitio web se pudiera acceder desde dispositivos móviles, tenía que crear un sitio paralelo, creado y optimizado para ello. A veces eran varios los sitios a crear. Cada uno de estos sitios debía detectar desde que dispositivo se accedía, para redireccionar hacia la web correspondiente: si veíamos una web desde un teléfono móvil, al abrir la página nos dirigía a una versión paralela, hecha solo para ese teléfono. Esta práctica era muy costosa ya que obligaba a mantener varios sitios, cada uno con sus problemas, sus errores, imágenes optimizadas, tipografías, costos, responsables de cada sitio, etc.
El concepto de Responsive Web Design es exactamente el opuesto: una única web, sensible a los distintos dispositivos y que muestra un diseño adaptado a cada uno de estos. Esta es una respuesta lógica a la gran cantidad de dispositivos que hay hoy en el mercado (y los que vendrán a futuro), cada uno con sus propias dimensiones de pantalla, su densidad de píxeles, etc.
Nos guste o no a los diseñadores web, ahora también diseñamos para dispositivos móviles. Está en nosotros saber modular los distintos elementos que componen una web para que se adapten tanto a un teléfono como a un ordenador con una pantalla de 27 pulgadas. Para ello, es necesario conocer las tres bases que hacen que un sitio web sea sensible: diseño flexible, imágenes flexibles y media queries.
Los media queries nos permiten preguntar desde que dispositivo estamos viendo el sitio web para así mostrar el diseño correcto. Las imágenes flexibles se adaptan al tamaño de su contenedor y el diseño flexible nos permite adaptar, con mínimos cambios de código, nuestro diseño a cada dispositivo.
Una buena manera de comenzar a diseñar un sitio sensible es utilizando como base una grilla flexible. Ahora que los tamaños de pantalla han cambiado tanto ya no es práctico diseñar sobre una grilla basada en píxels o ems. La respuesta es trabajar con porcentajes, lo cual nos ayuda a independizarnos de los píxels y además, mantener nuestro CSS lo más pequeño posible.
La grilla flexible funciona correctamente para algunos tamaños de pantalla, pero cuando nos vamos a los extremos necesitamos cambiar la estructura. En esto nos ayudan los media queries. Por ejemplo, si tenemos una página con tres columnas (33% de ancho cada una) con texto e imágenes y la vemos en 1024 px (iPad horizontal), seguramente se verá correctamente en 768 px (iPad vertical); las columnas serán más estrechas pero el contenido se verá sin problemas. Si llevamos estas tres columnas a un iPhone (320x480px) será muy difícil ver el contenido. Por medio de los media queries (CSS) podemos indicar que, en caso de que la pantalla sea menor que 480 px las columnas deberán estar al 100%, lo que hace que queden unas encima de otras. Las imágenes que antes ocupaban todo el ancho de esas columnas (el 100% de un 33%) ahora deberán ocupar el 100% del nuevo ancho de columna (100%).
Este es un ejemplo muy básico y en futuras entradas escribiré mucho más acerca de este tema. En esta entrada solo quería hacer una breve introducción, ya que el tema es muy grande y está en constante evolución: tipografías, viewports, imágenes para retina display, javascript para ocultar y mostrar la navegación, etc. Si sigo escribiendo nos va a agarrar la navidad y no es el caso; de hecho, ya casi estamos en Festivus.
Si quieren ver buenos ejemplos de Responsive Web Design, pueden visitar mediaqueri.es.
Felicidades a todos.
