Competenze essenziali

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ò, le dimensioni sono state abbreviate in quelle di dispositivi mobili, tablet e desktop, con un impatto significativo sulle dimensioni 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: 320 px di larghezza, 320 px di larghezza, 1024 px di larghezza medie per i tablet e 1024 px di larghezza superiore 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 ciò è 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. 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 tenere una finestra stretta con il feed a un lato dello schermo durante il lavoro e supponendo che utilizzino un dispositivo mobile a causa della larghezza disponibile sarebbe errato.

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, ovvero più piccola della finestra di un browser, o di un'area visibile su 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 crei una PWA, dovresti pensare a cosa offrire in modalità mini, grazie al reattivo web design, ad esempio al controllo dei pulsanti 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 ciascuna visualizzazione del tuo sito web solo sulle attività essenziali che un utente vuole svolgere 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 singolo utente non dovrebbe essere l'obiettivo del tuo lavoro; è praticamente impossibile.

Invece di considerare le tue esperienze web come un aspetto fisso, consideralo 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ò accedere a questa funzionalità 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 delle proprietà o dei metodi sugli elementi.

Per distribuire il codice JavaScript moderno, puoi usare il pattern form/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 dello user agent, con le stringhe user agent per il rilevamento delle funzionalità identificate in modo specifico come motivo del ritiro, che le rendono ancora più inaffidabili rispetto a prima 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à con cui i tuoi contenuti vengono visualizzati sullo schermo, ma anche quanto è interattivo il tuo sito web e come gli utenti percepiscono l'esperienza.

Web Vitals

Nell'ultimo decennio abbiamo avuto a che fare con diverse metriche per misurare il successo in termini di rendimento sul web. Attualmente, una serie di metriche consigliate è raggruppate nel progetto Web Vitals. I Segnali web si concentrano sulle metriche in tre aree chiave che influenzano le prestazioni e la percezione del web:

  • Caricamento in corso…
  • Interattività
  • Stabilità visiva

Un insieme di metriche di Core Web Vitals che mostrano i risultati relativi alle prestazioni di un sito web.

Con i Segnali web essenziali puoi capire a colpo d'occhio quanto è buona o cattiva la tua PWA in termini di prestazioni web 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.

Risorse