Più della metà del traffico web è mobile. I siti che non funzionano sui cellulari perdono utenti. Questa guida ti mostra come creare esperienze reattive che si adattano a qualsiasi schermo.
Cos'è il responsive design
Definizione
Design che si adatta a diverse dimensioni dello schermo.
Principio
Una codebase, più dispositivi.
Fluido
Layout che scorrono e si adattano.
Perché reattivo
Traffico mobile
La maggior parte degli accessi sono mobili.
###SEO
Google dà priorità al mobile-first.
Esperienza utente
Esperienza unificata.
Manutenzione
Una versione, non molteplici.
Mobile-First
Avvicinamento
Progetta prima per i dispositivi mobili, espandilo al desktop.
Perché
I dispositivi mobili sono più restrittivi. Priorità forzata.
CSS
Query multimediali di larghezza minima.
Tecniche CSS
Query multimediali
@media (larghezza minima: 768px) { }.
Flexbox
Layout flessibile, una dimensione.
Griglia CSS
Disposizione in due dimensioni.
Tipografia fluida
clamp() per i caratteri in scala.
###Query sul contenitore
Basato su contenitore, non su viewport.
##Punti di interruzione
Comune
320px, 480px, 768px, 1024px, 1280px.
Per contenuto
Definisci dove il layout si interrompe in modo naturale.
Non per dispositivo
I dispositivi cambiano, i punti di interruzione del contenuto durano per ultimi.
Layout reattivo
Griglie fluide
Proporzioni, non pixel fissi.
Flexbox
Cambi di direzione: riga → colonna.
Adattamento automatico della griglia
Colonne che si adeguano.
Impila Mobile
Impila elementi sul cellulare.
Tipografia reattiva
###Tipofluido
dimensione carattere: clamp(1rem, 2vw, 2rem).
Lunghezza della linea
Limita i caratteri per riga.
Gerarchia
Conserva in tutte le taglie.
Immagini reattive
###srcset
Risoluzioni multiple.
taglie
Dimensioni in diverse finestre.
immagine
Immagini diverse per contesto.
Caricamento lento
caricamento="pigro".
Direzione artistica
Ritaglio diverso per dispositivi mobili.
Navigazione
###Desktop
Menu orizzontale, a discesa.
###Mobile
Hamburger, slide-out.
###Attiva/disattiva
JS per aprire/chiudere.
Tocca i bersagli
Minimo 44px.
##Tocco o clic
Tocca i bersagli
Più grande per le dita.
Stati al passaggio del mouse
Non dipendere dal passaggio del mouse.
Gesti
Scorri, pizzica nei contesti appropriati.
Moduli reattivi
Ingressi di grandi dimensioni
Facile da giocare.
Etichette trasparenti
Sempre visibile.
Tipi di tastiera
type="e-mail", type="tel".
Compilazione automatica
Semplifica la compilazione.
Prestazioni mobili
Peso
Meno byte per i dispositivi mobili.
CSS critico
CSS in linea per l'above the fold.
Differimento JS
Non bloccare il rendering.
Immagini
Dimensioni adeguate.
Test
Strumenti di sviluppo del browser
Simulare dispositivi.
Dispositivi reali
Prova su telefoni cellulari reali.
###Stack del browser
Test del cloud.
Orientamenti multipli
Ritratto e paesaggio.
Framework CSS
###Bootstrap
Robusto sistema a griglia.
Vento in coda
Classi di utilità reattive.
Bulma
Basato su Flexbox.
###Personalizzato
Potrebbe essere più leggero.
Errori comuni
Prima il desktop
Più difficile adattarsi verso il basso.
Larghezze fisse
Layout che non si adattano.
Salta i test
Non testare su dispositivi reali.
Testo illeggibile
Caratteri molto piccoli.
Bersagli tattili piccoli
Difficile fare clic.
Strumenti
###Strumenti per sviluppatori Chrome
Modalità dispositivo.
In modo reattivo
Schermi multipli contemporaneamente.
Polipane
Browser per sviluppatori.
Conclusione
Il responsive design è un requisito fondamentale. Adotta il mobile-first, usa i CSS moderni e testa i dispositivi su dispositivi reali. Il risultato sono siti web che funzionano per tutti.
##Domande frequenti
1) Il mobile-first è obbligatorio? Consigliato. Semplifica il processo e dà priorità ai dispositivi mobili.
2) Quanti punti di interruzione utilizzare? 3-5. Basato sul contenuto, non su dispositivi specifici.
3) Flexbox o Grid? Entrambi. Flexbox per una dimensione, Grid per due.
4) Framework o CSS personalizzato? Per i piccoli progetti, la personalizzazione potrebbe essere più leggera.
5) Come eseguire il test senza dispositivi? Strumenti di sviluppo, BrowserStack. Ma testare dispositivi reali è importante.
Leggi anche
- GraphQL per applicazioni: Guida all'implementazione
- Differenza tra sito web e app: guida completa alla scelta
- App Web progressiva: esempi e storie di successo
- Progettazione di interfacce accessibili: conformità WCAG
- Microinterazioni nelle app: Guida completa
- Ottimizzazione delle prestazioni mobili: guida completa