Due famiglie da cinque

Cinque pagine del nostro sito non avevano illustrazione: l’indice della documentazione, l’indice dei tutorial, la pagina dei partner, l’indice del blog e la pagina dei contatti. Tutto il resto ne aveva una. Il compito era disegnare cinque immagini che sembrino appartenere all’insieme.

Appartenere a che cosa, esattamente, è la domanda, e non è una domanda a cui si possa rispondere guardando. Dieci immagini esistenti, viste una alla volta su dieci pagine diverse nell’arco di parecchi mesi, producono l’impressione sicura di uno stile di casa. Quell’impressione non vale nulla, e abbiamo il conteggio che lo dimostra.

Lo stile non esisteva

Un breve script ha percorso tutte e dieci le immagini su un canvas e ha contato i pixel scuri: luminanza pari o inferiore a 110, alfa pari o superiore a 200, quantizzati a sedici livelli così che l’antialiasing non produca mille colori quasi identici.

Il risultato erano due gruppi da cinque, senza alcuna sovrapposizione.

Cinque a cinque. Non c’è maggioranza. Se qualcuno lo avesse valutato a occhio, avrebbe scelto il gruppo che aveva guardato più di recente e prodotto una sesta immagine intonata a metà del sito.

Le cinque nuove seguono il primo gruppo, e la ragione non è il conteggio. Le immagini di confronto sono una sottofamiglia con un proprio componente, un proprio rapporto di forma e un proprio posto nel prodotto; sono un tipo diverso di pagina che fa un lavoro diverso. Le nuove illustrazioni stanno accanto al primo gruppo, quindi disegnano come il primo gruppo. La misura non ha preso la decisione. L’ha resa possibile, sostituendo una sensazione su uno stile di casa con due fatti su due insiemi.

Un colore che non sta nel foglio di stile è un colore inventato

Il blu notte che domina il primo gruppo non compare da nessuna parte nel nostro foglio di stile. È un colore arrivato con quelle immagini e senza nome nel sistema di design.

Copiarlo in cinque file nuovi sarebbe stato esattamente ciò che questo turno doveva evitare: un valore che esiste solo perché qualcuno ha campionato un pixel. Le nuove immagini usano dunque il token il cui valore gli è più vicino e che sta nella stessa famiglia del colore del marchio. Non è identico. È difendibile, e si muove se il sistema si muove.

La prima stesura aveva anche un nastro di lettura arancione sull’immagine della documentazione, con il colore d’accento, perché un nastro è arancione. Anche quello lo ha deciso un secondo conteggio: delle dieci illustrazioni esistenti, su 1,79 milioni di pixel opachi, il numero di quelle con anche un solo pixel caldo è zero. Non poche: zero. Un solo elemento arancione avrebbe reso il nuovo disegno l’unica cosa calda del sito, che è una decisione che un giorno qualcuno potrà voler prendere di proposito e non è una decisione che un nastro debba prendere da solo.

Il bianco è dove atterra l’occhio

L’ultima proprietà condivisa è una che nessuno aveva annotato e che tutte e dieci rispettano: ogni immagine ha esattamente un piano bianco, ed è lì che va l’occhio. La facciata di un caveau, l’interno di uno scudo, le tessere attorno a un fulcro.

Quattro dei cinque nuovi disegni l’hanno raccolta naturalmente, perché un foglio di carta, un articolo, una lettera e un pulsante di riproduzione sono cose bianche. L’immagine dei partner no: due tonalità di blu, e nessun bianco da nessuna parte.

Sulla pagina dei partner sembrava a posto. Era palesemente sbagliata su un foglio di contatti, cioè una singola pagina generata che mette tutte e quindici le immagini fianco a fianco sul vero colore di sfondo. Un disegno in una fila di quindici che non ha un piano focale si legge come più piatto degli altri, subito, e non si legge affatto quando lo si guarda da solo. L’esagono di sinistra ora sta sul colore di superficie.

