Uno sguardo al processo e agli strumenti utilizzati per creare l'esperienza di Designcember in stile calendario per le festività.
Nello spirito di dicembre e nei tanti calendari che le persone utilizzano per effettuare il conto alla rovescia e festeggiare, volevamo mettere in evidenza i contenuti web forniti dalla community e dal team di Chrome. Ogni giorno abbiamo evidenziato una serie di contenuti legati allo sviluppo dell'interfaccia utente e al design, per un totale di 31 punti salienti, tra cui 26 nuovi siti dimostrativi, 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 nel minor numero di byte possibile. Volevamo mettere in evidenza le nuove API adattabili come le query dei container e includere un bellissimo esempio di modalità Buio in un sito web incentrato sul design e ricco di asset. Per ottenere questo risultato, abbiamo compresso i file, offerto più formati, utilizzato strumenti di creazione ottimizzati per la generazione di siti statici, distribuito un nuovo polyfill e altro ancora.
Comincia con la stravaganza
L'idea alla base del sito del calendario Designcember era quella di fungere da vetrina per tutto il lavoro che volevamo mettere in evidenza durante il mese di dicembre, fungendo al contempo da sito demo. Abbiamo deciso di realizzare un condominio reattivo che potesse diventare più alto e più stretto o più corto e più largo, con finestre che si sistemavano nella cornice. Ogni finestra rappresentava un giorno (e quindi un solo contenuto). Abbiamo collaborato con l'illustratrice Alice Lee per realizzare la nostra vision.
Alice è stata fonte di ispirazione, condividendo processi e disegni che erano entusiasmanti anche all'inizio. Mentre lavorava all'arte, abbiamo compromesso l'architettura. Le prime discussioni riguardano il layout macro, l'edificio e le sue finestre. In che modo le finestre si adattano a una, due o tre colonne quando diventa disponibile più spazio per l'area visibile? Fino a che punto possono restringersi o allungarsi? Qual è la dimensione massima dell'edificio? Di quanto si spostano le finestre?
Ecco un'anteprima di un prototipo adattabile utilizzando grid-auto-flow: dense che mostra come le finestre potrebbero essere posizionate automaticamente dall'algoritmo della griglia. Ci siamo subito resi conto che, sebbene le griglie delle proporzioni fossero molto efficaci per mostrare opere d'arte, non offrivano l'opportunità di far crescere e ridurre le finestre in uno spazio disponibile non uniforme e mostrare l'efficacia delle query dei container.
Una volta che la griglia generale era relativamente stabile e comunicava un senso della direzione per la reattività dell'edificio e delle sue finestre, abbiamo potuto concentrarci su un'unica finestra. Alcune finestre si allungavano, si abbassavano, si schiacciavano, crescevano e si ricomponevano più di altre nella griglia.
Ogni finestra deve gestire un certo numero di turbolenze di ridimensionamento. Di seguito è riportato un prototipo di finestra che mostra la sua reattività alle turbolenze e mostra quanto ci si possa aspettare che ogni finestra interattiva si adatti.
Animazione di finestre con fogli sprite
Alcune finestre includono animazioni per rendere l'esperienza ancora più interattiva. Le animazioni sono disegnate a mano, fotogramma per fotogramma, in Photoshop. Ogni frame viene esportato, convertito in un foglio sprite con questo generatore di fogli sprite 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 dello sfondo.
Mascheramento CSS
Alcune finestre avevano forme uniche. Abbiamo utilizzato
maschere e
aspect-ratio per creare una finestra scalabile, dalla forma unica e adattiva.
Per creare una maschera, come questa per la finestra otto, erano necessarie alcune abilità classiche di Photoshop, oltre a un po' di conoscenze su come funzionano le maschere sul web. Diamo un'occhiata alla finestra del quinto giorno.
Per diventare una maschera, la forma interna a forma di trifoglio deve essere isolata come la sua forma e riempita con il colore bianco. Il bianco indica al CSS quali contenuti rimangono al di fuori del bianco. In Photoshop, è stato selezionato l'interno della finestra, sfumato da 1 px (per rimuovere i problemi di alias), poi riempito di bianco ed esportato alla stessa altezza e larghezza del frame della finestra. In questo modo, è stato possibile sovrapporre il frame e la maschera direttamente l'uno sull'altro, mostrando i contenuti interni all'interno del frame come previsto.
Una volta completato, i contenuti della finestra potrebbero essere modificati, che dovrebbero apparire sempre all'interno del frame personalizzato. L'immagine di seguito mostra la versione in modalità Buio della finestra, con un gradiente di sfondo diverso e un filtro CSS incandescenza applicato alla luce.
Il mascheramento supporta anche finestre adattabili basate su query del container. Nella finestra nove, c'è un personaggio che viene nascosto dietro una maschera fino a quando la finestra non diventa di dimensioni più ridotte. Per fare in modo che l'utente non possa regolare l'immagine fuori dall'inquadratura, Alice ha completato l'intero carattere 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 con strati non mascherati e garantire che tutti vengano scalati bene insieme.
La seguente immagine mostra l'aspetto senza la maschera sulla finestra e il carattere.
Uno sguardo alle opere d'arte
Per mantenere la fedeltà dell'illustrazione e garantire che gli schermi ad alta definizione non offrano un'esperienza utente sfocata, Alice ha utilizzato un rapporto pixel di 3x. Il piano prevedeva l'utilizzo di imgix e la pubblicazione di immagini e formati ottimizzati sul server, ma abbiamo scoperto che la modifica manuale con lo strumento Squoosh potrebbe farci risparmiare il 50% o più.
La compressione dell'illustrazione presenta sfide uniche, in particolare il tratto di pennello e lo stile trasparente degli angoli arrotondati utilizzati da Alice. Abbiamo scelto di eseguire lo Squoosh di 3 immagini png esportate da Photoshop in formato png, webp e avif più piccolo. Ogni tipo di file ha le proprie capacità di compressione speciali e, per trovare alcune impostazioni di ottimizzazione comuni, è stata necessaria la compressione di più di 50 immagini.
L'interfaccia a riga di comando Squoosh è diventata fondamentale con oltre 200 immagini da ottimizzare e tutte quelle manualmente avrebbero richiesto giorni. Una volta ottenute le impostazioni di ottimizzazione comuni, le abbiamo fornite come istruzioni della riga di comando ed elaborato in gruppo intere cartelle di immagini PNG nelle relative controparti compresse WebP e AVIF.
Ecco un esempio di comando di squoosh dell'interfaccia a riga di comando 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, potremmo 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>
Poiché scrivere il codice sorgente dell'immagine era ripetitivo, 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 finestre artistiche e interattive. Per noi era importante che un utente con tastiera potesse usare il sito e sbirciare nelle finestre, in modo che gli utenti di screen reader avessero una bella esperienza narrata.
Ad esempio, durante l'incorporamento delle immagini abbiamo usato role="presentation" per contrassegnare l'immagine come presentazione per gli screen reader. Abbiamo ritenuto che un'esperienza utente compresa tra 5 e 12 descrizioni alt fratturate sarebbe stata un'esperienza negativa. Abbiamo quindi contrassegnato le immagini come presentazioni e fornito una narrazione generale per la finestra. Spostarsi tra le finestre di uno screen reader ha poi una bella sensazione narrativa, che speravamo avrebbe contribuito a creare 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 orchestrare lo stato attivo da e verso i popup delle finestre e le finestre.
L'esperienza dello screen reader ha attributi ARIA speciali che aumentano la chiarezza dei contenuti. Ad esempio, i link per i giorni indicano solo "uno" o "due", ma con l'aggiunta di alcuni attributi ARIA, vengono annunciati come "Giorno uno" e "Giorno due". Inoltre, tutte le immagini sono riassunte in un'unica etichetta, in modo che ogni finestra abbia una descrizione.
Generatore di siti astrologico, in primo piano statico, basato su componenti
Astro ha permesso al team di collaborare facilmente sul sito. Il modello del componente era familiare sia agli sviluppatori Angular che agli sviluppatori React, mentre il sistema di stile dei nomi delle classi con ambito ha aiutato ogni sviluppatore a sapere che il suo lavoro su una finestra non sarebbe stato in conflitto con nessun altro.
Giorni come componenti
Ogni giorno era un componente che recuperava lo stato da un datastore dei tempi di creazione. Eseguiamo in questo modo la logica del modello prima che il codice HTML raggiungesse il browser. La logica determina se il giorno deve mostrare o meno la descrizione comando, poiché i giorni di inattività non hanno popup.
Le build vengono eseguite ogni ora e il datastore dell'ora di compilazione sbloccherebbe un nuovo giorno dopo la mezzanotte del server. Questi piccoli sistemi che si aggiornano automaticamente e sono autosufficienti mantengono il sito aggiornato.
Stili mirati e oggetti aperti
Gli stili di ambito di Astro scritti all'interno del suo modello di componente hanno semplificato la distribuzione del carico di lavoro tra molti membri del team e reso anche più divertente l'utilizzo di Open Props. Gli stili Open Props normalize.css si sono rivelati utili con il tema adattivo (chiaro e scuro), oltre a facilitare il wrangling dei 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 all'ultima versione di Astro a causa di troppi problemi relativi alle build. Potrebbe essere dedicato più tempo all'ottimizzazione dei flussi di lavoro degli sviluppatori e della build.
Container flessibili
Alcune finestre si ingrandiscono e si riducono, mantenendo le proporzioni per preservare la loro arte. Abbiamo utilizzato altre finestre per mostrare la potenza dell'architettura basata su componenti con le query dei container. Grazie alle query del contenitore, le finestre potevano disporre delle singole informazioni sullo stile adattabile e modificarle in base alle proprie dimensioni. Alcune finestre andavano da strette a larghe 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. Ho scoperto che, per soddisfare le finestre adattive, le query dei container non sarebbero solo divertenti da mostrare, ma sarebbero state necessarie e semplificare 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 mantenere le proporzioni. Offre un maggiore controllo e maggiori opportunità. Quando sono già di una certa dimensione, molti bambini si spostano per adattarsi a un nuovo layout.
Le query relative ai container ci hanno anche permesso di supportare il contenimento in direzione blocchi (verticale), quindi man mano che una finestra si allungava, abbiamo potuto adattarne gli stili per adattarli di conseguenza. Ciò è evidente nelle query basate sull'altezza, che abbiamo utilizzato in modalità autonoma, 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 container per mostrare e nascondere i dettagli man mano che l'opera era sempre più affollata a dimensioni più piccole e più svuotate in formati più larghi. La finestra nove è un ottimo esempio di come è entrato in gioco questo concetto:
Supporto cross-browser
Per creare una fantastica esperienza cross-browser moderna, in particolare per le API sperimentali come le query relative ai container, abbiamo bisogno di un ottimo polyfill. Abbiamo inviato una chiamata al nostro team e Surma ha pubblicato la build di un nuovo polyfill di query container. Il polyfill si basa sulle funzioni ResizeObserver, MutationObserver e la funzione CSS :is(). Pertanto, tutti i browser moderni supportano il polyfill, in particolare Chrome ed Edgedalla versione 88, Firefox dalla versione 78 e Safari dalla versione 14. L'utilizzo del polyfill consente le seguenti sintassi:
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
Modalità Scuro
Un ultimo tocco fondamentale per il sito web di Designcember è stato un bellissimo tema scuro. Volevamo mostrare come si possa utilizzare l'arte stessa per partecipare attivamente alla creazione di un'ottima esperienza in modalità Buio. Per questo motivo, abbiamo modificato gli stili di sfondo di ogni finestra stessa in modo programmatico e abbiamo utilizzato tutto il codice CSS necessario per creare la grafica delle finestre. La maggior parte degli sfondi erano gradienti CSS, in modo che fosse più facile regolare i rispettivi valori di colore. Abbiamo poi sovrapposto le opere d'arte.
Altre uova di Pasqua
Tocchi personali
Abbiamo aggiunto un tocco personale alla pagina per conferire maggiore personalità al sito. Il primo è stato un cast di personaggi, ispirato al nostro team. Abbiamo incluso anche un cursore in stile classico per i giorni di inattività e abbiamo provato a modificare lo stile delle favicon.
Elementi funzionali
Uno degli ulteriori tocchi funzionali è la funzionalità "Vai a oggi", con un uccello che si trova sopra l'edificio. Facendo clic o premendo Invio su questo uccello, puoi saltare nella pagina fino al giorno del mese corrente, in modo da poter visualizzare rapidamente gli ultimi lanci.
Designcember.com ha anche uno speciale foglio di stile di stampa in cui offriamo essenzialmente un'immagine specifica che funziona meglio su carta da 8,5" x 11" in modo da poter stampare il calendario autonomamente e rimanere festosi tutto l'anno.
Nel complesso, un sacco di lavoro è stato dedicato alla creazione di un'esperienza web moderna, divertente e stravagante per celebrare lo sviluppo dell'interfaccia utente per tutto il mese di dicembre. Speriamo che ti sia piaciuto.
