Un'occhiata alla procedura e agli strumenti utilizzati per creare l'esperienza in stile calendario delle festività di Designcember.
In occasione di dicembre e dei tanti calendari che le persone utilizzano per il conto alla rovescia e per festeggiare, abbiamo voluto mettere in evidenza i contenuti web della community e del team di Chrome. Ogni giorno abbiamo messo in evidenza un contenuto relativo allo sviluppo e alla progettazione dell'interfaccia utente, per un totale di 31 contenuti, tra cui 26 nuovi siti demo, strumenti, annunci, podcast, video, articoli e case study.
Scopri l'esperienza completa all'indirizzo designcember.web.app.
Panoramica
Il nostro obiettivo era offrire un'esperienza web accessibile, stravagante, moderna e reattiva con il minor numero di byte possibile. Volevamo mettere in evidenza le nuove API reattive come le query sui contenitori e includere un bellissimo esempio di modalità buio in un sito web incentrato sul design e ricco di asset. Per raggiungere questo obiettivo, abbiamo compresso i file, offerto più formati, utilizzato strumenti di compilazione ottimizzati per la generazione di siti statici, distribuito un nuovo polyfill e altro ancora.
Iniziare con un tocco di fantasia
L'idea alla base del sito del calendario Designcember era di fungere da vetrina per tutti i lavori che volevamo mettere in evidenza durante il mese di dicembre, fungendo al contempo da sito demo. Abbiamo deciso di costruire un palazzo di appartamenti reattivo che potesse diventare più alto e stretto o più basso e largo, con finestre che si riorganizzavano all'interno della cornice. Ogni finestra rappresentava un giorno (e quindi un contenuto). Abbiamo collaborato con l'illustratrice Alice Lee per dare vita alla nostra visione.
Alice è stata fonte di ispirazione, condividendo processi e schizzi entusiasmanti anche nelle prime fasi concettuali. Mentre lei lavorava alla grafica, noi ci occupavamo dell'architettura. Le prime discussioni hanno riguardato il layout macro, l'edificio e le sue finestre. In che modo le finestre si adattano a una, due o tre colonne man mano che diventa disponibile più spazio nel riquadro? Quanto possono restringersi o allungarsi? Quale sarebbe la dimensione massima dell'edificio? Di quanto si sposterebbero le finestre?
Ecco un'anteprima di un prototipo adattabile che utilizza grid-auto-flow: dense e mostra come le finestre potrebbero essere posizionate automaticamente dall'algoritmo della griglia. Ci siamo subito resi conto che, sebbene le griglie con proporzioni funzionassero perfettamente per mostrare le opere d'arte, non offrivano l'opportunità di far crescere e ridurre le finestre in uno spazio disponibile non uniforme e di mostrare la potenza delle query sui contenitori.
Una volta che la griglia generale è stata relativamente stabile e ha comunicato un senso di direzione per la reattività dell'edificio e delle sue finestre, abbiamo potuto concentrarci su una singola finestra. Alcune finestre si sono allungate, ristrette, compresse, ingrandite e ricomposte più di altre nella griglia.
Ogni finestra dovrebbe gestire una certa quantità di turbolenze di ridimensionamento. Di seguito è riportato il prototipo di un finestrino che mostra la sua reattività alle turbolenze, indicando di quanto ci si potrebbe aspettare che si regoli ogni finestrino interattivo.
Animazione della finestra con fogli sprite
Alcune finestre hanno animazioni per aggiungere interattività all'esperienza. Le animazioni sono disegnate a mano, fotogramma per fotogramma, in Photoshop. Ogni frame viene esportato, trasformato in una spritesheet con questo
generatore di spritesheet e poi ottimizzato con Squoosh. L'animazione CSS utilizza quindi background-position-x e
animation-timing-function come mostrato nell'esempio seguente.
.una
background: url("/day1/una_sprite.webp") 0% 0%;
background-size: 400% auto;
}
.day:is(:hover, :focus-within) .una {
animation: una-wave .5s steps(1) alternate infinite;
}
@keyframes una-wave {
0% { background-position-x: 0%; }
25% { background-position-x: 300%; }
50% { background-position-x: 200%; }
75% { background-position-x: 100%; }
}
Alcune animazioni, come il salvadanaio del sesto giorno, erano animazioni CSS basate su passaggi.
Abbiamo ottenuto questo effetto con una tecnica simile, utilizzando steps(), con la differenza che i fotogrammi chiave erano posizioni di trasformazione CSS anziché posizioni di sfondo.
Mascheramento CSS
Alcune finestre avevano forme uniche. Abbiamo utilizzato le maschere e aspect-ratio per creare una finestra scalabile, dalla forma unica e adattabile.
Per creare una maschera, come questa per la finestra 8, sono state necessarie alcune competenze classiche di Photoshop, oltre a un po' di conoscenza del funzionamento delle maschere sul web. Diamo un'occhiata alla finestra del giorno 8.
Per diventare una maschera, la forma interna a quadrifoglio deve essere isolata come forma a sé stante e riempita di colore bianco. Il bianco indica all'SSC quali contenuti rimangono, mentre tutto ciò che si trova al di fuori del bianco non rimarrà. In Photoshop, l'interno della finestra è stato selezionato, sfumato di 1 pixel (per rimuovere i problemi di aliasing), quindi riempito di bianco ed esportato con la stessa altezza e larghezza della cornice della finestra. In questo modo, il frame e la maschera possono essere sovrapposti direttamente l'uno all'altro, mostrando i contenuti interni all'interno del frame come previsto.
Una volta completato, i contenuti della finestra potrebbero essere modificati e appariranno sempre all'interno del frame personalizzato. L'immagine seguente mostra la versione in modalità Buio della finestra, con una sfumatura di sfondo diversa e un filtro CSS di bagliore applicato alla luce.
Il mascheramento supporta anche le finestre basate su query di container reattive. Nella finestra 9, c'è un personaggio nascosto dietro una maschera finché la finestra non assume una dimensione più stretta. Per assicurarsi che l'utente non possa regolare l'immagine fuori dal frame, Alice ha completato l'intero personaggio per noi. Il personaggio è mascherato all'interno della finestra, ma le piante no, quindi un'altra sfida che abbiamo affrontato è stata quella di sovrapporre elementi mascherati a livelli non mascherati e garantire che tutti si scalassero bene insieme.
L'immagine seguente mostra l'aspetto senza la maschera sulla finestra e sul personaggio.
Schiacciare l'opera
Per mantenere la fedeltà dell'illustrazione e garantire che gli schermi ad alta definizione non offrissero un'esperienza utente sfocata, Alice ha lavorato con un rapporto pixel di 3x. Il piano era di utilizzare imgix e pubblicare immagini e formati ottimizzati sul server, ma abbiamo scoperto che la modifica manuale con lo strumento Squoosh poteva farci risparmiare il 50% o più.
L'illustrazione presenta sfide uniche per la compressione, in particolare lo stile di pennellata e bordo ruvido trasparente utilizzato da Alice. Abbiamo scelto di comprimere ogni immagine PNG esportata da Photoshop 3x in un formato PNG, WebP e AVIF più piccolo. Ogni tipo di file ha le sue capacità di compressione speciali e ci è voluto comprimere più di 50 immagini per trovare alcune impostazioni di ottimizzazione comuni.
La Squoosh CLI è diventata fondamentale con oltre 200 immagini da ottimizzare: farlo manualmente avrebbe richiesto giorni. Una volta ottenute le impostazioni di ottimizzazione comuni, le abbiamo fornite come istruzioni della riga di comando ed elaborato in batch intere cartelle di immagini PNG nelle rispettive controparti compresse WebP e AVIF.
Ecco un esempio di comando squoosh della CLI AVIF utilizzato:
npx @squoosh/cli --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --avif '{"cqLevel":19,"cqAlphaLevel":17,"subsample":1,"tileColsLog2":0,"tileRowsLog2":0,"speed":6,"chromaDeltaQ":false,"sharpness":5,"denoiseLevel":0,"tune":0}' image-1.png image-2.png image-3.png
Con le grafiche ottimizzate archiviate nel repository, possiamo iniziare a caricarle dal codice HTML:
<picture>
<source srcset="/day1/inner-frame.avif" type="image/avif">
<source srcset="/day1/inner-frame.webp" type="image/webp">
<img alt="" decoding="async" role="presentation" src="/day1/inner-frame.png">
</picture>
Scrivere il codice sorgente dell'immagine era ripetitivo, quindi abbiamo creato un componente Astro per incorporare le immagini con una sola riga di codice.
<Pic filename="day1/inner-frame" role="presentation" />
Utenti di screen reader e tastiera
Gran parte dell'esperienza di Designcember si svolge attraverso le opere d'arte e le vetrine interattive. Per noi era importante che un utente che utilizza la tastiera potesse usare il sito e dare un'occhiata alle finestre e che gli utenti di screen reader avessero una buona esperienza di narrazione.
Ad esempio, quando abbiamo incorporato le immagini, abbiamo utilizzato role="presentation" per contrassegnare l'immagine come presentazionale per gli screen reader. Abbiamo ritenuto che un'esperienza utente con descrizioni di alt fratturate tra 5 e 12 sarebbe stata scadente. Pertanto, abbiamo contrassegnato le immagini come presentative e fornito una narrazione complessiva della finestra. Spostarsi tra le finestre di uno screen reader offre una piacevole sensazione narrativa, che speriamo contribuisca a trasmettere la stravaganza e il divertimento che il sito vuole condividere.
Il seguente video mostra una demo dell'esperienza con la tastiera. I tasti Tab, Invio, Barra spaziatrice e Esc vengono utilizzati per spostare lo stato attivo da e verso i popup delle finestre e le finestre.
L'esperienza con lo screen reader ha attributi ARIA speciali che rendono più chiaro il contenuto. Ad esempio, i link per i giorni dicono solo "uno" o "due", ma con l'aggiunta di ARIA, vengono annunciati come "Giorno 1" e "Giorno 2". Inoltre, tutte le immagini sono riassunte in un'unica etichetta, in modo che ogni finestra abbia una descrizione.
Astro, generatore di siti statici basato su componenti
Astro ha semplificato la collaborazione del team sul sito. Il modello di componenti era familiare sia agli sviluppatori Angular che React, mentre il sistema di stili con nomi di classe con ambito ha aiutato ogni sviluppatore a sapere che il proprio lavoro su una finestra non sarebbe entrato in conflitto con quello di altri.
Giorni come componenti
Ogni giorno era un componente che recuperava lo stato da un datastore di build. In questo modo, possiamo eseguire la logica del modello prima che l'HTML raggiunga il browser. La logica determinerebbe se il giorno deve mostrare il suggerimento o meno, poiché i giorni inattivi non hanno popup.
Le build vengono eseguite ogni ora e il datastore del tempo di compilazione sblocca un nuovo giorno quando il server di compilazione ha superato la mezzanotte. Questi piccoli sistemi autosufficienti e che si aggiornano automaticamente mantengono il sito aggiornato.
Stili con ambito e Open Props
Astro definisce gli stili all'interno del modello di componenti, il che ha reso più facile la distribuzione del carico di lavoro tra molti membri del team e ha reso divertente l'utilizzo di Open Props. Gli stili Open Props normalize.css sono stati utili con il tema adattivo (chiaro e scuro), oltre a contribuire a gestire contenuti come paragrafi e intestazioni.
In qualità di early adopter di Astro, abbiamo riscontrato alcuni problemi con PostCSS. Ad esempio, non è stato possibile eseguire l'aggiornamento alla versione più recente di Astro a causa di troppi problemi di build. Qui si potrebbe dedicare più tempo all'ottimizzazione dei flussi di lavoro di build e sviluppo.
Container flessibili
Alcune finestre si ingrandiscono e si rimpiccioliscono, mantenendo le proporzioni per preservare la loro arte. Abbiamo utilizzato altre finestre per mostrare la potenza dell'architettura basata su componenti con le query sui contenitori. Le query sui contenitori consentono alle finestre di possedere le proprie informazioni di stile reattivo individuali e di essere regolate in base alle proprie dimensioni. Alcune finestre sono passate da strette a larghe e hanno dovuto regolare le dimensioni dei contenuti multimediali al loro interno, nonché il posizionamento di questi contenuti.
Man mano che diventa disponibile più spazio per una finestra, potremmo adattare le dimensioni o gli elementi secondari della finestra per adattarla. È emerso che, per soddisfare le finestre adattive, le query sui contenitori non sarebbero state solo divertenti da mostrare, ma sarebbero state necessarie e avrebbero semplificato drasticamente l'organizzazione di determinati layout.
.day {
container: inline-size;
}
.day > .pane {
min-block-size: 250px;
@container (min-width: 220px) {
min-block-size: 300px;
}
@container (min-width: 260px) {
min-block-size: 310px;
}
@container (min-width: 360px) {
min-block-size: 450px;
}
}
Questo approccio è diverso dal mantenimento delle proporzioni. Offre più controllo e più opportunità. A una certa dimensione, molti bambini si muovono per adattarsi a un nuovo layout.
Le query sui contenitori ci hanno anche permesso di supportare il contenimento della direzione del blocco (verticale), in modo che, man mano che una finestra cresceva in lunghezza, potessimo adattare i suoi stili in modo appropriato. Ciò si nota nelle query basate sull'altezza, che abbiamo utilizzato in modo autonomo e in aggiunta alle query basate sulla larghezza:
.person {
place-self: flex-end;
margin-block: 25% 50%;
margin-inline-start: -15%;
z-index: var(--layer-1);
@container (max-height: 350px) and (max-width: 425px) {
place-self: center flex-end;
inline-size: 50%;
inset-block-end: -15%;
margin-block-start: -2%;
margin-block-end: -25%;
z-index: var(--layer-2);
}
}
Abbiamo anche utilizzato le query sui contenitori per mostrare e nascondere i dettagli man mano che l'illustrazione diventava sempre più affollata a dimensioni più piccole e più vuota a dimensioni più grandi. La finestra 9 è un ottimo esempio di dove è entrato in gioco:
Supporto cross-browser
Per creare un'esperienza moderna e cross-browser, soprattutto per le API sperimentali come le query sui contenitori, abbiamo bisogno di un ottimo polyfill. Abbiamo inviato una richiesta al nostro team e Surma ha guidato la creazione di un nuovo polyfill per le query sui contenitori. Il polyfill si basa su ResizeObserver, MutationObserver e sulla funzione CSS :is(). Pertanto, tutti i browser moderni supportano il polyfill, in particolare Chrome ed Edge dalla versione 88, Firefox dalla versione 78 e Safari dalla versione 14. L'utilizzo del polyfill consente una delle seguenti sintassi:
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
Modalità Buio
Un ultimo tocco essenziale per il sito web Designcember è stato un bellissimo tema scuro. Volevamo mostrare come l'arte stessa possa essere utilizzata per partecipare attivamente alla creazione di una fantastica esperienza in modalità Buio. A questo scopo, abbiamo modificato programmaticamente gli stili di sfondo di ogni finestra e abbiamo utilizzato il maggior numero possibile di CSS durante la creazione della grafica della finestra. La maggior parte degli sfondi erano sfumature CSS, in modo da facilitare la regolazione dei valori di colore. Poi abbiamo sovrapposto le illustrazioni.
Altri easter egg
Tocchi personali
Abbiamo aggiunto alcuni tocchi personali alla pagina per dare più personalità al sito. Il primo è stato il cast di personaggi, ispirati al nostro team. Abbiamo anche incluso un cursore in stile retrò nei giorni di inattività e abbiamo giocato con lo stile della favicon.
Tocchi funzionali
Uno dei tocchi funzionali aggiuntivi è la funzionalità "Vai a oggi", con un uccello che si posa sulla cima dell'edificio. Se fai clic o premi Invio su questo uccello, la pagina scorre fino al giorno corrente del mese, in modo da poter accedere rapidamente agli ultimi lanci.
Il sito web Designcember ha anche un foglio di stile di stampa speciale in cui viene mostrata un'immagine specifica che funziona meglio su carta da 21,5 x 28 cm, in modo che tu possa stampare il calendario e rimanere in tema con le festività tutto l'anno.
In sintesi, è stato fatto un lavoro enorme per creare un'esperienza web moderna, divertente e fantasiosa per celebrare lo sviluppo della UI per tutto il mese di dicembre. Ci auguriamo che ti sia piaciuto.
