Una base solida
Il requisito di base per creare ottime PWA è una base solida. Per implementare questi concetti di base, devi progettare e codificare i vincoli del web utilizzando un paio di principi:
- Usa il mobile come vincolo di messa a fuoco. Assicurati che ogni visualizzazione del tuo progetto sia incentrata solo sui contenuti e sulle interazioni essenziali.
- Evidenziare i contenuti e le funzionalità di base nel processo di progettazione.
- Migliora progressivamente quando necessario. Inizia con la creazione dei contenuti e delle funzionalità principali di un componente con gli strumenti più diretti e ampiamente disponibili. Rendili accessibili. Quindi, testa le funzionalità avanzate che vorresti usare e migliora il tuo componente.
- Offri un'esperienza utente rapida e positiva incentrata su metriche relative alle prestazioni web incentrate sull'utente, ottieni metriche utente reali e promuovi le prestazioni per tutti gli 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. I design si basano su vincoli anziché pixel e consentono a ogni utente di accedere ai tuoi contenuti e alle tue funzionalità di base nel modo più adatto al contesto di navigazione specifico.
Responsive web design (RWD)
A partire dall'articolo "A List Apart" di Ethan Marcotte del 2010, Adattabile web design, designer e sviluppatori sono stati incoraggiati a creare esperienze che si flessibili, rendendo interfacce utente compatibili con schermi e dispositivi diversi.
In qualche modo, però, il processo è stato ridotto alle dimensioni per dispositivi mobili, tablet e desktop, influenzando in modo significativo le larghezze degli schermi iOS. Grazie a CSS moderni e a una nuova attenzione per l'intento originale del reattivo design, possiamo reinserire lo squish su siti squishy.
Il Adaptive web design introduce tre ingredienti tecnici:
- Griglie fluide
- Contenuti multimediali flessibili
- Query supporti
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
Agli albori della progettazione del reattivo i presupposti erano stati concepiti allo scopo di semplificare la progettazione dei siti. Ad esempio, le esperienze di piccole dimensioni erano per i telefoni con una larghezza di 320 px, quelle di 320 px, quelle medie per i tablet e di 1024 px per le versioni più grandi di quelle per i computer. Gli schermi piccoli avevano funzionalità touch, gli schermi grandi no. Gli utenti dello smartphone erano di fretta e distratti e, pertanto, avevano bisogno di un'esperienza "leggera".
Niente di tutto questo è vero: si tratta di miti sui dispositivi mobili basati sul presupposto che le esigenze di un utente sono fondamentalmente diverse in base esclusivamente alle dimensioni dello schermo o al tipo di dispositivo. Questo non regge al controllo.
Prendi ad esempio una PWA di un social network che oggi puoi installare su dispositivi mobili e desktop. Sui computer desktop, molti utenti possono mantenere una finestra stretta con il feed su un lato dello schermo durante il lavoro e supponendo che utilizzino un dispositivo mobile a causa della larghezza disponibile non sarebbe corretto.
Il mondo delle PWA, fuori dalle schede del browser, sta persino aggiungendo nuove sfide a un ambiente di progettazione reattiva, come la modalità mini e il lavoro con i dispositivi pieghevoli.
Modalità ridotta
Se installi una PWA su un computer, una finestra può diventare molto piccola, ad esempio essere più piccola di una finestra del browser o di un'area visibile per dispositivi mobili. C'è una novità sul web: possiamo supportare una modalità mini, ovvero una finestra che può avere le dimensioni minime di 200 x 100 pixel CSS.
Al giorno d'oggi, quando si crea una PWA, è consigliabile pensare a cosa offrire in modalità mini, grazie al web design reattivo, ad esempio ai pulsanti di controllo di un music player, alle informazioni della dashboard o alle azioni rapide.
Sui computer, una PWA può essere visualizzata in una finestra più piccola rispetto a quella più piccola mai progettata per il browser. Aggiunge un nuovo punto di interruzione per il tuo web design reattivo: la modalità mini.
Pieghevoli e ibridi
Anche i dispositivi pieghevoli e ibridi sono comuni in questi giorni:
- Telefoni clamshell di piccole dimensioni.
- Dispositivi pieghevoli che possono essere utilizzati come smartphone o tablet.
- Laptop trasformabili in tablet.
- Tablet che funzionano come laptop dotati di tastiera e trackpad.
- Gli smartphone possono quindi essere convertiti in computer con un hub.
Sebbene la sfida esista per ogni sito web, con un'app web progressiva hai il controllo e la responsabilità della finestra al momento dell'installazione dell'app. Pertanto, il tuo design deve reagire e offrire la migliore esperienza in ogni contesto.
Tutto prima di tutto
Da dove dovresti iniziare? Prima i dispositivi mobili, i contenuti e poi offline? Quando si progetta per la flessibilità del web, qual è? Beh, la risposta è sì, tutto prima. Il termine mobile first è stato interpretato in molti modi da quando Luke Wroblewski l'ha coniato per la prima volta nel 2009: dall'emulazione di modelli UI e UX specifici della piattaforma sul web alla creazione di app mobile prima di sviluppare app web, fino all'utilizzo di query multimediali di larghezza minima e alla capacità di chiamare un giorno. Tuttavia, il suo intento originale è questo: i dispositivi mobili ti costringono a concentrarti. Come ha detto Luke:
I dispositivi mobili richiedono ai team di sviluppo software di concentrarsi solo sulle azioni e sui dati più importanti di un'applicazione. Semplicemente, in uno schermo da 320 x 480 pixel non c'è spazio per elementi estranei e inutili. Bisogna stabilire delle priorità. Perciò, quando un team progetta Mobile First, il risultato è un'esperienza focalizzata sulle attività chiave che gli utenti vogliono svolgere senza le deviazioni e i residui dell'interfaccia che sporcano gli odierni siti web accessibili ai computer. Si tratta di un'esperienza utente positiva e positiva per la tua attività.
Luke Wroblewski
Concentra ogni visualizzazione del tuo sito web solo sulle attività essenziali che un utente vuole portare a termine e non aggiungere altre informazioni all'idea solo perché dispone di uno spazio più ampio sullo schermo.
Il secondo principio è sottinteso nel Adaptive Web Design: la "sfumatura di esperienze diverse". Un'unica esperienza identica e perfetta per ogni utente non dovrebbe essere l'obiettivo del tuo lavoro, ma è praticamente impossibile.
Invece di considerare le tue esperienze web come un aspetto fisso, puoi considerarle come un insieme di consigli che il dispositivo dell'utente utilizzerà per creare la migliore esperienza in base al contesto attuale. Per farlo, è necessario adottare il miglioramento progressivo.
Miglioramento progressivo
Il miglioramento progressivo è un pattern che ci permette di scrivere codice che viene eseguito ovunque, a partire da HTML, CSS e JavaScript standard, aggiungendo ulteriori livelli di funzionalità con i fallback appropriati quando un'API non è disponibile.
Come puoi migliorare? Il rilevamento delle funzionalità è uno schema in cui esegui un test di supporto e reagisci in base ai risultati del test. Per farlo, esistono diversi strumenti e pratiche integrati per la piattaforma web.
Utilizzando @supports, verifica il supporto del browser di una funzionalità CSS e applica le regole in base al risultato.
Questo vale sia per le proprietà CSS che per i valori. Se una proprietà è supportata e un valore non lo è, avrà esito negativo, così come per una proprietà non supportata. Il codice JavaScript può accedervi tramite CSSSupportsRule.
La maggior parte delle nuove funzionalità delle piattaforme web è collegata agli oggetti esistenti, quindi la funzionalità nel rilevamento dello stile degli oggetti funziona bene in JavaScript, così come altre ricerche simili, come il controllo di proprietà o metodi sugli elementi.
Per distribuire il codice JavaScript moderno, puoi utilizzare il pattern module/nomodule per fornire funzionalità più solide con un payload più piccolo per i browser più moderni e un'esperienza di riserva per i browser meno recenti. Questo offre il vantaggio di garantire una nuova base di funzionalità JavaScript, come promesse, classi, funzioni freccia e const e let sono disponibili per i browser che supportano i moduli ES.
È anche possibile combinare più forme di rilevamento delle caratteristiche per creare una base di riferimento avanzata. Realizzato dal team di BBC News, questo gioco è chiamato Cutting the Mustard e ti consente di offrire un'esperienza di base a tutti e di iniziare a migliorare l'esperienza solo dopo che viene raggiunta una determinata funzionalità.
Evita il rilevamento dei dispositivi
Dovresti testare direttamente il supporto delle funzionalità anziché fare ipotesi relative all'assistenza in base alla stringa User-Agent.
Le stringhe dello user agent non sono mai state realmente affidabili. Per "indovinare" la piattaforma si basa su una conoscenza quasi perfetta di ogni combinazione di browser, sistema operativo e dispositivo. Anche se sono suscettibili di spoofing degli utenti, ad esempio i reindirizzamenti ai siti desktop sui browser mobile sono spesso semplici come lo spoofing di una stringa user agent per computer.
Inoltre, i browser stanno lavorando per bloccare le stringhe User-Agent, con le stringhe user-agent per il rilevamento delle funzionalità identificate in modo specifico come motivo del ritiro, il che le rende ancora più inaffidabili di quanto non lo fossero in precedenza per l'identificazione di un utente e di un dispositivo.
Prima i contenuti
Un altro principio della progettazione per il web è: inizia dai tuoi contenuti. Ad esempio, un ticker in tempo reale con un grafico delle quotazioni di un'azione è, in sostanza, una tabella di azioni con la relativa quotazione cronologica, magari con un link per aggiornare il sito.
Ciò può quindi essere migliorato con JavaScript e richieste di recupero per aggiornare i valori della tabella in un timer oppure migliorato con socket per fornire aggiornamenti basati su push in tempo reale. Può essere migliorata di nuovo per rappresentare i risultati in un grafico, magari con CSS, magari con SVG, magari con Canvas. Ma l'importante inizia dai contenuti.
Design intrinseco
- I dispositivi mobili come vincolo dell'obiettivo per l'esperienza utente.
- Enfasi sui contenuti e sulle funzionalità di base nel processo di progettazione.
- Miglioramento progressivo con funzionalità avanzate, ove disponibili.
Questi principi si combinano per fornirci qualcosa di nuovo: il design intrinseco. Nella sua conferenza Designing Intrinsic Layouts, Jen Simmons parla dell'utilizzo di strumenti CSS moderni, come Grid, Flexbox, layout di flusso e modalità di scrittura, per progettare e creare interfacce utente. Con questi strumenti, dice:
Puoi fare in modo che il layout sia intrinseco ai contenuti a disposizione e al design che vogliamo realizzare.
Jen Simmons
Questo nuovo CSS consente ai designer di acquisire un po' di controllo sul layout, rispettando però i principi del web design più recenti. Invece di creare moduli fissi basati su dimensioni dello schermo fisse, puoi definire regole basate sui contenuti in base alle quali il layout avviene sfruttando le proprietà intrinseche di quei contenuti, come le dimensioni del testo, le dimensioni del testo e lo spazio disponibile, tutto contemporaneamente. Ti consentono di realizzare il tuo design mentre interagisce con i contenuti senza dover controllare il posizionamento di ogni pixel.
I layout intrinseci rendono la conversazione sul controllo sul web a 360°, dando una definizione. Il controllo sul web non riguarda la dettatura di dispositivi o dimensioni dello schermo, colori, caratteri, layout o funzionalità per ogni visitatore del tuo sito. Il controllo sul web consiste nel scrivere le regole che un browser userà per combinare la tua esperienza, creandola in modo univoco per ciascun utente nella tua app web progressiva.
Rendimento sul web
L'ultima base, ma non meno importante, della nostra PWA sono le prestazioni web. Avere un'ottima esperienza per gli utenti è obbligatorio e porterà a un maggior numero di conversioni in ogni modo.
Il rendimento sul web prevede diversi passaggi:
- Comprendere le principali metriche incentrate sull'utente disponibili.
- Imposta gli obiettivi per ogni metrica.
- Misura la nostra PWA.
- Migliora le nostre metriche applicando tecniche e best practice in modo statico nel nostro codice o server.
- Misura di nuovo.
- Migliorare l'esperienza di ogni utente, in tempo reale, in base al contesto dell'utente.
Oggi, le metriche sul rendimento sul web misurano la velocità di visualizzazione dei contenuti sullo schermo, ma anche il livello di interattività del tuo sito web e il modo in cui gli utenti percepiscono l'esperienza.
Segnali web essenziali
Nell'ultimo decennio abbiamo avuto a che fare con diverse metriche per misurare il successo in termini di rendimento sul web. Oggi, un insieme di metriche consigliate note come Segnali web essenziali si concentra su tre aree chiave che influiscono sulle prestazioni e sull'esperienza utente:
- Caricamento in corso: rappresentato da Largest Contentful Paint (LCP).
- Interattività: rappresentata da Interaction to Next Paint (INP).
- Stabilità visiva: rappresentata da Cumulative Layout Shift (CLS).
Con Segnali web essenziali, puoi capire a colpo d'occhio il livello di qualità della tua PWA in termini di prestazioni ed esperienza utente.
Elementi di base di PWA
Per garantire un'esperienza ottimale a tutti gli utenti, è importante che la tua PWA abbia una solida base per quanto riguarda il reattivo design, i dispositivi mobili e tutto in primo luogo, il design intrinseco e le prestazioni web.