Redeseño HA! (Parte 3 — Layout)

Terceiro post, dunha serie escrita en tempo real, sobre o redeseño da web historia-arte.com

Ver versión traducida al español

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

En HA!, a parte máis importante é a ficha dunha obra de arte. É o motivo principal polo que a web existe e se actualiza diariamente e acapara a inmensa maioría de visitas. Dende o principio, a proposta sempre foi darlle o máximo protagonismo a esta páxina, facendo uso da cor e distribución dos elementos para conseguir unha lectura máis inmersiva, por iso será o primeiro sitio onde aplicaremos o novo deseño.

Actualmente, cada páxina ten unhas cores propias e hai dous tipos de layouts: para imaxes horizontais e verticais.

Dúas fichas distintas: unha cun cadro de proporcións verticais e outra horizontal, con gamas de cores distintas

No novo deseño quero ir un pouco máis alá con esta estratexia de layouts que teñen en conta a proporción horizontal/vertical da imaxe, creando un sistema que contemple máis casos para evitar os problemas que había agora cos casos máis extremos (imaxes excesivamente horizontais ou demasiado cadradas).

Paso 1: distribución

Podemos dividir a ficha dunha obra en 4 bloques distintos:

• Header: Contén o título e subtítulo da obra, así como o nome do artista e ano no que foi creada a obra.
• Info: O resto de información estruturada da obra: título orixinal, museo no que está, etiquetas, movemento ao que pertence, técnica, etc.
• Body: O texto co comentario da obra.
• Image: A fotografía coa obra de arte.

Se pensamos en diferentes xeitos de distribuír estes catro elementos pola pantalla, podemos obter combinacións como as seguintes:

Distintas combinacións dos catro elementos da ficha.

A combinación destes catro elementos (ou áreas, como se chaman en CSS Grid Layout) son os que van a conformar as distintas opcións de layout.

Paso 2: calculando proporcións

Nesta nova versión imos seleccionar os distintos layouts segundo as proporcións da imaxe, usando a seguinte fórmula:

proporción = (ancho / alto) * 100

Unha imaxe cadrada sempre vai ter unha proporción de 100 (por exemplo, se mide 500x500px, a operación sería: (500/500) * 100 = 100). Se é horizontal, o resultado é maior a 100, por exemplo: (750/500) * 100 = 150. E se é vertical, o resultado é menor de 100. Ao ter un número único que representa a proporción de cada imaxe, podemos definir diferentes intervalos para diferentes layouts, como se mostra na seguinte táboa:

Sete noivas para sete irmáns, ou sete proporcións para sete layouts

Os cadrados azuis representan diferentes proporcións segundo a fórmula indicada anteriormente. O cadrado 50 equivale a unha proporción do dobre de alto que de ancho, o 75 sería de 3 cuartas partes, 100 sería imaxe cadrada, etc… Logo temos os puntos de corte, ou sexa, o punto intermedio entre unha proporción e outra.

A idea é que todas as imaxes que sexan moi verticais, ata un máximo de 62,5 usarán o mesmo layout 50. Se a imaxe ten entre 62,5 ata 87,5 empregará o layout 75. E para os casos extremadamente horizontais (a partir de 187,5) empregarán o layout 200.

Paso 3: xuntando todo

Unha vez temos os elementos e as súas distribucións, definidas no paso 1, e as proporcións para os layouts definidas no paso 2, só nos queda xuntar todo para construír o novo sistema. Para iso usamos unha combinación entre a proporción da imaxe e o tamaño/proporción do marco do navegador, para obter a mellor distribución posible. Simplificando moito, o sistema poderíase resumir co seguinte cadro:

Comportamento de cada layout a diferentes anchos

Cada fila representa un layout distinto, tendo en conta a proporción da imaxe. Cada columna representa distintos anchos do navegador para ver como se van recolocando os elementos dende tamaños de móbil ata pantallas máis grandes.

Existen moitos outros detalles na implementación deste sistema que non vou explicar demasiado por brevidade, pero comento algúns puntos clave:

• Para os espazos en branco, usei un sistema que trata de xeito independente a separación horizontal (entre distintas columnas) e a vertical, usando as medidas tipográficas definidas no capítulo anterior.
• Para cambiar a distribución dos elementos, non só se controla o ancho do marco do navegador, senón que tamén é moi importante a proporción, que se pode controlar por css con min-aspect-ratio e max-aspect-ratio.
• E outros detalles como mostrar o texto en columnas, xogar co scroll para que a imaxe estea sempre visible, etc.

No seguinte vídeo pódese ver un exemplo dunha páxina co layout antigo e o novo:

Exemplo do layout actual e o redeseño empregado en https://historia-arte.com/obras/muerte-de-pablo-escobar

Testeando

É posible ver calquera obra co layout antigo e o novo, grazas ao novo subdominio https://v2.historia-arte.com que servirá para testing. Por exemplo na obra El beso pódese ver a versión co novo layout simplemente engadindo o subdominio v2.

Sequel Pro, un programa gratuíto e moi sinxelo que permite traballar directamente con bases de datos MySQL e facer todo tipo de consultas, como por exemplo obter as proporcións de todas as imaxes.

Unha boa maneira de comprobar que os layouts funcionan correctamente é revisando os casos máis preto dos puntos de corte. Por exemplo, se o layout 150 comprende dende a proporción 137,5 ata a 162,5, debemos revisar que a imaxe máis estreita e a máis ancha dentro dese rango funcionan correctamente. Para iso podemos xerar un excel ou similar con todas as imaxes e a súa proporción, e así atopar facilmente eses casos extremos e probalos. Traballando directamente con datos, tamén podemos ver que proporcións son as máis comúns e así poder asegurarnos que funcionan correctamente. Tamén é interesante poder saber as resolucións de pantalla dos visitantes, para asegurarnos de que os tamaños máis comúns se vexan correctamente, algo que calquera ferramenta como Google Analytics ou Matomo (a que usamos en HA!), pode proporcionar.

Hai que comentar tamén que o CSS que fai posible (ou menos complicado) este proceso usa propiedades como grid, variables, columns, etc… que non están soportadas por navegadores antigos como Internet Explorer. A estratexia aquí é aplicar Progressive enhancement, é dicir: que os navegadores actuais (o equivalente ao 93% das nosas visitas) se poidan beneficiar destas melloras e o resto de navegadores antigos simplemente poidan visitar a web e acceder ao contido.

Por suposto, estas páxinas non están rematadas. Faltaría aplicarlle a cor, que tratarei en próximos capítulos. E ademais de cores e layouts, poderíamos introducir moita máis condicións, por exemplo:

• O ano en que a obra se creou ou movemento ao que pertence: poderíamos engadir algún cambio no deseño se a obra é do Quattrocento ou pertence a algunha das vangardas do século XX?
• Técnica: poderíamos ter en conta se a obra é pintura, escultura ou vídeo?
• Extensión do texto: poder usar varios layouts tendo en conta tamén se contén moito texto ou pouco
• Etc…

Crear este tipo de páxinas é como ser o director dunha orquestra. Cada instrumento esta traballado de xeito independente, cunha partitura propia, que por si soa pode non ter moito valor pero cando todos os instrumentos están soando ao mesmo tempo é cando se pode apreciar a música. Neste caso, os instrumentos son a tipografía, o layout, a cor, os espazos en branco, etc.

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

Redeseño HA! (Parte 4 — A cor)