Competenze essenziali

Una base solida

Una base solida è il requisito di base per creare ottime PWA. Per implementare questa base, devi progettare e scrivere codice in base alle limitazioni del web utilizzando un paio di principi:

  • Utilizza il dispositivo mobile come vincolo di messa a fuoco. Assicurati che ogni visualizzazione del progetto si concentri solo sui contenuti e sulle interazioni essenziali.
  • Metti in evidenza i contenuti e le funzionalità di base durante il processo di progettazione.
  • Migliora gradualmente, se necessario. Inizia creando i contenuti e le funzionalità di base di un componente con gli strumenti più semplici e più ampiamente disponibili. Rendilo accessibile. Poi, verifica la presenza di funzionalità avanzate che vuoi utilizzare e migliora il tuo componente con queste funzionalità.
  • Offri un'esperienza utente veloce e soddisfacente incentrata sulle metriche delle prestazioni web incentrate sugli utenti, ottieni metriche utente reali ed esegui il push delle prestazioni per tutti i tuoi utenti, indipendentemente dalla connessione di rete, dal tipo di input, dalla CPU o dalla potenza della GPU.

Seguendo questi principi e migliorandoli con pattern e funzionalità web moderni, puoi creare esperienze straordinarie e veloci con design davvero intrinseci. Design basati su vincoli anziché su pixel, che consentono a ogni utente di accedere ai tuoi contenuti e alle funzionalità di base in modo più adatto al suo particolare contesto di navigazione.

Responsive Web Design

Da quando nel 2010 Ethan Marcotte ha pubblicato l'articolo A List Apart Responsive Web Design, designer e sviluppatori sono stati incoraggiati a creare esperienze flessibili, realizzando interfacce utente che funzionano su una serie di dimensioni dello schermo e dispositivi.

Tuttavia, in un punto del processo, la versione è stata abbreviata in dimensioni per dispositivi mobili, tablet e computer, con una grande influenza sulle larghezze degli schermi iOS. Con il CSS moderno e un rinnovato interesse per lo scopo originale del responsive design, possiamo riportare la flessibilità nei siti flessibili.

Il responsive web design introduce tre componenti tecnici:

  • Griglie fluide
  • Mezzi flessibili
  • Query sui contenuti multimediali

Ethan conclude che questi requisiti tecnici non sono sufficienti; la strada da seguire richiede anche un modo di pensare diverso.

Il mito degli utenti di dispositivi mobili

All'inizio del design responsive, sono state fatte alcune supposizioni per semplificare la progettazione dei siti. Ad esempio, le esperienze piccole erano destinate agli smartphone e avevano una larghezza di 320 pixel, quelle medie erano destinate ai tablet e avevano una larghezza di 1024 pixel e quelle più grandi erano destinate ai computer. Gli schermi piccoli avevano funzionalità touch, mentre quelli grandi no. Gli utenti di telefoni erano in fretta e distratti e quindi avevano bisogno di un'esperienza "leggera".

Niente di tutto questo è vero. Si tratta di miti sui dispositivi mobili perpetuati dal presupposto che le esigenze di un utente siano fondamentalmente diverse in base esclusivamente alle dimensioni dello schermo o al tipo di dispositivo. Ciò non regge ai controlli.

Prendiamo ad esempio una PWA di social network che si può installare oggi su dispositivi mobili e computer. Sul computer, molti utenti possono mantenere una finestra stretta con il feed su un lato dello schermo mentre lavorano. È sbagliato supporre che si trovino su un dispositivo mobile a causa della larghezza disponibile.

Il mondo delle PWA fuori dalle schede del browser sta persino aggiungendo nuove sfide a un mondo di design reattivo, come la mini-modalità e l'utilizzo dei dispositivi pieghevoli.

Modalità ridotta

Con una PWA installata su un computer, una finestra può diventare molto piccola: più piccola di quella di un browser, ma più piccola di quella di un'area visibile su dispositivi mobili. Si tratta di una novità sul web: possiamo supportare una modalità mini, una finestra che può essere piccola come 200 x 100 pixel CSS.

Quando crei una PWA, è buona norma pensare a cosa offrire in modalità mini, grazie al web design responsive, ad esempio solo i pulsanti di controllo di un media player, le informazioni della dashboard o le azioni rapide.

Sul computer, una PWA può essere visualizzata in una finestra più piccola di quella più piccola che hai mai progettato per il browser. Aggiunge un nuovo punto di interruzione per il tuo design web responsive: la modalità mini.

Pieghevoli e ibridi

