Lo sviluppo e la diffusione di dispositivi di connessione mobile hanno profondamente mutato negli ultimi anni le modalità di progettare e realizzare siti web. Da questo punto di vista la tecnologia offre la possibilità di creare layout responsive, in grado cioè di adattarsi visivamente a qualsiasi tipo di schermo, sia esso quello di un desktop pc o quello di uno smartphone o di un tablet qualsiasi. Il layout, logicamente, non è l’unico aspetto che deve essere considerato quando si parla di responsive web design, ma è senza dubbio uno dei più importanti. Cerchiamo quindi di capire meglio quali sono i principi di fondo che regolano questo tipo di attività.
Layout responsive o adaptive?
Prima di tutto è bene chiarire un paio di concetti: ad oggi non esiste ancora uniformità di interpretazione tra i termini “adattivo” e “responsivo”. Alcuni sostengono che il secondo sia una sottocategoria del primo, ma sinceramente ci pare una semplificazione eccessiva. In verità oggi si è portati a considerare adattivo ciò che è creato secondo le caratteristiche di ogni singolo dispositivo, cosa che può comportare una certa differenza tra le diverse versioni sia a livello di quantità che di qualità dei contenuti visualizzati. Il responsive design invece non tiene conto di queste peculiarità e adatta il layout a qualsiasi tipo di schermo senza differenze a livello di contenuti tra i diversi dispositivi.
7 regole fondamentali per creare layout responsive per siti web
- Un aspetto fondamentale nella creazione di layout responsive è rappresentato dal cosiddetto “flusso”: nel momento in cui lo schermo di restringe tutti gli elementi tendono ad adattarsi “scivolando” verso il basso.
- Il web design responsive utilizza unità di misura relative (ovvero le percentuali) e non assolute per definire le dimensioni degli elementi di design.
- I cosiddetti breakpoint permetto ai layout responsive di adattarsi alla larghezza dello schermo modificando in automatico la disposizione sullo schermo degli elementi grafici.
- È bene impostare dei valori di soglia se non si vuole che un dato oggetto grafico superi determinate dimensioni in larghezza.
- Esistono eccezioni all’utilizzo delle unità di misura relative come quando, ad esempio, si vogliono mantenere le dimensioni originarie di taluni elementi grafici (logo e pulsanti). Questi solitamente sono “racchiusi” all’interno di container a unità di misura assoluta e sono chiamati “oggetti nidificati”.
- Progettare un layout responsive: da dove si comincia, dal dekstop o dal mobile? Ognuno ha il suo approccio…
- Immagini vettoriali o bitmap? Provate a indovinare…
