Un'occhiata al processo e agli strumenti utilizzati per creare l'esperienza di Designcember in stile calendario delle festività.
In vista del mese di dicembre e dei molti calendari che le persone utilizzano per il conto alla rovescia e le celebrazioni, 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 al design dell'interfaccia utente, per un totale di 31 notizie, tra cui 26 nuovi siti demo, strumenti, annunci, podcast, video, articoli e case study.
Scopri l'esperienza completa su designcember.com.
Panoramica
Il nostro obiettivo era offrire un'esperienza web accessibile, stravagante, moderna e reattiva con il minor numero di byte possibile. Volevamo evidenziare nuove API adattabili, come le query dei container, e includere un bellissimo esempio di modalità Buio in un sito web incentrato sul design e sugli asset. Per raggiungere questo obiettivo, abbiamo compresso dei file, offerto più formati, utilizzato strumenti di creazione ottimizzati per la generazione di siti statici, distribuito un nuovo polyfill e altro ancora.
Iniziare con la fantasia
L'idea del sito del calendario Designcember era come una vetrina per tutto il lavoro che volevamo mettere in evidenza per tutto il mese di dicembre, fungendo anche da sito dimostrativo. Abbiamo deciso di costruire un condominio reattivo che potesse diventare più alto e stretto, o più corto e più largo, con finestre che si sistemano all'interno dell'inquadratura. Ogni finestra rappresentava un giorno (e quindi un contenuto). Per dare vita alla nostra visione, abbiamo collaborato con l'illustratrice Alice Lee.
Alice è stata una fonte di ispirazione, condividendo procedure e schizzi entusiasmanti anche nelle prime fasi di ideazione. Mentre lei lavorava all'artwork, noi ci occupavamo dell'architettura. Le prime discussioni riguardavano il layout generale, l'edificio e le sue finestre. In che modo le finestre si adatterebbero a una, due o tre colonne man mano che diventava disponibile più spazio nell'area visibile? Fino a che punto possono restringersi o allungarsi? Quali sarebbero le dimensioni massime dell'edificio? Di quanto si sposterebbero le finestre?
Ecco un'anteprima di un prototipo adattabile che utilizza grid-auto-flow: dense che mostra come le finestre potrebbero essere posizionate automaticamente dall'algoritmo della griglia. Abbiamo capito subito che, sebbene le griglie con proporzioni fossero perfette per mettere in evidenza le immagini, non offrivano la possibilità di far crescere e rimpicciolire le finestre in uno spazio disponibile non uniforme e di mostrare la potenza delle query dei contenitori.
Una volta che la griglia generale era relativamente stabile e comunicava 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, rimpicciolite, compresse, ingrandite e ricomposte più di altre nella griglia.
Ogni finestra dovrebbe gestire una certa quantità di turbolenza di ridimensionamento. Di seguito è riportato un prototipo di una finestra che dimostra la sua reattività alle turbolenze, mostrando quanto ci si può aspettare che ogni finestra interattiva si adatti.
Animazione della finestra con spritesheet
Alcune finestre hanno animazioni per rendere l'esperienza più interattiva. Le animazioni sono disegnate a mano, frame per frame, in Photoshop. Ogni frame viene esportato, trasformato in uno 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 la 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
maschere e
aspect-ratio per creare una finestra adattabile, con una forma unica e scalabile.
Per creare una maschera, come questa per la finestra otto, erano necessarie alcune competenze classiche di Photoshop, oltre a un po' di conoscenza su come funzionano le maschere sul web. Diamo un'occhiata alla finestra per l'ottavo giorno.
Per diventare una maschera, la forma interna a forma di quadrifoglio deve essere isolata come forma a sé stante e riempita di bianco. Il bianco indica al CSS quali contenuti rimangono e quali no. In Photoshop, l'interno della finestra è stato selezionato, sfumato di 1 px (per rimuovere i problemi di aliasing), poi riempito di bianco ed esportato con le stesse altezza e larghezza del telaio della finestra. In questo modo, il frame e la maschera possono essere sovrapposti direttamente, mostrando i contenuti interni all'interno del frame come previsto.
Al termine, i contenuti della finestra possono essere modificati e appariranno sempre all'interno del frame personalizzato. L'immagine seguente mostra la versione della finestra in modalità Buio, con un gradiente di sfondo diverso e un filtro CSS di illuminazione applicato alla luce.
Il mascheramento supporta anche finestre responsive basate su query del contenitore. Nella finestra 9, un personaggio è nascosto dietro una maschera finché la finestra non è più stretta. Per assicurarci che l'utente non possa modificare l'immagine fuori dall'inquadratura, Alice ha completato il personaggio per noi. Il personaggio è mascherato all'interno della finestra, ma non le piante, quindi un'altra sfida che abbiamo dovuto affrontare è stata sovrapporre elementi mascherati a livelli non mascherati e assicurarci che tutti avessero una buona scalabilità.
L'immagine seguente mostra l'aspetto senza la maschera sulla finestra e sul personaggio.
Squooshing the art
Per mantenere la fedeltà dell'illustrazione e garantire un'esperienza utente non sfocata sugli schermi ad alta definizione, Alice ha lavorato con un rapporto di pixel di 3 volte. Il piano era utilizzare imgix e pubblicare immagini e formati ottimizzati sul suo server, ma abbiamo scoperto che le modifiche manuali con lo strumento Squoosh potevano farci risparmiare almeno il 50%.
L'illustrazione presenta sfide uniche per la compressione, in particolare la pennellata e lo stile trasparente con bordo grezzo utilizzato da Alice. Abbiamo scelto di Squoosh ogni 3x immagine png esportata da Photoshop, con un formato png, webp e avif più piccolo. Ciascun tipo di file dispone delle proprie speciali capacità di compressione e, per determinare alcune impostazioni di ottimizzazione comuni, è stata necessaria la compressione di più di 50 immagini.
La CLI di Squioosh è 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 relative versioni 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
Dopo aver inserito gli artwork ottimizzati nel repository, possiamo iniziare a caricarli da 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 delle immagini era ripetitivo, quindi abbiamo creato un componente Astro per incorporare le immagini con una riga di codice.
<Pic filename="day1/inner-frame" role="presentation" />
Utenti di screen reader e tastiera
Gran parte dell'esperienza di Designcember si basa sulle illustrazioni e sulle finestre interattive. Per noi era importante che un utente con la tastiera potesse usare il sito e sbirciare nelle finestre e che gli utenti di screen reader potessero usufruire di un'esperienza narrata piacevole.
Ad esempio, quando abbiamo incorporato le immagini, abbiamo utilizzato role="presentation" per contrassegnarle come di presentazione per gli screen reader. Riteniamo che un'esperienza utente con 5-12 descrizioni alt frazionate non sia ottimale. Abbiamo quindi contrassegnato le immagini come presentazioni e fornito una narrazione generale in finestra. Spostarsi tra le finestre con uno screen reader offre una piacevole sensazione narrativa, che speravamo potesse contribuire a trasmettere la stravaganza e il divertimento che il sito vuole condividere.
Il video seguente mostra una demo dell'esperienza con la tastiera. I tasti Tab, Invio, Barra spaziatrice ed ESC vengono utilizzati per gestire lo stato attivo tra i popup e le finestre.
L'esperienza dello screen reader ha attributi ARIA speciali che chiariscono i contenuti. Ad esempio, i link per i giorni riportano solo "uno" o "due", ma con alcune informazioni ARIA aggiunte, vengono annunciati come "Giorno 1" e "Giorno 2". Inoltre, tutte le immagini sono riassunte in un'unica etichetta, quindi ogni finestra ha una descrizione.
Astro, generatore di siti basato su componenti e statico
Astro ha permesso al team di collaborare facilmente al sito. Il modello di componenti era familiare sia agli sviluppatori Angular che a quelli React, mentre il sistema di stile del nome della classe con ambito aiutava ogni sviluppatore a sapere che il proprio lavoro in una finestra non entrava in conflitto con quello di altri.
Giorni come componenti
Ogni giorno era un componente che recuperava lo stato da un datastore del momento di compilazione. In questo modo, abbiamo potuto eseguire la logica del modello prima che il codice HTML raggiungesse il browser. La logica determinerà se mostrare o meno la descrizione comando del giorno, poiché i giorni inattivi non hanno popup.
Le build vengono eseguite ogni ora e l'archivio dati dei tempi di compilazione sblocca un nuovo giorno quando il server di compilazione è passato la mezzanotte. Questi piccoli sistemi auto-aggiornabili e autosufficienti mantengono il sito aggiornato.
Stili basati su ambito e componenti Open Props
Astro analizza gli stili scritti all'interno del suo modello di componenti, il che ha reso più facile la distribuzione del carico di lavoro tra molti membri del team e ha anche reso divertente l'utilizzo di Open Props. Gli stili normalize.css di Open Props sono stati utili con il tema adattivo (chiaro e scuro) e hanno aiutato a gestire i contenuti come paragrafi e intestazioni.
Come early adopter di Astro, abbiamo riscontrato alcuni problemi con PostCSS. Ad esempio, non è stato possibile eseguire l'aggiornamento all'ultima versione di Astro a causa di troppi problemi di build. Potrebbe essere speso più tempo qui, ottimizzando i flussi di lavoro di compilazione e degli sviluppatori.
Contenitori flessibili
Alcune finestre si espandono e si restringono, mantenendo le proporzioni per preservare l'artwork. Abbiamo utilizzato altre finestre per mostrare la potenza dell'architettura basata su componenti con le query dei container. Le query del contenitore consentivano alle finestre di avere le proprie informazioni di stile responsive e di adeguarsi in base alle proprie dimensioni. Alcune finestre passavano da strette ad ampie e dovevano regolare le dimensioni dei contenuti multimediali al loro interno, nonché la loro posizione.
Man mano che diventa disponibile più spazio per una finestra, potremmo adattare le dimensioni o gli elementi secondari della finestra. È emerso che, per soddisfare le finestre adattabili, le query dei contenitori non sarebbero state solo divertenti da mostrare, ma sarebbero state necessarie e avrebbero semplificato drasticamente l'orchestrazione 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 di proporzioni. Offre più controllo e più opportunità. Con una certa dimensione, molti bambini si spostano per adattarsi a un nuovo layout.
Le query dei contenitori ci hanno anche permesso di supportare il contenimento in base alla direzione del blocco (verticale), quindi, man mano che una finestra aumentava di lunghezza, potevamo modificare i relativi stili in modo che si adattassero in modo appropriato. Questo è dimostrato dalle 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 dei contenitori per mostrare e nascondere i dettagli man mano che l'illustrazione diventava sempre più affollata a dimensioni ridotte e più vuota a dimensioni più grandi. La finestra 9 è un ottimo esempio di come questo approccio è stato applicato:
Supporto cross-browser
Per creare un'esperienza moderna cross-browser, in particolare per le API sperimentali come le query dei contenitori, abbiamo bisogno di un ottimo polyfill. Abbiamo lanciato un appello al nostro team e Surma ha guidato la creazione di un nuovo polyfill per le query dei contenitori. Il polyfill si basa su ResizeObserver, MutationObserver e sulla funzione:is() CSS. Pertanto, tutti i browser moderni supportano il polyfill, in particolare Chrome e 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 di Designcember è stato un bellissimo tema scuro. Volevamo mostrarti come utilizzare l'arte stessa per partecipare attivamente alla creazione di una fantastica esperienza con la modalità Buio. Per questo, abbiamo modificato in modo programmatico gli stili dello sfondo di ogni finestra stessa e abbiamo utilizzato tutta la quantità di CSS adeguata durante la creazione della grafica della finestra. La maggior parte degli sfondi era costituita da sfumature CSS, in modo da poter regolare più facilmente i relativi valori di colore. Poi abbiamo sovrapposto l'illustrazione.
Altri easter egg
Tocchi personali
Abbiamo aggiunto alcuni tocchi personali alla pagina per conferire al sito più personalità. Il primo è stato il cast di personaggi, tratto da ispirazione del nostro team. Abbiamo anche incluso un cursore in stile retrò nei giorni di inattività e abbiamo sperimentato con lo stile della favicon.
Tocchi funzionali
Uno dei tocchi funzionali aggiuntivi è la funzionalità "Vai a oggi", con un uccello che si trova in cima all'edificio. Se fai clic o premi Invio su questo uccello, nella pagina viene visualizzato il giorno corrente del mese, in modo da poter accedere rapidamente agli ultimi lanci.
Designcember.com ha anche uno speciale foglio di stile per la stampa in cui stiamo essenzialmente servendo un'immagine specifica che funziona meglio su carta da 21,5 x 27,9 cm, in modo che tu possa stampare il calendario autonomamente e rimanere festivo per tutto l'anno.
Tutto sommato, è stato necessario un sacco di lavoro per creare un'esperienza web moderna, divertente e stravagante per celebrare lo sviluppo dell'interfaccia utente per tutto il mese di dicembre. Ci auguriamo che sia stato di tuo gradimento.