Anche i dispositivi pieghevoli e ibridi sono comuni al giorno d'oggi:

  • Piccoli smartphone clamshell.
  • Dispositivi pieghevoli che possono essere utilizzati come smartphone o tablet.
  • Laptop che possono essere trasformati in tablet.
  • Tablet che possono fungere da laptop con tastiera e trackpad.
  • Gli smartphone possono quindi essere convertiti in computer con un hub.

Sebbene il problema esista per ogni sito web, con un'app web progressiva hai il controllo e la responsabilità della finestra quando l'app viene installata. Di conseguenza, il design deve reagire e offrire la migliore esperienza in ogni contesto.

Tutto prima di tutto

Ma da dove iniziare? Dispositivo mobile, contenuti, offline? Quando si progetta per la flessibilità del web, qual è? La risposta è sì, tutto prima. Il termine mobile first è stato interpretato in molti modi da quando è stato coniato da Luke Wroblewski nel 2009: dall'emulazione di pattern di UI ed UX specifici della piattaforma sul web alla creazione di app mobile prima di quelle web, fino all'utilizzo di query sui media con larghezza minima e il gioco è fatto. L'intento originale, però, è questo: i dispositivi mobili ti costringono a concentrarti. Come ha detto Luke:

I dispositivi mobili richiedono che i team di sviluppo software si concentrino solo sui dati e sulle azioni più importanti di un'applicazione. Uno schermo di 320 x 480 pixel non ha spazio per elementi estranei e non necessari. Devi dare la priorità. Pertanto, quando un team progetta un sito mobile first, il risultato è un'esperienza incentrata sulle attività chiave che gli utenti vogliono svolgere senza i deviazioni e i residui dell'interfaccia che invadono i siti web accessibili da computer di oggi. Si tratta di un'esperienza utente positiva e vantaggiosa per l'attività.

Luca Bianchi

Concentra ogni visualizzazione del tuo sito web solo sulle attività essenziali che un utente vuole svolgere al suo interno e non aggiungere altro all'idea solo perché hai più spazio sullo schermo.

Il secondo principio viene accennato nel Adaptive Web Design: il "gradiente di esperienze diverse". Un'unica esperienza identica e perfetta per ogni singolo utente non dovrebbe essere l'obiettivo del tuo lavoro; è praticamente impossibile.

Invece di pensare alle tue esperienze web come a una cosa fissa, considerala come un insieme di consigli che il dispositivo dell'utente utilizzerà per creare la migliore esperienza per il contesto attuale. Per farlo, è necessario implementare un miglioramento progressivo.

Potenziamento progressivo

Il miglioramento progressivo è un pattern che ci consente di scrivere codice che viene eseguito ovunque, a partire da HTML, CSS e JavaScript standard, aggiungendo livelli di funzionalità con fallback appropriati quando un'API non è disponibile.

Come si applica l'effetto? Il rilevamento delle funzionalità è uno schema in cui si esegue un test a scopo di supporto e si reagisce in base ai risultati del test. Esistono diversi strumenti e best practice della piattaforma web integrati per farlo.

Utilizzando @supports, controlla il supporto del browser per una funzionalità CSS e applica le regole in base al risultato. Questo vale sia per le proprietà CSS sia per i valori. Se una proprietà è supportata e un valore non lo è, l'operazione non andrà a buon fine, così come per una proprietà non supportata. Il codice JavaScript può accedervi tramite CSSSupportsRule.

La maggior parte delle nuove funzionalità della piattaforma web è collegata a oggetti esistenti, quindi la "caratteristica" nel rilevamento dello stile dell'oggetto funziona bene in JavaScript, così come altre ricerche simili, come il controllo di proprietà o metodi sugli elementi.

Per pubblicare codice JavaScript moderno, puoi utilizzare il pattern module/nomodule per fornire funzionalità più solide con un payload più piccolo ai browser più moderni e un'esperienza di riserva ai browser meno recenti. Il vantaggio è che garantisce una nuova base di funzionalità JavaScript, come promesse, classi, funzioni freccia e const e let, per i browser che supportano i moduli ES.

Puoi anche combinare più forme di rilevamento delle caratteristiche per creare una base di riferimento migliorata. Coniato dal team di BBC News, questo approccio si chiama Cutting the Mustard e ti consente di offrire un'esperienza di base a tutti e iniziare a migliorarla solo dopo aver raggiunto una determinata soglia di funzionalità rilevate.

Evitare il rilevamento del dispositivo

Dovresti testare direttamente il supporto delle funzionalità invece di fare ipotesi basate sulla stringa User-Agent.

