Con il Web mobile in costante crescita e Google che conferma che classifica le pagine in base alla loro reattività, è fondamentale che il tuo sito Web possa adattarsi a una varietà di dispositivi e dimensioni dello schermo diversi.

Ma il web design reattivo è qualcosa di più del semplice allungamento o compressione del layout per adattarsi. Si tratta di fornire un singolo sito Web in diversi modi, pur mantenendo contenuto e funzionalità.

Con questo in mente, ecco sette suggerimenti di best practice per il responsive web design.

1. Pensa reattivo

Quando è iniziato il responsive web design, i designer hanno iniziato a pianificare gli schermi più grandi, quindi hanno ridimensionato fino a raggiungere il più piccolo. Troppo spesso includevano elementi fantasiosi che non si scomponevano bene per adattarsi a uno schermo più piccolo, il che ha portato la versione mobile a essere una copia annacquata dell'originale e a sembrare un po' un ripensamento. Oggi, i dispositivi mobili rappresentano il maggior volume di traffico per molti siti Web, quindi gli utenti mobili si aspettano e meritano la stessa qualità dell'esperienza di navigazione degli altri utenti. Ma ciò non significa nemmeno che le dimensioni dello schermo più grandi debbano essere ignorate. Molte persone usano ancora un desktop di grandi dimensioni e ancora di più passano da uno schermo all'altro durante il giorno.

Il modo migliore per affrontare questo problema è adottare un approccio "mobile first", progettando prima lo schermo più piccolo e poi aggiungendo gli elementi necessari man mano che si aumentano le dimensioni dello schermo.

Concentrati sulla progettazione per i punti di interruzione popolari, ma tieni anche conto dei divari intermedi: nuovi dispositivi arrivano sul mercato ogni giorno e una dimensione dello schermo poco utilizzata oggi potrebbe essere la novità del prossimo mese. E ricorda di considerare le persone che usano i tablet in modalità verticale: questo può scivolare sotto il radar e finire per sembrare un desktop schiacciato o un layout mobile di base con molto spazio sprecato.

2. Prestare attenzione al contenuto

Non cadere nella trappola di un approccio "adatta alle dimensioni", in cui il tuo obiettivo è adattare tutti gli elementi a una pagina senza considerare il loro contesto. Inizia concentrandoti sul contenuto e sulle funzionalità più importanti e dimostrando brutalità su quali elementi devono affrontare il taglio. Man mano che sali tra le diverse dimensioni dello schermo, metti in dubbio la loro inclusione in ogni fase: se devi pensarci troppo a lungo, probabilmente non è necessario che ci sia. Una volta che hai chiaro il contenuto e le funzionalità di cui hai bisogno, puoi iniziare a lavorare sul layout. L'enorme varietà di dimensioni dello schermo significa che il concetto tradizionale di "above the fold" è praticamente morto. Le persone sono abituate a scorrere - l'avvento di siti come Facebook e Twitter lo ha visto - quindi progetta i tuoi siti in modo da incoraggiare lo scorrimento, ma conserva le informazioni più importanti nella parte superiore dello schermo. Ciò include i dettagli di contatto, le CTA e, sui siti di eCommerce, l'importantissimo pulsante "Aggiungi al carrello".

Dai la priorità agli elementi in base alla loro importanza per l'utente, quindi se puoi adattare il testo accanto a un'immagine su un desktop, pensa attentamente a quale è il migliore per catturare l'attenzione degli utenti su un dispositivo mobile e assicurati che venga prima. Altri elementi, come un'immagine del blog di accompagnamento in una pagina di anteprima, potrebbero essere esclusi del tutto dalla versione mobile, lasciando l'attenzione sul contenuto stesso.

3. Sperimenta con la navigazione scalabile

La navigazione è uno degli aspetti più impegnativi del responsive web design, ma è anche uno dei più importanti. Contrariamente alla maggior parte delle regole di progettazione web, questo è un posto in cui non è necessario essere coerenti: menu grandi e complessi utilizzati su schermi grandi semplicemente non funzionano sui dispositivi mobili, quindi è perfettamente accettabile creare un diverso tipo di navigazione per schermi diversi taglie. La navigazione nascosta è popolare su molti siti mobili, con una semplice icona come l'hamburger che indica la presenza del menu. Puoi far scorrere il menu verso il basso sul contenuto sottostante o sovrapporlo all'intero schermo. Un'altra opzione è quella di utilizzare lo scorrimento orizzontale, in cui il contenuto ovviamente scompare dal lato dello schermo e gli utenti possono scorrere per attivarlo.

