Reactive Web Design: il segreto per creare app Web straordinarie

Nell'ultimo anno ho osservato due sottili tecniche utilizzate da alcuni sviluppatori che ritengono che un'app Web si senta lenta, bizzarra, altamente reattiva e raffinata.

Credo che queste tecniche siano abbastanza importanti da richiedere un nome: Reactive Web Design.

In sintesi, il web design reattivo è un insieme di tecniche che possono essere utilizzate per creare siti che siano sempre veloci e rispondenti all'input dell'utente, indipendentemente dalla velocità o dalla latenza della rete.

Come sviluppatori web e autori di framework, credo che trovare modi per rendere predefiniti questi schemi in tutto ciò che costruiamo sia una priorità assoluta per migliorare UX e le prestazioni percepite sul web.

Tecnica 1: Carichi istantanei con schermi scheletro

Se utilizzata bene, questa tecnica non viene quasi mai notata, ma ha un impatto enorme sulle prestazioni percepite di un sito.

È interessante notare che la tecnica viene utilizzata da quasi tutte le app native e le fa sentire molto reattive anche su reti terribili, ma non viene quasi mai utilizzata sul Web!

L'opportunità in questo modo risiede!

In breve, gli schermi scheletro assicurano che ogni volta che l'utente tocca qualsiasi pulsante o collegamento, la pagina reagisce immediatamente trasferendo l'utente a quella nuova pagina e quindi caricando il contenuto in quella pagina quando il contenuto diventa disponibile.

Facebook utilizza uno schermo scheletro per migliorare le prestazioni percepite quando lo apri per la prima volta

Gli schermi Skeleton sono una tecnica di performance percepita chiave in quanto rendono le applicazioni molto più veloci, riducendo drasticamente il numero di momenti in cui l'utente rimane meravigliato:

Cosa sta succedendo? Si sta persino caricando? L'ho toccato bene?

Flipkart.com è un raro esempio di sito Web che utilizza questo approccio. Navigare tra le categorie o toccare i prodotti risulta quindi velocissimo, anche quando il caricamento dei risultati effettivi richiede alcuni secondi:

Una screencapture di flipkart.com lanciata dalla schermata principale in modalità standalone su Android

Quando questa tecnica viene utilizzata al meglio, i contenuti già disponibili come miniature o titoli degli articoli possono essere riutilizzati per migliorare ulteriormente le prestazioni percepite, facendo sentire i carichi davvero istantanei.

app.jalantikus.com utilizza il modello Schermi Scheletro e riutilizza titoli e miniature attraverso le transizioni

Test dei siti con schermi scheletro

Testare il modo in cui i siti utilizzano questa tecnica è semplice: basta usare l'emulazione di rete di Chrome per rendere la rete il più lenta possibile e fare clic su un sito. Se sta andando bene, il sito si sentirà comunque scattante e sensibile ai tuoi suggerimenti.

La velocità più lenta supportata nell'emulazione di rete di Chrome

Tecnica 2: "Carichi stabili" tramite dimensioni predefinite sugli elementi

Sai quella sensazione in cui un sito Web sta saltando in giro mentre stai cercando di usarlo? Stai solo cercando di leggere un articolo e il testo continua a muoversi? Questo è ciò che chiamiamo "carico instabile" e dobbiamo bruciarlo con il fuoco .

Il contenuto di slate.com salta in modo molto aggressivo mentre la pagina viene caricata. Più è lenta la rete in cui ti trovi, più a lungo salta.

Carichi instabili rendono i siti Web difficili da interagire e li fanno sentire ... beh ... instabili!

Navigare in un sito instabile mi ricorda sempre come immagino che si sentirebbe passeggiare durante un terremoto

I carichi instabili sono causati da immagini e annunci incorporati in una pagina ma non includono informazioni sul dimensionamento. Per impostazione predefinita, il browser conosce le dimensioni di questi solo una volta caricati, quindi non appena un'immagine viene caricata, THUNK !, l'intera pagina scorre verso il basso .

Per evitare ciò, tutti i tag su una pagina devono includere in modo proattivo le dimensioni dell'immagine che conterranno.

In molti casi le immagini utilizzate in determinate pagine hanno sempre le stesse dimensioni e quindi le loro dimensioni possono essere semplicemente incluse nel modello HTML, ma in alcuni casi la dimensione delle immagini è dinamica e quindi le loro dimensioni devono essere calcolate quando l'immagine viene caricata e quindi modellata nell'HTML quando viene creato.


Lo stesso vale per gli annunci, spesso colpevoli di carichi instabili. Ove possibile, crea un div che conterrà un annuncio e, nel tuo modello, impostalo in modo che sia dimensionato con la migliore ipotesi su quanto sarà grande l'annuncio.

Tieni presente che i carichi instabili sono nel peggiore dei casi su reti lente poiché ti sei appena fissato sulla lettura dei contenuti quando improvvisamente salta e non puoi mai essere sicuro di essere al sicuro.

Mettere tutto insieme

Ho realizzato un piccolo sito dimostrativo su reattive.surge.sh per dimostrare la differenza tra web design convenzionale e reattivo.

Caricamento dell'articolo convenzionale

Nota quanto ci si sente pigri e quanto è frustrante saltare i contenuti. È interessante notare che questi ordini di grandezza sono più fastidiosi sui dispositivi mobili quando si tocca lo schermo e non si vede che reagisce.

Caricamento di un articolo con web design reattivo

Con il design reattivo il carico sembra istantaneo e il sito rimane reattivo toccando più volte l'icona posteriore e il titolo dell'articolo

Avvolgendo

Più la rete è lenta, peggiore diventa l'esperienza dell'utente quando le transizioni di pagina si bloccano sulla rete e le pagine saltano per lunghi periodi.

Con Reactive Web Design possiamo rendere la nostra esperienza scattante e reattiva ("Responsive Design" come un nome è già stato preso, doh!) Anche su reti lente e dolorose.

Mi piacerebbe conoscere i dati della community sugli effetti delle prestazioni percepite sugli indicatori chiave di prestazione come coinvolgimento e entrate!

Inoltre, incoraggerei gli autori di framework e librerie a considerare come rendere predefiniti schermi scheletro e carichi stabili, noto anche come il pozzo del successo.

Se hai delle idee a riguardo, ti prego di scrivermi su @owencm, e se ti è piaciuto, per favore, dagli un ♥!

Post scriptum assicurati di dare un'occhiata al sito demo reattive.surge.sh su un dispositivo mobile per la sua piena gloria!