Le stringhe dello user-agent non sono mai state veramente affidabili. Per "indovinare", si basano su una conoscenza quasi perfetta di ogni combinazione di browser, sistema operativo e dispositivo esistente. Anche in questo caso sono suscettibili allo spoofing degli utenti, ad esempio i reindirizzamenti ai siti desktop sui browser mobile sono spesso semplici come lo spoofing di una stringa di user agent per desktop.

Inoltre, i browser stanno lavorando al blocco delle stringhe dello user agent, con le stringhe dello user agent per il rilevamento delle funzionalità indicate specificamente come motivo del ritiro, il che le rende ancora meno affidabili di quanto non fossero in precedenza per l'identificazione di un utente e di un dispositivo.

Priorità ai contenuti

Un altro principio di progettazione per il web è: inizia prima con i contenuti. Ad esempio, un ticker in tempo reale con un grafico dei prezzi di un'azione è, in sostanza, una tabella di azioni con il relativo prezzo nel tempo, magari con un link per aggiornare il sito.

Questo può quindi essere migliorato con JavaScript e le richieste di recupero per aggiornare i valori della tabella in base a un timer o con socket per fornire aggiornamenti basati sul push in tempo reale. Può essere migliorato di nuovo per rappresentare graficamente i risultati, magari con CSS, forse con SVG o magari con Canvas. Ma il fondamento va dai contenuti.

Design intrinseco

  • Il mobile come vincolo per l'esperienza utente.
  • Metti in evidenza i contenuti e le funzionalità di base durante il processo di progettazione.
  • Miglioramento progressivo con funzionalità avanzate, se disponibili.

La combinazione di questi principi ci offre qualcosa di nuovo: il design intrinseco. Nel suo talk Designing Intrinsic Layouts, Jen Simmons parla dell'utilizzo di strumenti CSS moderni, come Grid, Flexbox, il layout a flusso e le modalità di scrittura, per progettare e creare interfacce utente. Con questi strumenti, afferma:

È possibile fare in modo che il layout sia intrinseco ai contenuti di cui disponiamo e al design che vogliamo realizzare.

Jen Simmons

Questo nuovo CSS consente ai designer di riprendere il controllo sul layout, ma in modo coerente con i più recenti principi di web design. Anziché creare moduli fissi in base a dimensioni dello schermo fisse, definisci regole basate sui contenuti in base alle quali viene applicato il layout sfruttando le proprietà intrinseche dei contenuti, ad esempio la dimensione, le dimensioni del testo e lo spazio disponibile, tutto contemporaneamente. Ti consentono di realizzare il tuo design mentre interagisce con i tuoi contenuti senza dover controllare il posizionamento di ogni pixel.

I layout intrinseci completano il discorso sul controllo sul web, dandogli una definizione. Il controllo sul web non consiste nel dettare i dispositivi, le dimensioni o i colori degli schermi oppure i caratteri, i layout o le funzionalità per ogni visitatore del tuo sito. Il controllo sul web consiste nello scrivere le regole che un browser utilizzerà per assemblare la tua esperienza, creandola in modo univoco per ogni utente nella tua Progressive Web App.

Rendimento sul web

L'ultimo ma non meno importante aspetto di base della nostra PWA è il rendimento web. È obbligatorio offrire un'esperienza utente eccezionale, poiché migliorerà le conversioni in ogni modo possibile.

Il rendimento sul web prevede diversi passaggi:

  • Comprendi le principali metriche incentrate sugli utenti disponibili.
  • Imposta obiettivi per ogni metrica.
  • Misura la nostra PWA.
  • Migliorare le nostre metriche applicando tecniche e best practice in modo statico nel nostro codice o nel nostro server.
  • Ripeti la misurazione.
  • Migliora l'esperienza di ogni utente in tempo reale in base al suo contesto.

Attualmente le metriche sul rendimento web misurano la velocità con cui i contenuti vengono visualizzati sullo schermo, ma anche l'interattività del tuo sito web e la percezione dell'esperienza da parte degli utenti.

Segnali web essenziali

Negli ultimi dieci anni abbiamo utilizzato metriche diverse per misurare il successo del rendimento web. Attualmente, una serie di metriche consigliate, note come Core Web Vitals, si concentra su tre aree chiave che influiscono sulle prestazioni e sull'esperienza utente:

Un insieme di metriche di Core Web Vitals che mostra i risultati delle prestazioni di un sito web.

Con Core Web Vitals puoi vedere a colpo d'occhio quanto è buona o cattiva la tua PWA in termini di prestazioni ed esperienza utente.

Nozioni di base sulle PWA

È importante che la tua PWA abbia una solida base per il responsive design, per i dispositivi mobili e per tutto ciò che riguarda il design intrinseco e il rendimento sul web, come base per un'esperienza ottimale per tutti gli utenti.

Risorse