Design responsivo
Definizione breve
Il design responsivo significa che un sito web adatta automaticamente layout, dimensione del testo e navigazione a smartphone, tablet e desktop.
Lo stesso codice di pagina mostra una singola colonna sullo smartphone, due colonne sul tablet e una griglia ampia sul desktop. Lo rendono possibile griglie CSS flessibili e regole legate alla larghezza dello schermo chiamate media query. Immagini, pulsanti e testo si adattano allo schermo, così il visitatore non scorre mai la pagina in orizzontale.
Il design responsivo è ormai lo standard perché la maggior parte dei visitatori arriva da smartphone, e Google classifica i siti soprattutto in base al loro aspetto su mobile.
Viene spesso confuso con il design adattivo. Il design adattivo costruisce un layout fisso distinto per ogni dispositivo, mentre il design responsivo usa un unico layout flessibile che si ridefinisce da sé, il che lo rende più semplice da mantenere.
L'errore più comune è progettare prima il layout per il desktop e poi comprimerlo per il mobile, il che produce aree tattili troppo piccole e menu annidati in modo scomodo. L'approccio corretto è il mobile first: lei progetta prima per lo schermo stretto e aggiunge colonne man mano che la larghezza aumenta, cosicché ogni elemento toccabile resti abbastanza grande e ben distanziato.
Perché conta
Un visitatore che apre il suo sito da smartphone e trova un layout rotto se ne va subito. Il design responsivo evita questa perdita: un solo sito funziona su ogni schermo, senza il costo di costruire e mantenere una versione mobile separata.
Esempio illustrativo
Il catalogo prodotti di un produttore di pavimentazioni mostra una griglia ampia su desktop e una singola colonna su smartphone, stessa pagina, stesso contenuto, nessun layout separato da costruire.