Qualunque cosa tu scelga, non negare del tutto la coerenza: il tuo menu dovrebbe avere un aspetto simile ad altre versioni in termini di caratteristiche visive, anche se ha funzionalità diverse.

4. Tutto sulle immagini

La qualità delle immagini sui siti Web è fondamentale, poiché costituiscono gran parte delle prime impressioni di un sito da parte del visitatore. Ma le immagini di grandi dimensioni hanno un effetto negativo sulle velocità di download dei dispositivi mobili con le loro capacità di larghezza di banda inferiori. Proprio come il contenuto, dovresti mettere in discussione l'inclusione di ogni immagine per ogni dimensione dello schermo e includere solo quelle assolutamente necessarie, riconsiderando al contempo elementi come i cursori che contengono più immagini di grandi dimensioni.

Ottimizza le immagini rimanenti, rendendole flessibili con il ridimensionamento adattivo e archiviale utilizzando il formato appropriato. Ricorda, è improbabile che tu abbia bisogno della funzionalità "ingrandisci immagine" su un cellulare, poiché l'immagine sarà probabilmente comunque a schermo intero. Se è necessario includere gallerie di immagini, optare per la navigazione a scorrimento lungo o utilizzare lo scorrimento orizzontale per spostarsi tra di esse.

5. Pensa alla tipografia

La tipografia scelta richiede un'attenta considerazione poiché molti caratteri tipografici che funzionano su uno schermo medio o grande diventano troppo difficili da leggere correttamente se ridotti per dimensioni dello schermo più piccole, quindi testa sempre accuratamente su schermi diversi. Bilancia attentamente le intestazioni – la loro funzione deve essere ovvia, anche se se sono troppo grandi possono apparire eccessivamente dominanti – e assicurati che ci sia un contrasto adeguato tra il colore di sfondo e il carattere.

Man mano che sali tra le diverse dimensioni dello schermo, presta attenzione alla lunghezza della riga del tuo contenuto: se una riga è troppo lunga può essere difficile da leggere. Mantieni la lunghezza delle righe di circa 60-75 caratteri e su schermi più ampi riempi lo spazio con una barra laterale o immagini.

6. Ottimizza per touchscreen

Il web design reattivo non deve solo tenere conto delle diverse dimensioni degli schermi; deve anche essere ottimizzato per diversi metodi di input. E i touchscreen possono essere complicati, quindi è meglio essere generosi con le dimensioni dei pulsanti e i collegamenti, mirando a un'area cliccabile di circa 44 punti quadrati. Devi anche ottimizzare la tua esperienza utente per i touchscreen. Sì, sono intuitivi per loro stessa natura, ma i sottili aiuti alla navigazione, come i gesti di scorrimento, sono un'aggiunta preziosa.

7. Prova su dispositivi reali

Infine, mentre la pianificazione del tuo progetto è un passaggio cruciale, non fare affidamento solo sulla teoria. Esistono emulatori mobili che ti aiuteranno a controllare i tuoi progetti e i punti di interruzione CSS, ma niente è meglio di testare sulla cosa reale: molti di questi emulatori replicano solo le varie dimensioni dello schermo ma non la funzionalità di diversi sistemi operativi. Assicurati di avere una varietà di schermi di dimensioni diverse con cui giocare e un numero di utenti diversi e testa i tuoi progetti a fondo. Questo spesso farà emergere un nuovo punto di vista e confermerà che sei sulla strada giusta o ti mostrerà dove è possibile apportare miglioramenti.

Il web design reattivo è in continua evoluzione e crescita e qui abbiamo solo scalfito la superficie. Anche le migliori pratiche per questo campo cambiano frequentemente, quindi è utile tenersi al passo con gli ultimi sviluppi. Ricorda, molti utenti hanno una larghezza di banda debole, una bassa risoluzione e una potenza di elaborazione ridotta sui loro dispositivi, quindi il tuo sito dovrebbe essere semplice, ben organizzato, pulito, facile da usare e avere un bell'aspetto su una varietà di schermi diversi.