Creare un layout fluido con HTML e CSS3

Giovanni Canella

24/09/2013

9340

Con l'evoluzione del web il layout fluido è sempre più utilizzato, in quanto permette di adattarsi in tutte le risoluzioni dei monitor, permettendo all'utente di essere agevolato nella navigazione; basti pensare quando si naviga con uno smartphone, alla scomodità di doversi sempre spostare a destra per leggere un periodo per poi tornare sinistra quando va accapo. In questo articolo vediamo come crearne uno semplicemente con l'utilizzo di HTML e CSS3, senza l'impiego di alcun framework (vedi Twitter Bootstrap)

Prima di procedere alla realizzazione, vorrei spiegare perchè consiglio caldamente l'adozione di questo layout attraverso i seguenti punti:

  • Migliore esperienza di navigazione (come già accennato prima),
  • Risparmio di tempo nella realizzazione del sito, evitando di realizzare una versione specifica per i cellulari (vedi i classici esempi tipo m.sito.it, es. https://m.facebook.com/),
  • Più professionalità, infatti a mio parere (e anche di altri) un layout responsive è sinonimo di competenze e serietà. 
  • Velocità di caricamento delle pagine, cercando di togliere il superfluo (come immagini, video) che rallentano la navigazione, e lasciare solo l'essenziale: il contenuto.

Detto ciò dobbiamo definire i breakpoint che andremo a utilizzare, ma cosa sono veramente? In pratica sono dei segnaposti che verranno utilizzati soltanto nel momento in cui il browser dell'utente rientra nel range da noi definito. E' questo che c'è alla base del responsive design, così da definire gli stili specifici per quella determinata risoluzione. Io personalmente, come ho visto anche applicato in diversi casi, definirei 3 breakpoint principali:

  1. 320px - 480px: Risoluzione che copre la maggior parte degli smartphone, dove mostreremo soltanto il contenuto del sito, senza "fronzoli" come eventuali sidebar laterali che occuperebbero solo spazio inutilmente, e il menù.
  2. 600px - 768px: Dato che sarà Indirizzata principalmente per tablet mostreremo una sola sidebar e disporremo il menù di fianco al logo, invece che in basso.
  3. 768px -1024px: Destinata a netbook e a tablet con discreta risoluzione. Da questo punto in poi verranno mostrate entrambe le sidebar e inizierà a mostrarsi il layout vero e proprio.
  4. 1024px - VARIABILE: Per display con risoluzione maggiore a 1024px, destinata a notebook e desktop, in cui non ci saranno limiti agli elementi mostrati, grazie al vasto spazio che abbiamo a disposizione.

DEMO

Ora procediamo alla realizzazione di quanto detto prima:

HTML

La struttura della pagina è quella di un normalissimo documento XHTML, dove definiamo:

  • L'header, inserendo il logo e il menù, con 3 voci,
  • 2 sidebar: una sinistra e una destra,
  • 5 articoli,
  • Un footer molto basilare.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Layout responsive CSS3 - Ginho.it</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
	<div id="header">
		<a href="http://ginho.it"><img src="img/ginho.png" id="logo" alt="Ginho!" title="Ginho!"/></a>

		<div id="menu">
			<ul>
				<li><a href="http://ginho.it">Home</a></li>
				<li><a href="http://ginho.it/feed">Feed</a></li>
				<li><a href="http://ginho.it/contattami">Contattami</a></li>
			</ul>
		</div>
	</div>

	<div id="container">
		<div id="left">
			<h2>Sidebar sinistra</h2>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
			et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
			aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
			qui officia deserunt mollit anim id est laborum.
		</div>

		<div id="right">
			<h2>Sidebar destra</h2>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
			et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
			aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
			qui officia deserunt mollit anim id est laborum.
		</div>

		<div id="contenuto">
			<div class="articolo">
				<h1>Titolo</h1>
				<hr>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
				et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
				aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
				qui officia deserunt mollit anim id est laborum.
			</div>
			<div class="articolo">
				<h1>Titolo</h1>
				<hr>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
				et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
				aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
				qui officia deserunt mollit anim id est laborum.
			</div>

			<div class="articolo">
				<h1>Titolo</h1>
				<hr>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
				et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
				aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
				qui officia deserunt mollit anim id est laborum.
			</div>

			<div class="articolo">
				<h1>Titolo</h1>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
				et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
				aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
				qui officia deserunt mollit anim id est laborum.
			</div>
		</div>
	</div>

	<div class="both">&nbsp;</div>

	<div id="footer">
		<hr>
		<h1>Footer</h1>
		<a href="http://ginho.it">Ginho!</a>
	</div>
</body>
</html>

CSS3

Come prima cosa definiamo le proprietà che verranno applicate nelle risoluzioni che non abbiamo definito (vedi il 4° punto della precedente lista: da 1024px in poi), quali lunghezza dei contenitori tramite min-width, per quella minima, e max-wiidth, per quella massima. inoltre impostiamo lo stile del menù.

* {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
}

#header {
	padding: 10px;
	height: 70px;
}