Se vuole fare un insieme, guardi l’insieme. Le pagine singole sono la superficie di revisione sbagliata per una proprietà che esiste solo nel confronto.

Una linea disegnata prima delle forme è una linea che non si vede

La prima versione dell’immagine dei partner aveva una linea di collegamento fra i due esagoni: un unico tratto orizzontale, largo 433 pixel, dichiarato prima delle due forme.

Ci ha pensato l’ordine del pittore. Gli esagoni ne coprivano la parte centrale, lasciando due monconi che sporgevano ai lati, e siccome l’esagono di destra aveva un’opacità di riempimento appena sotto l’uno, la parte coperta traspariva come una striscia fantasma che lo attraversava. Due difetti da un solo errore di ordine, ed entrambi sembrano un problema di disegno e non un problema di sorgente.

Il collegamento ora è la sovrapposizione stessa, ritagliata all’intersezione delle due forme, e nel file non c’è trasparenza parziale da nessuna parte. È anche un disegno migliore, oltre che funzionante: l’area condivisa fra due partner è l’idea, e una linea fra loro era un modo più debole di dirlo.

Due trattini chiudono un commento XML

Ognuno di questi file porta commenti che spiegano la geometria, e i commenti in un SVG viaggiano fino al browser. Misurato sulla prima versione: di 10.160 byte sui cinque file, 5789 erano commento. Il cinquantasette per cento di quello che avremmo spedito era una spiegazione di quello che spedivamo.

La spiegazione ora vive nel componente che fa riferimento alle immagini, dove è utile almeno altrettanto e non raggiunge il browser di nessuno. È un punto generale sulla differenza fra commenti nel sorgente e commenti in un asset: gli uni sono gratis, gli altri sono carico utile.

Il secondo punto è una regola e non una misura, ed è il genere di regola che serve una volta sola. Un doppio trattino termina un commento XML. Riferirsi a una proprietà CSS personalizzata con il suo nome dentro un commento SVG chiude quindi il commento in anticipo, in mezzo a una frase, e il resto di quella frase diventa markup. Il file allora non si analizza, e un SVG che non si analizza non produce un messaggio d’errore. Produce una risposta 200 e un’immagine vuota.

Le cinque attuali non contengono doppi trattini dentro alcun commento e tutte e cinque si analizzano come XML valido. Il modo di fallire è reale; dell’incidente specifico non posso consegnarLe una misura, perché quello stato non è mai stato committato.

Il testo alternativo non è una decisione di design

Un’illustrazione che non dice nulla che il titolo accanto non dica già è decorazione, e la risposta dell’accessibilità per una decorazione è un attributo alt vuoto, così che un lettore di schermo non legga ad alta voce «caveau con chiave» accanto a un titolo sulle credenziali che restano sul proprio host. Quel ragionamento è corretto e lo abbiamo seguito a lungo.

Non è però tutto il quadro, perché un crawler non sa distinguere la decorazione dal contenuto. Un audit SEO conta un alt vuoto come un alt mancante, e un rapporto pieno di attributi alt mancanti è un rapporto che nessuno legge.

Ogni illustrazione porta dunque ora una breve descrizione dal catalogo di traduzione, una descrizione per immagine e non per collocazione, dato che lo stesso disegno significa la stessa cosa su due pagine diverse. La guardia pretende un alt non vuoto su ogni illustrazione, il che significa che nasconderne una all’albero dell’accessibilità non è una scelta che qualcuno possa prendersi in silenzio. Una nuova illustrazione ha bisogno di una descrizione in tutte e nove le lingue prima di poter uscire.

Spostamento zero, e la controprova

La larghezza e l’altezza su ciascuna immagine sono le dimensioni del riquadro di vista del file stesso, e stanno lì per una sola ragione: perché il browser riservi lo spazio prima che arrivino i byte. La larghezza visibile viene dalle classi e non ha nulla a che fare con quei numeri.

