Learning Responsive Web Design

Guía de iniciación de Clarissa Peterson, diseñadora UX y desarrolladora web, publicada por O'Reilly en 2014 a todo color. Explica cómo crear sitios que se adapten a cualquier tamaño de pantalla con HTML5 y CSS3. Aunque el subtítulo dice que es para principiantes y está dirigida a diseñadores, desarrolladores y otros perfiles del equipo, conviene llegar con una base sólida de HTML y CSS y nociones de JavaScript.

El libro tiene cuatro partes. En los fundamentos repasa el origen del diseño responsive, desde el iPhone hasta CSS3, y su base: maquetación flexible con unidades relativas y media queries. También explica por qué la estrategia de contenido debe ir antes del diseño visual. En la parte práctica trabaja con elementos estructurales de HTML5 y atributos WAI-ARIA, el modelo de caja y los prefijos de navegador, media queries y breakpoints, mejora progresiva, rejillas de 12 columnas e imágenes flexibles con max-width. Después trata el flujo de trabajo: diseñar primero para pantallas pequeñas (mobile first), prototipar en el navegador o con herramientas de Adobe como Edge Reflow, entrada táctil y accesibilidad. Termina con tipografía, patrones de navegación responsive y un capítulo detallado de rendimiento: herramientas de medición, minificación, menos peticiones HTTP y JavaScript que no bloquee la carga.

La parte práctica sigue un sitio de ejemplo a lo largo de varios capítulos, así que se aprende aplicando cada técnica sobre el mismo proyecto. Su punto fuerte es que trata el diseño responsive como un proceso completo, con contenido, UX, diseño y rendimiento, y no solo como un truco de CSS. Algunas partes son más discursivas que prácticas, y es anterior a la adopción general de Flexbox, CSS Grid y las imágenes responsive con srcset y picture. También incluye trucos de compatibilidad con Internet Explorer 8 que hoy sobran. Sigue siendo una buena base conceptual, pero hay que actualizar las técnicas de maquetación.