Quando si realizza un sito web, una delle operazioni più difficili da portare a termine è la scelta dei contenuti: dove mettere le immagini? Quanto testo scrivere? E così via. Dopo aver scelto i contenuti, occorre posizionarli, altra faccenda molto complicata che occupa buona parte del processo di design iniziale di una qualsiasi pagina web. Nella guida di oggi vogliamo parlavi di layout nell’ambito del design per il web. Vedremo esempi di layout, metodi di creazione dei layout e molto altro ancora.
Prima di iniziare: vi consigliamo vivamente di recuperare le vecchie guide pubblicate qui sul nostro blog, all’interno delle quali vi abbiamo raccontato anche molte nozioni “base” per il web design. La guida di oggi rimane comunque accessibile ai novizi del web design, quindi, buona lettura!
Web design: l’importanza del layout
Il layout è il posizionamento degli oggetti all’interno della pagina web. Solitamente si sviluppano almeno 2 layout differenti per ogni pagina (mobile e web) anche se sarebbe una buona idea pensare a variazioni del design per le dimensioni “intermedie” (schermi desktop piccoli, tablet e così via).
Il layout è importante perché è l’ordine in cui l’utente vede i contenuti: con un buon layout rendiamo il messaggio più interessante, più godibile, più facile da leggere e così via. Ora che sappiamo il perché del layout per web design, passiamo a parlare del come.
I vecchi metodi: float e spazi percentuali
Le tecnologie si evolvono velocemente: fino a qualche anno fa i due metodi più utilizzati erano float e gli spazi percentuali. Prima ancora venivano usati i pixel come misura degli spazi, ma li tralasceremo perché oggi non sono quasi più usati.
I metodi che vi stiamo presentando sono due approcci alla creazione del layout che definiscono gli spazi tra i contenuti. Ad esempio, possiamo creare due colonne larghe il 30% della pagina e impostare una margine tra le due pari al 40% della pagina. Questo significa che avremo due colonne della stessa larghezza, posizionate ai bordi più esterni della pagina.
Griglie nei Layout per web design
Prima ancora della formattazione a percentuali, come abbiamo detto, si utilizzavano i pixel per definire una struttura simile ad una tabella, con colonne e righe. L’evoluzione della soluzione che vi abbiamo appena descritto è la struttura a griglie: viene definita una griglia con delle colonne e delle righe di dimensioni predefinite o automatiche.
La comodità della griglia è evidente quando si vogliono creare delle pagine relativamente complesse con diverse sezioni di contenuto organizzate in modo differente l’una dall’altra.
Flex e flexbox
Le soluzioni flex e flexbox vengono definite “liquide”, perché si adattano in base al contenuto. Il flex e le flexbox vengono utilizzate per realizzare velocemente delle soluzioni responsive. I calcoli necessari delle flexbox vengono eseguiti automaticamente dal browser e permettono a chi crea il layout di muoversi con sicurezza e libertà, delegando molti dettagli al sistema stesso. Il flex permette di posizionare automaticamente i contenuti sia in colonna che in riga, dandoci così parecchia libertà nella creazione del layout. Ovviamente le soluzioni fluide diventano particolarmente utili quando vengono utilizzate in combinazione con altri metodi.
Non esiste una soluzione migliore!
In questa nostre breve guida vi abbiamo presentato in pochissimo tempo molte informazioni, quindi capiamo bene che possiate essere confusi. I metodi che vi abbiamo presentato oggi sono tutti validi per creare un layout nel web design e nessuno è migliore di un altro. Ovviamente sconsigliamo l’utilizzo delle soluzioni più “vecchie” perché sono meno pratiche per il programmatore.
Ricapitolando…
Quindi, il layout è il posizionamento dei contenuti all’interno di una pagina web. In base a come si posizionano i contenuti, si dirige l’attenzione dell’utente e si rende più facile leggere il messaggio della pagina. Esistono diverse tecniche per creare dei layout all’interno di una pagina web, tra queste le più usate sono: flex e grid. Questi due metodi permettono due approcci diversi all’organizzazione dei contenuti.
Ovviamente il primo step per il web designer sarà quello di realizzare uno schema dei contenuti sotto forma di bozza, quando il cliente sarà soddisfatto della pagina e del layout, si potrà procedere con la codifica e l’utilizzo dei metodi sopra citati.