Lo spostamento cumulativo dell’impaginazione su quarantacinque stati di pagina ha misurato 0,00000, che è un numero che da solo non significa nulla. Qualunque misura che riporti uno zero perfetto deve rispondere alla domanda se stesse guardando.

La stessa corsa è stata dunque ripetuta con le dimensioni tolte e un ritardo di 1500 millisecondi iniettato davanti alle immagini. Tredici stati su quindici si sono spostati. I due che non l’hanno fatto stanno nella cella più corta di una griglia, dove l’immagine non può cambiare l’altezza della riga qualunque cosa faccia, quindi il loro zero è strutturale e non accidentale. Questo è stato controllato uno per uno invece di essere liquidato, perché due zeri inspiegati in una controprova sono esattamente il posto in cui si nasconderebbe una lacuna vera.

C’è un altro dettaglio meccanico che vale la pena dire, dato che è facile sbagliarlo nell’altra direzione: queste immagini scavalcano completamente l’ottimizzatore di immagini del framework. Non è pigrizia. L’ottimizzatore rifiuta l’SVG a meno che non sia abilitata un’opzione specificamente pericolosa, quindi farcele passare produrrebbe un’immagine rotta e non una più piccola.

Una scoperta che non faceva parte del turno

Mentre si misuravano le larghezze, una classe di utilità su una pagina non collegata si è rivelata non fare assolutamente nulla. Imposta una larghezza massima che viene scavalcata da una classe dichiarata più avanti nel foglio di stile, quindi il valore è inerte da quando è stato scritto.

Nessuno se n’era accorto, perché l’elemento sembra ragionevole alla sua larghezza reale. È il modo ordinario in cui lo stile morto sopravvive: non è sbagliato sullo schermo, semplicemente non è la cosa che fa il lavoro, e l’unico modo di trovarlo è misurare una proprietà che si stava già misurando per un’altra ragione.

Che cosa annoteremmo

1. 01Uno stile di casa che nessuno ha mai contato potrebbe non esistere. Dieci immagini, due famiglie, cinque per parte, e ogni impressione di maggioranza era sbagliata.
2. 02Una misura rende possibile una decisione; non la prende. Nessuno dei due gruppi era più grande; le nuove immagini seguono le illustrazioni delle funzioni per via del tipo di pagina su cui stanno.
3. 03Un colore campionato da un pixel è un colore inventato. Usi il token più vicino e accetti che non sia identico.
4. 04Lo zero è una risposta forte. Nessun pixel caldo su 1,79 milioni chiude una discussione su un nastro arancione più in fretta del gusto.
5. 05Riveda un insieme come insieme. Le proprietà che esistono solo nel confronto sono invisibili su una pagina singola.
6. 06Dichiari un connettore dopo le cose che collega, o verrà coperto, e la trasparenza parziale farà sembrare l’errore un difetto del motore di disegno.
7. 07I commenti dentro un asset sono carico utile. Più della metà di quello che stavamo per spedire era spiegazione.
8. 08XML non valido in un SVG è un’immagine vuota, non un errore. Non c’è alcun messaggio da cercare.
9. 09Un alt vuoto è corretto per una persona e mancante per un crawler. Scelga il baratto di proposito e lo faccia rispettare da una prova.
10. 10Uno zero perfetto ha bisogno di una controprova. Rompa la cosa di proposito e controlli che il numero si muova.

Per chiarezza su che cosa sia: le cinque immagini sono in produzione in nove lingue con le descrizioni, i conteggi vengono da una corsa su canvas sui file veri, e tutto è stato misurato contro un server di sviluppo e non contro una build di produzione. Non c’è un tema scuro da controllare, e questo è stato verificato invece che dato per scontato: con lo scuro emulato, la cattura è identica byte per byte a quella chiara.

Dal lavoro di piattaforma su Provibr. Un difetto di impaginazione che ha prodotto zero pixel di traboccamento si trova in una barra più stretta della finestra, e che cosa fanno nove lingue a un insieme di controlli di misura fissa si trova in sedicimila chiavi, nove lingue.