Tutorial Responsive

Realizzare una struttura Responsive accattivante utilizzando Html5 e Css3

By Andrea Marchetti
@marchetti_design

Sempre più spesso in rete si vedono siti Responsive che si trasformano in maniera accattivante sui vari dispositivi. Grazie a questa tecnologia introdotta con Html5 e i Css3 il confine tra sito e app si assottilia sempre di più.

Oggi vedremo come creare un sito Responsive che utilizzerá fino all’ ultimo pixel del nostro schermo e che ottimizzerà i suoi menu come le app dei nostri Smartphone.

Step 1 – HTML BASE

<div class="container">
		<div class="nav">
			<h1>Logo</h1>
		    <div class="top-nav"> … </div>
		    <nav class="menu menu-left" id="menu-l"> … </nav>	
			<nav class="menu menu-right" id="menu-r"> … </nav>
		</div>
		<div class="container-elements">
			<div class="cop-big"> … </div>
			<div class="el-small"> … </div>	
			<div class="el-small"> … </div>	
			<div class="el-small"> … </div>	
			<div class="el-small"> … </div>	
			<div class="el-medium"> … </div>	
			<div class="el-medium"> … </div>	
			<div class="el-medium"> … </div>	
		</div>
	</div>

Il sito su desktop avrà logo e navigazione a sinistra, copertina al centro e quattro elementi “el-small” sulla destra. Sotto questo blocco saranno posizionati gli altri elementi “el-medium” disposti tre per riga.

La struttura sarà fluida quindi occuperà tutta la larghezza dello schermo su qualsiasi device (anche grandi schermi). Per ottenere questo risultato gli elementi andranno posizionati con allineamento “float:left” e le larghezze saranno valori percentuali.

Step 2 – CSS

body, html{margin: 0; padding:0; height: 100%;width: 100%;}

		.container{width:100%;height:100%}
                        .nav{width: 20%;height:100%;float: left;background: #eee;}

				.top-nav{float:left;background: #eee;z-index: 2000;width: 100%;}
			.container-elements{width:80%;float:left; }
			.cop-big{width: 66.655%;float: left;position: relative;}

			.cop-big img{padding-bottom: 15.05%;}
				.cop-info{width:100%;position: absolute; bottom:0;}
			.el-small{width: 16.664%;float: left;position: relative;}

			.el-small img{background: #eee;padding-bottom: 60.125%;}

				.el-info{width:100%;position: absolute; bottom:0;}	
			.el-medium{width: 33.3333333%;float: left;position: relative;}

			.el-medium img{padding-bottom: 60.125%;background: #c8c8c8;}

				.el-medium .el-info{width:100%;position: absolute; bottom:0;}	
	.elastic{width:100%; height:auto;float:left;}

Per ottenere gli elemnti “el-medium” tre per riga impostiamo la loro larghezza a 33.3333333%.

Giocando con le percentuali possiamo creare molte tipologie di strutture.

Step 3 – IMMAGINI

Inseriamo all’interno di ogni blocco un’ immagine con classe “elastic”. Questa classe rende l’immagine responsive e quindi larga come il blocco nel quale è contenuta.

<div class="cop-big">

	<img src="img.jpg" class="elastic"/>		

</div>

<div class="el-small">

	<img src="img.jpg" class="elastic"/>			
</div>

Step 4 – INFO

Ora guardiamo le altezze degli elementi. Impostando un “padding-bottom” percentuale sulle immagini, possiamo ricavare dello spazio sotto i vari blocchi nel quale possiamo inserire delle informazioni.

Per fare questo inseriamo in ogni elemento un div:

<div class="cop-big">

	<img src="img.jpg" class="elastic"/>

	<div class="cop-info">

		<span class="date">7 giu , 2013 at 21:46</span>

		<h2>Title news</h2>

	</div>			

</div>

<div class="el-small">

	<img src="img.jpg" class="elastic"/>

	<div class="el-info">

		<span class="date">7 giu , 2013 at 21:46</span>

		<h2>Title news</h2>

	</div>

</div>

Posizioniamo il div “el-info” e “cop-info” in basso alla fine del relativo blocco con “position: absolute” e “bottom:0;”.

Ora vediamo le informazioni sotto l’immagine nello spazio che abbiamo ricavato (aumentando il padding si può ricavare altro spazio). Ecco la struttura su desktop:

Ridimensionando la struttura osserviamo come questa si adatta in maniera fluida allo schermo, se però rimpiccioliamo troppo notiamo che i contenuti non sono ben leggibili e per questo dobbiamo rendere la nostra struttura responsive.

Step 5 – RESPONSIVE TABLET

Su tablet i quattro “el-small” che stanno sulla destra vengono disposti su una riga sotto il contenuto principale grazie alla segunete media queries

@media (min-width: 768px) and (max-width: 980px) {

	.cop-big{width: 100%;}

	.el-small{width: 25%;}	
}

Ecco il risultato finale su tablet:

Step 6 – RESPONSIVE SMARTPHONE

Su smartphone i menu vengono nascosti e mostrati da due pulsanti posti nell’header della struttura. I contenuti “el-small” vengono disposti due per riga mentre quelli “el-medium” uno per riga.

@media (max-width: 767px) {

.nav{width: 100%;height:60px;position: relative;}

		.top-nav{height:60px;display:block;position: absolute}
		.nav h1{background: none;width:160px;margin-left: -80px;padding:15px 0 0 0;left:50%;text-align:center;position: absolute;font-size: 22px;line-height: 30px;z-index: 2010;color:#fe4c5c; font-weight:400;}

		.btn-responsive-menu{display:block;}
	.container-elements{width:100%;}
		.cop-big{width: 100%;}

		.cop-big img{padding-bottom: 27.05%;background:#fe4c5c;}
		.el-small{width: 50%;}

		.el-medium{width: 100%;}
	.menu {position: absolute;}
	.menu {width: 240px;top:60px; }
	.menu-left {left: -240px;}
	.menu-right {right: -240px;}
	.active-l{left: 0px;}
	.active-r{right: 0px;}
}

Per animare il menu utilizziamo jquery, una volta incluso alla fine della nostra pagina inseriamo il codice:

<script>

     $("#show-menu-l").click(function () {

          $("#menu-l").toggleClass("active-l");

     });	
     $("#show-menu-r").click(function () {

          $("#menu-r").toggleClass("active-r");

     });
</script>

Ecco il risultato finale su smartphone:

In questo articolo abbiamo visto alcune tecniche che possiamo utilizzare per rendere i nostri siti responsive un pò più “App Style”.

Qui di seguito i link per demo e download.

Stay Tuned!

Responsive

Potrebbero interessarti:

Slider Responsive Full Screen con testi animati utilizzando Flex Slider

Come costruire un Sito Web Responsive

Creare un Parallax Design accattivante e Responsive con Bootstrap

Realizzare un Layout a griglia Responsive con Isotope