Chi si occupa di Web design e sviluppo software sa che non è sempre immediato trovare il giusto spazio e la giusta gerarchia tra i vari elementi che compongono un layout. Oltre agli aspetti sopracitati, è opportuno rendere il design adattabile ai molteplici device con cui ci interfacciamo.
Sono in molti a realizzare contenuti responsive tenendo conto soltanto della risoluzione del device in cui verrà visualizzato il layout, ma questo non basta.
Per approfondire il tema, cerchiamo di dare una definizione tecnica ed esaustiva di cosa vuole indicare il termine “Responsive”. Il termine è stato coniato da Ethan Marcotte nel 2010: “Responsive è una combinazione di griglie flessibili, immagini scalabili e media queries.”
Ai giorni d’oggi, non basta soltanto adattare un contenuto al suo contenitore ma è prioritario creare contenuti antropocentrici, che pongano l’utente al centro della comunicazione e della navigazione all’interno del web.
Cerchiamo di raccontare una storia, senza perdere il filo del discorso.
Il nostro protagonista è Bob. Bob sta visualizzando in ufficio il sito di un importante fornitore, per finalità lavorative, e quindi, apre la pagina web (da desktop) e assimila una quantità di informazioni utili a uno scopo lavorativo.
Lo stesso Bob, la sera, decide di uscire con Axel, il suo cane, e finché passeggia decide di visualizzare (da mobile) una pagina web per l’acquisto di un depuratore per l’acqua per il suo appartamento.
Nelle situazioni esposte l’utente si trova in 2 mood completamente diversi: in ufficio Bob sarà sicuramente più concentrato, sarà quindi pronto a leggere una quantità di contenuti maggiormente approfonditi, mentre, per quanto riguarda lo scenario numero 2, Bob sarà sicuramente più distratto e più rilassato, e di conseguenza, avrà bisogno di maggiori stimoli visivi e contrasti per riuscire a captare più in fretta sia il flusso delle informazioni che il messaggio che si vuole comunicare.
Se il prodotto che ci aspettiamo di ottenere vuole essere full responsive, dobbiamo tenere in considerazione, oltre al device su cui il layout verrà visualizzato, i vari scenari di utilizzo lato utent (includendo anche il mood).
Un altro aspetto importante da tenere in considerazione, è la differenza di navigazione tra gli utilizzatori Android e gli utilizzatori IOS. Ricapitolando, per la creazione di un layout ad hoc, possiamo tenere conto di:
- device
- relazione tra utente e device
- differenze di utilizzo Android/IOS.
Per passare ad un lato più pratico, analizziamo i vari step per la realizzazione di un layout responsive.
Il layout
Sappiamo che ci sono diversi modi per la realizzazione di un layout, e sappiamo che ognuno di noi organizza il lavoro come meglio crede. A me piace partire definendo la priorità dei requisiti di ciò che andrò a realizzare, in maniera tale da capire quale sarà l’approccio ideale da mantenere.
Il primo quesito da porsi è: Il layout che andrò a realizzare, sarà maggiormente visualizzato da desktop oppure da mobile? Questo ci permetterà di capire da che risoluzione iniziare a ideare il design. Se sto realizzando una dashboard amministrativa in Angular, sarà poco probabile che il layout venga visualizzato da mobile, quindi converrà partire dal design ottimizzato per desktop.
Una volta finito il design desktop la prima cosa da fare sarà incollare le seguenti righe all’interno dei tag <head> e <head/> sulla pagina html (ciò imposterà la visualizzazione su tutti gli schermi con un rapporto di aspetto 1 × 1 e rimuoverà la funzionalità predefinita da iPhone e altri browser per smartphone che rendono i siti Web a vista completa e consentono agli utenti di ingrandire il layout pizzicando) e, in seguito, aggiungere le media query che permetteranno di avere il pieno controllo della visualizzazione degli elementi del layout sui vari dispositivi.
<!—add for full responsive layout—> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>
Media Query
Le media query sono dichiarazioni CSS che ci permettono di identificare il tipo di dispositivo o una sua caratteristica allo scopo di applicare stili o condizioni differenti.
Tipografia
La maniera migliore per gestire la dimensione dei font è di utilizzare le dimensioni in rem. La specifica CSS3 include la possibilità di utilizzare le dimensioni in rem, che funzionano in maniera pressoché identica all’unità em. A differenza dell’unità em, che eredita le dimensioni dell’elemento genitore, il rem si ridimensiona in base alla dimensione esplicitata nell’elemento radice (root) della pagina, vale a dire l’elemento html. Il browser convertirà le dimensioni esplicitate in rem ed em e le trasformerà in valori di px.
Mostrare e nascondere elementi con la proprietà display
Ci saranno molti momenti in cui sarà necessario mostrare o nascondere elementi data una certa risoluzione. La proprietà display specifica se / come viene visualizzato un elemento. É possibile gestire la visibilità dei vari elementi html via CSS:
//Use this to hide and element
.hidden {display:none;}
//Use this to show a hidden element
.visible {display:block;}
Immagini vettoriali
La tua icona ha molti dettagli e alcuni effetti fantasiosi applicati? Se sì, usa una bitmap. In caso contrario, considera l’utilizzo di un’immagine vettoriale che può può adattarsi meglio alle diverse risoluzioni.
