El rediseño de la revista Mosaic debía concebirse en una estructura responsive e integrarse en el CMS WordPress. Tras la concepción inicial, explicada en el artículo anterior, procedimos a desarrollar los diferentes layouts que componían la web y que seguirían una estrategia de desarrollo mobile first: decidir primero la distribución para la pantalla pequeña, e ir haciendo correcciones de estilo mediante media queries para las pantallas más grandes.

Layouts y breakpoints

En una web responsive, los puntos donde confluyen varios cambios de estilo o cambios estructurales se conocen como breakpoints o puntos de corte. En Mosaic, estos puntos no están seleccionados en base a las dimensiones de ningún dispositivo en concreto, sino que se decidieron en función de las necesidades del contenido: cuando un contenido dejaba de verse correctamente, se aplicaba una corrección mediante una media query.
De esta forma, hay un layout básico al que se aplican modificaciones en cuatro puntos: a partir de 400px, de 700px, de 1025px y de 1400px. Además, las media queries se escribieron en ems (25em, 43.75em, 64em y 87.5em) para facilitar la adaptación del layout en caso de el tamaño de letra base del navegador fuera diferente de 16px.

Navegación responsive

La navegación de la revista Mosaic se dividió en 2 niveles principales: general (Noticias, Archivo, Formación, Acerca de) y por bloques temáticos (Diseño, Interacción, Tecnologías, Redes). Además, contaba con un buscador y casi 30 subcatergorías que dependían de los bloques temáticos. Gestionar toda esta información en pantalla pequeña era uno de los principales retos de este rediseño responsive.
Para que la navegación no dependiera exclusivamente de JavaScript, y al mismo tiempo evitar flashes de redibujado en el layout, la técnica empleada fue la de cargar los links de navegación en el footer e introducir enlaces en la cabecera hacia estas secciones: si JavaScript no estuviera disponible, accionar estos enlaces llevaría directamente al footer; si JavaScript estuviera disponible, sobreescribiría el comportamiento de estos enlaces y se desplegaría el menú siguiendo un patrón de fly-out (oculto en un lateral, desplegado desplazando el contenido hacia la derecha). Para pantallas más grandes, estos enlaces internos se ocultarían y la navegación principal, ubicada en el footer, se posicionaría absolutamente en la parte superior.

Iconografía

Desde la irrupción de las pantallas de alta densidad de píxeles, se han popularizado los formatos vectoriales para mostrar iconos, sea con archivos SVG o con tipografías de iconos. Para Mosaic decidimos emplear una tipografía de iconos por su versatilidad (la tipografía constituye en sí misma una especie de sprite y es fácil de modificar con CSS), y creamos la tipografía a medida con la herramienta Icomoon.
Sin embargo, optar por una tipografía de iconos suponía una complicación para los navegadores que no soportasen la propiedad @font-face (por ejemplo, Opera Mini), por lo que para suplir este problema decidimos detectar el soporte de esta propiedad con la librería Modernizr y mostrar, en caso de no soporte, un texto alternativo que indicara al usuario a qué acción correspondería el link de cada icono.

Imágenes y vídeos

Los artículos de Mosaic cuentan a menudo con imágenes y vídeos que ilustran sus contenidos. Para las imágenes, decidimos evitar los plugins habituales y crear una lightbox propia que permitiera mostrar una imagen a tamaño más grande sin salir de la página. Decidimos no incluir una función de galería porque no respondía al flujo normal de lectura de un artículo.
Los vídeos cargados desde un proveedor externo (Youtube, Vimeo…) suponían un problema mayor para una estructura responsive, pues al contrario que las imágenes o los vídeos propios, un iframe no se suele redimensionar manteniendo un aspect-ratio en concreto. Una solución habitual para este problema es una librería de JavaScript llamada FitVids.js, pero finalmente decidimos resolverlo con un juego de position y padding como el que se propone en embedresponsively.com.
Para toda la integración en WordPress tuvimos la suerte de contar con la ayuda de Núria Ramoneda, que preparó la template y coordinó la transición a una nueva Mosaic con 10 años de antiguos contenidos, sobre lo que hablará en el siguiente artículo. Ha sido un proyecto con muchos retos y novedades para nosotros, y hemos tenido la oportunidad de trabajar con un equipo excepcional del que hemos aprendido muchísimo.

Cita recomendada: USOBIAGA, Javier y ARMADA, Marta. Rediseño responsive de Mosaic (parte II): Desarrollo front-end. Mosaic [en línea], mayo 2014, no. 118. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n118.1422.