#logo {
	float: left;
	margin-right: 10px;
}

#menu {
	margin: 20px;
}

#menu li {
	text-align: center;
	list-style: none;
	background-color: #000000;
	width: 5%;
	float: left;
	padding: 5px;
}

#menu li a {
	color: #FFFFFF;
	text-decoration: none;
	font-size: 17px;
}

#left, #right {
	padding: 10px;
	margin: 10px 0;
	min-width: 10%;
	max-width: 20%;
}

#left {
	float: left;
}

#right {
	float: right;
}

#contenuto {
	min-width: 30%;
	max-width: 55%;
	text-align: justify;
	padding: 10px;
	margin: 10px auto;
}

.articolo {
	margin-bottom: 20px;
}

#footer {
	margin: 10px;
	padding: 10px;
}

.both {
	clear: both;
}

Ora passiamo alla parte principale dell'articolo: l'utilizzo delle media query introdotte con l'avvento di CSS3. Ecco la struttura generale:

@media only screen and (min-width: RISOLUZIONE_CHE_DESIDERIAMOpx) {
	/*
	* Regole CSS
	*/
}

Un po' diversa dalle solite regole a cui siamo abituati, ma basta prenderci la mano all'inizio e non avremo problemi. Tra le parentesti, è consigliato utilizzare min/max-width dato che, come qualcuno avrà già capito, se utilizziamo width, le regole verranno applicate solo quando la risoluzione del browser combacierà e non negli altri casi. Detto questo passiamo al primo breakpoint:

@media only screen and (min-width: 320px) and (max-width: 480px) {
	html {
		font-size: 90%;
	}

	#header {
		height: 100px;
	}

	#logo {
		float: none;
		display: block;
		margin: 0 auto;
	}
	
	#menu {
		width: 90%;
		margin: 0 auto;
		font-size: 1em;
	}
	
	#menu li {
		width: 30%;
	}

	#left, #right {
		display: none;
	}

	#contenuto {
		max-width: 100%;
	}

	#articolo {
		width: 100%;
	}
}

In questo caso diminuiamo la grandezza dei font, togliamo le due sidebar, estendiamo il contenuto a tutto schermo (width: 100%;) e oltre a centrare il logo, centriamo anche il menù. Ecco il risultato:

Risoluzione 320x480px

Ora passiamo a quello intermedio (480px - 768px).

@media only screen and (min-width: 480px) and (max-width: 768px) {
	html {
		font-size: 90%;
	}
	
	#menu {
		margin: 20px 0;
	}

	#menu li {
		width: 15%;
	}
	
	#right {
		display: none;
	}
	
	#left {
		max-width: 30%;
		clear: both;
	}
	
	#contenuto {
		max-width: 60%;
		float: left;
	}
}

Dove mostriamo solo la sidebar sinistra e spostiamo il menù a destra del logo.

Esempio risoluzione 480px - 768px

Infine quello per risoluzioni comprese da 768px e 1024px, dove non facciamo altro che ingrandire il carattere al massimo (da 90% a 100%) e qualche altro piccolo ritocco non rilevante.

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	#menu li {
		width: 15%;
	}
	
	#right {
		display: none;
	}
	
	#left {
		max-width: 30%;
	}
	
	#contenuto {
		max-width: 60%;
		float: left;
	}
}

Ecco come si presenta:

Esempio risoluzione 768px - 1024px

Conclusioni

Se pensate che ci sia altro... vi sbagliate! Infatti il procedimento è tutto qua, dato che una volta definite le risoluzioni con le media query non c'è molto altro da fare e non c'è bisogno di definire le regole per risoluzioni maggiori di 1024px, infatti l'abbiamo già fatto all'inizio. Naturalmente l'argomento si può approfondire, per esempio trasformando il menù per renderlo a tendina a basse risoluzioni, per ridurre al minimo l'errore di selezione dell'utente con il dito, o implementare del codice Javascript per evitare di caricare le sidebar se contengono molti dati per velocizzare il caricamento della pagina e così via.

In ogni caso ecco una serie di tutorial che possono risultare molto utili, e la demo della pagina creata in questo articolo.

Esempio risoluzione maggiore di 1024px

Ti potrebbero interessare

I più letti