Responsive Web Design

Hace un año, más o menos, leí un libro increíble de Ethan Marcotte llamado Responsive Web Design. Cambió por completo cómo veía el diseño en web. Creo que ya percibía el hecho de que cada vez nos estamos moviendo a un internet más móvil, pero no había imaginado las consecuencias de eso sobre el diseño.

Mes tras mes analizo los analytics de las páginas de mis clientes y hay una tendencia innegable: cada vez más gente se mete a través de iPhones, Androids, iPads, y demás dispositivos que no son una computadora normal.

La forma tradicional de enfrentar este problema es tener 2 páginas, la normal y la versión móvil. No sé por qué pero hay algo que me disgusta de los sitios que son m.tupagina.com o movil.tupagina.com. Siento que a esa segunda versión no le echaron tantas ganas. Conforme veo que más gente ve las páginas de mis clientes en sus celulares, más me convenzo de que las versiones móviles no pueden estar hechas con menos ganas, y Responsive Web Design es una excelente manera de asegurar eso.

La premisa básica es que tienes una sóla página que responde a las necesidades del navegador que se está usando para verla. Esto lo hace un tanto más difícil de hacer, pero te ahorra otros dolores de cabeza, el mayor de los cuales es tener que mantener dos versiones de tus sitios.

Cada vez más compañías se están moviendo para allá, y es una experiencia interesante ver cómo todos estamos sufriendo por cosas similares. El Boston Globe fue el primer periódico (que yo sepa) que introdujo este tipo de diseño, y la neta, mis respetos. Yo he sufrido muchas horas por problemas pequeños antes de darme cuenta que ellos ya lo resolvieron y de una manera mucho más elegante de lo que se me pudo haber ocurrido a mí.

Llevamos ya casi un año sacando páginas exclusivamente en RWD y nuestros clientes están fascinados. Nosotros nos hemos emocionado también lo suficiente con esto que hasta los CMS que hemos diseñado para correr los sitios de clientes están diseñados para ser responsivos. Es de lo más cómodo poder hacer cambios a tu página desde tu celular en cualquier lado y trabajar con una interfaz hecha para el dispositivo que tengas a la mano.

Si hay alguien por ahí que esté interesado en jugar a esto del RWD, les puedo recomendar algunas herramientas que uso:

  • Gridset: La mejor manera de planear layouts responsivos.
  • A Book Apart: La editorial más fregona para diseñadores web.
  • Responsive.is: Una excelente manera de probar tus diseños en distintos tamaños estándar.
  • Mediaqueri.es: Excelente fuente de inspiración.

Pronto, un rant sobre tipografía.