Rediseño HA! (Parte 3 — Layout)

Traducción al español del tercer post, escrito en tiempo real, sobre el rediseño de la web historia-arte.com. Ver la versión original en gallego

Rediseño HA! (Parte 2 — Tipografía)

En HA!, la parte más importante es la ficha de una obra de arte. Es el motivo principal por el que existe la web y se actualiza diariamente y acapara la inmensa mayoría de visitas. Desde el principio, la propuesta siempre fue darle el máximo protagonismo a esta página, haciendo uso del color y distribución de los elementos para conseguir una lectura más inmersiva, por eso será el primer sitio donde aplicaremos el nuevo diseño.

Actualmente, cada página tiene unos colores propios, sacados del propio cuadro, y existen dos tipos de layouts: para imágenes horizontales y verticales.

Dos fichas distintas: una con un cuadro de proporciones verticales y otra horizontal, con gamas de cores distintas

En el nuevo diseño quiero ir un poco más lejos con esta estrategia de layouts que tienen en cuenta la proporción horizontal/vertical de la imagen, creando un sistema que contemple más casos y así evitar los problemas que había ahora con los casos más extremos (imágenes excesivamente horizontales o demasiado cuadradas).

Paso 1: distribución

Podemos dividir la ficha de una obra en 4 bloques distintos:

• Header: Contiene el título y subtítulo de la obra, así como el nombre del artista y año en el que fue creada la obra.
• Info: El resto de información estructurada de la obra: título original, museo en el que se encuentra, etiquetas, movimiento al que pertenece, técnica, etc.
• Body: El texto con el comentario de la obra.
• Image: La fotografía con la obra de arte.

Si pensamos en diferentes modos de distribuir estos cuatro elementos por la pantalla, podemos obtener combinaciones como las siguientes:

Distintas combinaciones de los cuatro elementos de la ficha.

La combinación de estos cuatro elementos (o áreas, como se les llama en CSS Grid Layout) son los que van a conformar las distintas opciones de layout.

Paso 2: calculando proporciones

En esta nueva versión vamos a seleccionar los distintos layouts según las proporciones de la imagen, usando la siguiente formula:

proporción = (ancho / alto) * 100

Una imagen cuadrada siempre tendrá una proporción de 100 (por ejemplo, si mide 500x500px, la operación sería: (500/500) * 100 = 100). Si es horizontal, el resultado es mayor a 100, por ejemplo: (750/500) * 100 = 150. Y si es vertical, el resultado es menor de 100. El tener un número único que representa la proporción de cada imagen, nos permite definir diferentes intervalos para diferentes layouts, como se muestra en la tabla siguiente:

Siete novias para siete hermanos, o siete proporciones para siete layouts

Los cuadrados azules representan diferentes proporciones según la fórmula indicada anteriormente. El cuadrado 50 equivale a una proporción del doble de alto que de ancho, el 75 sería de 3 cuartas partes, 100 sería imagen cuadrada, etc… Despues tenemos los puntos de corte, es decir, el punto intermedio entre una proporción y otra.

La idea es que todas las imágenes que sean muy verticales, hasta un máximo de 62,5 usen el mismo layout 50. Si la imagen tiene entre 62,5 hasta 87,5 utiliza el layout 75. Y para los casos extremadamente horizontales (a partir de 187,5) usan el layout 200.

Paso 3: juntando todo

Una vez tenemos los elementos y sus distribuciones, definidas en el paso 1, y las proporciones para los layouts definidas en el paso 2, solo nos queda juntar todo para construir el nuevo sistema. Para eso usamos una combinación entre la proporción de la imagen y el tamaño/proporción de la ventana del navegador, para obtener la mejor distribución posible. Simplificando mucho, el sistema se podría resumir con el siguiente cuadro:

Comportamiento de cada layout a diferentes anchos

Cada fila representa un layout distinto, teniendo en cuenta la proporción de la imagen. Cada columna representa distintos anchos del navegador para ver como se van recolocando los elementos desde tamaños de móvil hasta pantallas más grandes.

Existen muchos otros detalles en la implementación de este sistema que no voy a explicar demasiado por brevedad, pero comento algunos puntos clave:

• Para los espacios en blanco, usé un sistema que trata de modo independiente la separación horizontal (entre distintas columnas) y la vertical, usando las medidas tipográficas definidas en el capítulo anterior.
• Para cambiar la distribución de los elementos, no solo se controla el ancho de la ventana del navegador, sino que también es muy importante la proporción, que se puede controlar por css con min-aspect-ratio y max-aspect-ratio.
• Y otros detalles como mostrar el texto en columnas, jugar con el scroll para que la imagen esté siempre visible, etc.

En el siguiente vídeo se puede ver un ejemplo de una página con el layout antiguo y el nuevo:

Ejemplo del layout actual y el rediseño utilizado en https://historia-arte.com/obras/muerte-de-pablo-escobar

Testeando

Es posible comparar cualquier obra con el layout antiguo y el nuevo, gracias al nuevo subdominio https://v2.historia-arte.com que servirá de testing. Por ejemplo la obra El beso se puede ver con el nuevo layout simplemente añadiendo el subdominio v2.

Sequel Pro, un programa gratuíto y muy sencillo que permite trabajar directamente con bases de datos MySQL y realizar todo tipo de consultas como por ejemplo obtener la proporción de todas las imágenes.

Una buena manera de comprobar que los layouts funcionan correctamente es revisando los casos más cerca de los puntos de corte. Por ejemplo, si el layout 150 comprende desde la proporción 137,5 hasta la 162,5, debemos revisar que la imagen más estrecha y la mas ancha dentro de ese rango funcionen correctamente. Para eso podemos echar mano de un excel o similar con todas las imágenes y su proporción, y así encontrar fácilmente estos casos extremos y probarlos. Trabajando directamente con datos, también podemos ver qué proporciones son las más comunes y así poder asegurarnos que funcionan correctamente. También es interesante poder saber las resoluciones de pantalla de los visitantes, para asegurarnos que los tamaños más comunes se vean correctamente, algo que cualquier herramienta como Google Analytics o Matomo (la que usamos en HA!), puede proporcionar.

Hay que comentar también que el CSS que hace posible (o menos complicado) este proceso usa propiedades como grid, variables, columns, etc… que no están soportadas por navegadores antiguos como Internet Explorer. La estrategia aquí es aplicar Progressive enhancement, es decir: que los navegadores actuales (el equivalente al 93% de nuestras visitas) se puedan beneficiar de estas mejoras y el resto de navegadores antiguos simplemente puedan visitar la web y acceder al contenido.

Por supuesto, estas páginas no están acabadas. Falta por aplicar color, que trataré en próximos capítulos. Y además de colores y layouts, podríamos introducir muchas más condiciones, por ejemplo:

• El año en el que se creó la obra o movimiento al que pertenece: podríamos añadir algún cambio en el diseño si la obra es del Quattrocento o pertenece a alguna de las vanguardas del siglo XX?
• Técnica: podríamos tener en cuenta si la obra es pintura, escultura o video?
• Extensión del texto: poder usar varios layouts teniendo en cuenta también si contiene mucho texto o poco
• Etc…

Crear este tipo de páginas es como ser el director de una orquesta. Cada instrumento se trabaja independientemente, con una partitura propia, que por si sola puede no tener mucho valor pero cuando todos los instrumentos están sonando al mismo tiempo es cuando se puede apreciar la música. En este caso, los instrumentos son la tipografía, el layout, el color, los espacios en blanco, etc.

En próximos capítulos tocaremos más.

Rediseño HA! (Parte 4 — El color)