Hai un "sito web reattivo"? Questo è un sito con un layout che cambia in base al dispositivo di un visitatore e alle dimensioni dello schermo. Il web design reattivo è ora una best practice del settore. È consigliato da Google e trovato su milioni di siti sul Web. C'è, tuttavia, una grande differenza tra l'avere un sito web che semplicemente "si adatta" a schermi di dimensioni diverse e che ha un sito veramente reattivo.
Io di solito vedo le aziende ridisegnare il loro sito web e diffondere un comunicato stampa che esalta le virtù del loro nuovo design mobile-friendly. Quando visito quei siti, quello che trovo spesso è un layout che in effetti scala e cambia per adattarsi a schermi diversi, ma questo è il punto in cui prendono l'idea di reattività. Questo non è abbastanza. Un sito web veramente reattivo non si limita a scalare per adattarsi a uno schermo più piccolo o più grande. Su questi siti, troverai anche i seguenti tratti importanti.
1. Prestazioni ottimizzate
A nessuno piace aspettare che venga caricato un sito Web e quando qualcuno utilizza un dispositivo mobile con una connessione che potrebbe non essere l'ideale, la necessità di caricare rapidamente un sito è ancora più importante.
Quindi, come ottimizzi le prestazioni del tuo sito? Se stai iniziando con un nuovo sito come parte di una riprogettazione, dovresti renderlo un punto per creare un budget di prestazioni come parte di quel progetto. Se stai lavorando con un sito esistente e non stai partendo da zero, il primo passo è testare le prestazioni del tuo sito per vedere dove ti trovi oggi.
Una volta che hai una linea di base su dove si trova il tuo sito in termini di prestazioni, puoi iniziare a fare i miglioramenti necessari per aumentare la velocità di download. Un ottimo punto di partenza è probabilmente con le immagini del tuo sito. Le immagini troppo grandi sono il colpevole numero uno quando si tratta di caricare lentamente i siti, quindi l'ottimizzazione delle immagini per la pubblicazione sul Web può davvero aiutare il sito dal punto di vista delle prestazioni.
La realtà è che le migliori prestazioni del sito Web e le velocità di download elevate sono un vantaggio che tutti i visitatori apprezzeranno. Dopotutto, nessuno si è mai lamentato del fatto che un sito fosse caricato "troppo velocemente", ma se un sito impiega troppo tempo per caricarsi, allontanerà in assoluto le persone, sia che reagisca in modo "reattivo" sullo schermo o meno.
2. Gerarchia dei contenuti intelligenti
Quando un sito Web viene visualizzato su uno schermo di grandi dimensioni, è possibile posizionare il contenuto in vari modi a causa del notevole spazio disponibile sullo schermo. Spesso è possibile adattare sullo schermo tutti i messaggi e le immagini importanti, gli aggiornamenti delle notizie, le informazioni sugli eventi e la navigazione del sito contemporaneamente. Ciò consente al visitatore di scansionare facilmente e rapidamente il contenuto dell'intera pagina e decidere cosa è importante per loro.
Questo scenario cambia drasticamente quando prendi il design del sito e lo trasformi per dispositivi di piccolo schermo, come un telefono cellulare. All'improvviso lavori con una frazione dello schermo immobiliare che avevi prima. Ciò significa che devi decidere cosa apparirà prima sul sito, cosa lo seguirà, ecc. Invece di vedere tutto in una volta, probabilmente avrai solo lo spazio per mostrare una o due cose (una delle quali è probabilmente la navigazione). Ciò significa che le decisioni di gerarchia devono essere prese. Sfortunatamente, ciò che spesso determina ciò che viene prima visualizzato sullo schermo, e poi il secondo, ecc. È il modo in cui la pagina stessa è codificata. È più facile, quando si costruisce un sito reattivo, visualizzare prima quello che è prima nel codice sullo schermo, seguito dal secondo elemento nel codice e così via. Sfortunatamente, ciò che potrebbe essere più importante su un dispositivo potrebbe non essere così critico su un altro. Un sito veramente reattivo comprende che la gerarchia dei contenuti dovrebbe cambiare a seconda delle diverse situazioni e dovrebbe essere intelligente su ciò che mostra dove.
I miglioramenti apportati alle tecniche di layout CSS, tra cui il layout griglia CSS, Flexbox e altro, consentono ai progettisti e agli sviluppatori di più opzioni quando si tratta di creare contenuti in modo intelligente, invece di essere ostacolati dall'ordine esatto delle aree di contenuto nel codice HTML. L'utilizzo di queste nuove tecniche di layout diventerà ancora più importante in quanto il panorama dei dispositivi e le esigenze degli utenti del nostro sito continuano a evolversi.
3. Esperienze che tengono conto delle forze e delle debolezze di un dispositivo
Stare sul tema dei dispositivi: ogni dispositivo che qualcuno può utilizzare per visitare il tuo sito ha sia punti di forza che punti deboli inerenti a quella piattaforma. Un grande sito reattivo comprende le capacità e i limiti dei diversi dispositivi e li utilizza per creare esperienze personalizzate che sono più adatte a qualsiasi dispositivo che un visitatore possa utilizzare in quel momento.
Ad esempio, un telefono cellulare include una serie di funzioni che non si troveranno in un computer desktop tradizionale. Il GPS è un esempio di funzionalità mobile centric (sì, è possibile ottenere informazioni generali sulla posizione anche sui desktop, ma il GPS del dispositivo è molto più accurato). Il tuo sito potrebbe utilizzare le informazioni GPS per inviare in modo intelligente a una persona informazioni dettagliate dettagliate o specifiche della direzione o offerte speciali basate esattamente sulla loro posizione in quel momento.
Un altro esempio di questo principio in pratica sarebbe un sito che comprende quale tipo di schermo si sta utilizzando e invia le immagini più adatte a tale visualizzazione. Se si dispone di uno schermo con un'alta densità di pixel, è possibile decidere di inviare immagini di qualità più elevata a quello schermo. Queste stesse immagini sarebbero inutili su uno schermo meno capace, tuttavia, e la qualità extra andrebbe persa mentre le dimensioni extra del file verrebbero scaricate senza alcun motivo reale.
Siti reattivi davvero eccezionali considerano l'intera esperienza dell'utente e lavorano per adattare quell'esperienza basata non solo su un tipo di dispositivo o sulla dimensione dello schermo, ma anche su altri aspetti importanti dell'hardware.
4. Contenuto con contesto
Inizialmente, il web design reattivo ha ricevuto il suo nome a causa dell'idea che il layout di un sito rispondesse a diverse dimensioni dello schermo, ma è possibile rispondere a molto più della semplice dimensione dello schermo. Basandosi sull'esempio precedente di utilizzo dei punti di forza e di debolezza di un dispositivo, è possibile utilizzare quelli, nonché altri dati come la data e l'ora, per personalizzare davvero l'esperienza di un sito web.
Immagina un sito Web per un grande evento fieristico. Mentre un sito Web reattivo modifica il layout delle pagine del sito in scala con schermate diverse, puoi anche utilizzare la data per determinare quali contenuti sono più importanti da visualizzare. Se è il periodo di tempo precedente all'evento, è probabile che tu voglia visualizzare in modo visibile le informazioni di registrazione. Se, tuttavia, l'evento sta effettivamente accadendo in quel momento, la registrazione potrebbe non essere il contenuto più importante. Invece, è possibile decidere che il programma giornaliero degli eventi è più critico in quanto è più pertinente alle esigenze immediate di quell'utente.
Facendo ulteriori passi, è possibile attingere al GPS di un dispositivo per determinare dove si trovano effettivamente alla fiera. Potresti fornire loro contenuti interattivi in base alla loro posizione, mostrando loro stand o sessioni vicine per iniziare.
5. Accessibilità
L'ultimo esempio di come un sito può veramente rispondere alle esigenze di un visitatore è pensare all'accessibilità del sito. I siti web dovrebbero essere in grado di essere utilizzati da quante più persone possibile, comprese quelle con disabilità. Il tuo sito web dovrebbe essere in grado di essere utilizzato da qualcuno che ha bisogno di uno screen reader o altro software assistito per accedere al suo contenuto. In questo modo, il tuo sito risponde alle loro esigenze perché hai assicurato che l'esperienza, anche se diversa per i visitatori disabili, è ancora appropriata.
Rispondendo al maggior numero possibile di punti dati, e non solo alle dimensioni dello schermo, un sito Web può essere molto più che "mobile friendly". Può diventare un'esperienza davvero reattiva in tutti i sensi della frase.
