Realizzato internamente dal nostro stesso Paul Lewis, il sito web del CDS mostrava come creare una fantastica esperienza web mobile per i visitatori della conferenza.
Dietro le quinte
È notevole il livello di fluidità con cui il sito viene eseguito su vari browser per dispositivi mobili. Utilizza i cicli di layout e colorazione del browser nel modo migliore possibile.
Nuove funzionalità della piattaforma web utilizzate
- Service worker
- Manifest
- Colore del tema
Modelli
- Carte in spesa
- Griglia adattabile
- Material Design
Codice sorgente
L'intervista
Sviluppo
Quando Paul ha deciso di realizzare il sito, una priorità fondamentale era adottare il miglioramento progressivo. Anziché progettare per il desktop, lo ha creato prima per schermi piccoli, quindi per poi passare a schermi più grandi, migliorando progressivamente, invece di degradare progressivamente. Ciò richiedeva molte query supporti, ma anche un po' di libertà nell'esaminare i piccoli cambiamenti tra i punti di interruzione chiave. Navigare avanti e indietro tra le dimensioni dello schermo gli ha permesso di capire in quale punto i contenuti avrebbero interrotto, in modo da poter risolvere rapidamente il problema.
Un altro aspetto importante dei PE è la massima compatibilità con le versioni precedenti. Paul ha scelto di utilizzare i valori mobili su Flexbox perché pensava che avrebbe aumentato il numero di browser su cui il sito avrebbe funzionato. Per il layout specifico del sito, questo non si è rivelato assolutamente un problema. Se avesse avuto bisogno di Flexbox, avrebbe usato un PE per aggiungerlo.
Una delle principali sfide per il sito è stata l'espansione e la compressione delle schede, che hanno richiesto un nuovo modo per eseguire le animazioni. Paul ha elaborato una strategia che ha definito FLIP, che prevede l'impostazione dell'animazione degli elementi allo stato finale. Da qui, puoi applicare proprietà adatte ai compositori come trasformazioni e opacità per invertire le modifiche e riportare l'elemento alla posizione iniziale. Infine, al termine dell'operazione, abilita le transizioni su trasformazioni e opacità e rimuovi queste modifiche. In questo modo, gli elementi si spostano ancora una volta nella posizione finale. Paul ammette che non sia inaspettato, ma funziona benissimo e ti dà un incremento di prestazioni.
Esibizione
Conoscendo Paul Lewis come guru delle prestazioni, non mi ha sorpreso scoprire che la powerformance era una considerazione fondamentale per la realizzazione del sito. Ha fatto molto affidamento su WebPageTest per ottenere il valore Speed Index più basso possibile. Senza l'incorporamento di YouTube, Paul è riuscito a portarlo a meno di 1000 tramite connessione via cavo, il che significava che la maggior parte degli utenti avrebbe ricevuto un rendering iniziale in meno di un secondo.
La maggior parte del lavoro per raggiungere questo obiettivo è stata svolta nelle attività di Grunt per concatenare, minimizzare e comprimere il più possibile le immagini. Inoltre, il sito reindirizza le immagini non essenziali dopo il caricamento della pagina, in modo che i contenuti effettivi vengano visualizzati più rapidamente sullo schermo.
Per migliorare ulteriormente il tempo di caricamento della pagina, Paul ha scelto un service worker. Indipendentemente dal fatto che tu sia online o meno, la visita di una pagina può essere fornita dalla cache, in modo da poter accedere ai contenuti anche in caso di connessione instabile (estremamente importante durante la connessione Wi-Fi della conferenza). Il sito di CDS è uno dei primi siti di produzione a utilizzare la nuova funzionalità, che ha fatto incontrare a Paul una serie di "problemi degli early adopter", ma l'enorme aumento delle prestazioni, mi ha detto, si è rimediato. Infatti, ora lo porta su tutti i siti che costruisce!
Il rendimento, ovviamente, non riguarda solo la qualità del caricamento di un sito, ma anche il suo funzionamento. Paul sapeva che le animazioni sarebbero state una sfida, motivo per cui ha ideato FLIP. Inoltre, ha fatto il possibile per assicurarsi che nulla ostacolasse l'input tocco o lo scorrimento. Nonostante il sito non sia molto complesso, ha adottato una metodologia FRAIL modificata per la costruzione (non aveva bisogno di molto tempo di inattività) e il risultato è stato molto utile.
Design
Poiché il sito è stato creato da una sola persona, Paul è stato sia il progettista che lo sviluppatore del progetto, generando senza precedenti livelli di comprensione in merito alle reciproche preoccupazioni nei due "team". Gli piace progettare il desktop verso il basso (il contrario del miglioramento progressivo, che ha utilizzato durante lo sviluppo), perché gli dà un'idea di ciò che deve essere inserito nel progetto. Successivamente, Paolo passa alla visualizzazione mobile, che gli consente di perfezionare le cose in modo significativo e assicurarsi che gli aspetti più importanti stiano ricevendo la massima attenzione. Questo influisce quindi sulla versione desktop, perché invariabilmente l'architettura e la priorità delle informazioni dovranno essere aggiornate.
Non tutto è andato liscio. All'epoca le linee guida sul material design non erano chiare su come realizzare un sito di contenuti, quindi c'erano delle aree in cui non era riuscito a realizzare i suoi obiettivi. Il design, inoltre, non teneva conto della correlazione tra le informazioni relative a programma e sessione e, alla fine, l'esperienza utente significava che le persone andavano alla pianificazione e si sentivano frustrate perché non riuscivano ad accedere direttamente alle informazioni della sessione.
Detto questo, penso che Paul abbia fatto un ottimo lavoro nel portare la specifica di material design in un sito di contenuti e sono davvero soddisfatto delle immagini e del movimento. Le caratteristiche di material design sono uniche e le informazioni e il look incoraggiano l'interazione e la gerarchia.
Operazione riuscita
- L'intero sito è stato rilasciato con successo su GitHub (> 200 stelle) come boilerplate e ispirazione per gli sviluppatori web.
- Incorporati le migliori e più recenti piattaforme web: service worker, manifest web e colori dei temi dinamici. L'effetto netto è qualcosa che sembra completamente integrato con la piattaforma quando viene eseguita su dispositivi Android. Se lo aggiungessi alla schermata Home dell'utente, sarà molto simile all'app che utilizzerebbe, ed è davvero fantastico.
- ~73.7k visualizzazioni di pagina, ~73.7k clic per le sottosezioni del sito hanno permesso agli utenti di utilizzarlo e interagire con il sito, molto di più del previsto.
Nel complesso, un'ottima ispirazione per gli sviluppatori web di oggi e un sito web per conferenze di grande successo.