Responsive web design: progettare un sito reattivo
Oggi parliamo di design reattivo, e di come progettare un sito web che possa essere visualizzato al meglio sul maggior numero di dispositivi. Infatti, Mobile First e Responsive Web Design sono ormai due concetti fondamentali per realizzare siti web moderni ed efficaci.
Cos’è il Responsive Web Design
Responsive Web Design è un termine coniato da Ethan Marcotte, in un famoso articolo di A List Apart. Questo approccio ci permette di adattare il layout del sito a seconda del dispositivo in uso. Per ottenere ciò, si utilizzano varie tecniche; le principali sono media query, immagini flessibili e layout fluidi.
Progettiamo un layout reattivo
Vediamo come applicare queste tecniche ad un esempio concreto. Per prima cosa identifichiamo a che risoluzione dovranno avvenire le transizioni. In generale, i punti di rottura sono:
- sopra i 1280px, per desktop
- fino a 1024px, per desktop, netbook e tablet
- fino a 768px, per netbook, tablet e smartphone
- sotto 480px, per smartphone
Ovviamente, tra una risoluzione di rottura e l’altra il layout sarà fluido, ossia la dimensione del testo si adatterà e le immagini scaleranno proporzionalmente alla larghezza della viewport. Per far capire meglio questo procedimento, ho preparato un layout molto semplice. Vediamo dunque come progettare tenendo conto dei cambi di impaginazione nei vari punti di rottura.
1. Layout per desktop
Per prima cosa vediamo il layout per i monitor grandi:
Come potete vedere ho scelto un layout molto semplice, largo 1200px. L’header accoglie il logo, il menu di navigazione e uno slider; il corpo è un classico due colonne, composto da sole immagini e da una sidebar. A chiudure, un footer a tutta larghezza che contiene il modulo di contatto, le icone dei social network e il logo.
2. Layout per desktop e tablet
Come si vedrà il layout alla risoluzione di 1024px?
Per questo primo punto di rottura, è importante ricordare che stiamo progettando anche per netbook e tablet. Come si vede dall’immagine, non ci sono differenze strutturali perché il layout si adatta ancora bene; le icone dei social network tuttavia spariscono dalla sidebar, in quanto troppo piccole per un’interfaccia touch.
3. Layout per smartphone e tablet
Passiamo a questo punto ai dispositivi mobile:
In questo caso il layout presenta numerosi cambiamenti.
Il più importante è lo spostamento della sidebar, che ora si trova sotto le due colonne prendendo l’intera larghezza. Questo riposizionamento è molto vantaggioso: consente infatti di mantenere tutte le informazioni della pagina; inoltre, le immagini e il testo sono più grandi e quindi il layout è più leggibile e usabile su un dispositivo mobile.
La seconda modifica rilevante è il menu di navigazione, che ora si presenta più compatto, rendendo tutte le voci facilmente accessibili.
L’ultima modifica riguarda l’impaginazione del footer. Anche qui il contenuto si dispone su due colonne; il form di contatto a sinistra è leggermente più grande, mentre il logo, visibilmente ridimensionato, si posiziona sotto le icone dei social network che cosi sono facilmente accessibili.
4. Layout per smartphone
Vediamo ora l’ultimo layout rimasto, cioè quello per gli smartphone.
A questa risoluzione l’impaginazione è ulteriormente linearizzata. Il menu principale è a scomparsa e accessibile al click. Dall’header inoltre è stato eliminato lo slider; questa soluzione ha il duplice vantaggio di rendere più accessibili i contenuti e di alleggerire la pagina.
Il corpo è disposto su un’unica colonna, con immagini più grandi e testi più leggibili. Sotto di esso è ancora presente la sidebar, così come evidenziato nel layout per tablet.
Infine, il footer passa anch’esso ad una colonna e il logo viene nascosto, per privilegiare il form e le informazioni di contatto.
Conclusioni
Bene, così si conclude questo primo articolo sul web design adattivo.
Progettare seguendo questo approccio da un lato complica il lavoro ma, dall’altro, aiuta a realizzare design migliori, perché ci costringe a focalizzare fin da subito l’attenzione sui contenuti essenziali del sito e su come presentarli nel modo ottimale.
Nei prossimi articoli entreremo più nel tecnico, e vedremo come realizzare questi layout con le moderne tecniche HTML, CSS e Javascript.