CSS  »  Articoli  »  Responsive Design 

Il futuro del web sarà molto probabilmente mobile. Secondo stime attendibili degli analisti di mercato già nel 2015 il numero di utenti che accederanno ad internet, attraverso dispositivi mobile, supererà quello degli utenti che vi accedono attraverso pc desktop. Già oggi il successo di dispositivi ad alta tecnologia come smartphone e tablet, unito alla diffusione della banda larga, non possono lasciare indifferenti web designer e sviluppatori.

Allo scopo di rendere fruibili i contenuti web al più alto numero di device, una scelta ovvia ma sicuramente dispendiosa è quella di realizzare due versioni del sito, una "standard" per i normali computer, e una progettata appositamente per i dispositivi mobili, magari utilizzando dei framework Javascript creati appositamente: è il caso di jQuery Mobile e di Sencha Touch.

Grazie al nuovo modulo sulle media queries introdotto con i CSS3, è possibile approcciare allo progettazione in modo non convenzionale: tramite questa tecnica molto elegante, partendo da una medesima struttura HTML, vengono applicati determinati fogli di stile in base al tipo di device, alla sua risoluzione, orientamento, dimensioni del display e varie altre variabili, permettendo di adattare l'interfaccia e il layout delle pagina web. Anche in questo caso sono disponibili diversi framework che rappresentano una buona base di partenza per velocizzare lo sviluppo di una applicazione web basata sulle media queries. I più conosciuti sono :

• Mobile Boilerplate
• 1140 Grid
• 320 and up
• Golden Grid System
• Less Framework 4

Proprio su Less Framework è basato il codice dell'esempio di questo articolo. In realtà ognuna di queste librerie non rappresenta la soluzione perfetta, probabilmente perché alcune funzione potrebbero essere superflue o non adattarsi alle esigenze. Il consiglio è quello di analizzare tutte queste soluzioni, prendendo solo il necessario e adattandolo al vostro modo di lavorare.

Less Framework 4

A differenza degli altri, questo framework è molto leggero e ridotto all'essenziale, come si può intendere dal nome stesso. Fondamentalmente è costituito da un foglio di stile comune contenente delle regole di reset e da un layout di default, della larghezza di 992px, ideale per la visualizzazione nei monitor dei computer standard. Tramite la dichiarazione di 3 diverse media queries sono poi disponibili tre layout aggiuntivi: uno della larghezza di 768px per netbook e tablet, un layout da 480px per smartphone in posizione landscape e uno largo 320px sempre per gli smartphone ma in modalità portrait. I browser meno recenti che non supportano le media queries interpreteranno solo gli stili del layout di default.

/* Default Layout: 992. */
.wrapper {
	width: 896px;
}

/* Tablet Layout: 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {	
.wrapper  {
		width: 712px;	
	}
}

/*	Mobile Layout: 320px   */
@media only screen and (max-width: 767px) {	
.wrapper {
		width: 252px;
	}	
}

/*	Wide Mobile Layout: 480px  */
@media only screen and (min-width: 480px) and (max-width: 767px) {	
.wrapper {
		width: 436px;
	}	
}

In realtà Less Framework 4 lascia allo sviluppatore la massima libertà: per ogni layout infatti viene suggerito nei commenti CSS la dimensione e il numero delle colonne di una ipotetica griglia. Nella pagina di download del framework è possibile anche scegliere tra tre diversi presets tipografici, oltre all'inclusione opzionale di HTML5 Shim per abilitare il supporto ai nuovi tag HTML5 nelle vecchie versioni di Internet Explorer.

La struttura HTML

Il template presentato in questo articolo è indicato per realizzare un piccolo sito, o portfolio personale, in una unica pagina. Il layout è basato su una struttura semplice che fa utilizzo del doctype HTML5 e dei nuovi tag semantici:

• un <header> contente l'intestazione e il menu di navigazione con le ancore.
• alcune <section> che contengono i contenuti (un'immagine panoramica che può lasciare spazio a uno slideshow, del testo descrittivo, una galleria fotografica, un form per l'invio dei messaggi)
• un <footer> con i collegamenti al profilo personale sui diversi social network.

Di seguito uno "scheletro" molto semplificato della struttura HTML utilizzata nell'esempio:

<header>
    <h1>Intestazione</h1>
 	 <nav>
      	<ul>
        	<li><a href="#about">About</a></li>
        	<li><a href="#portfolio">Portfolio</a></li>
        	<li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>
<section id="intro">
	<!-- contenuti -->	
</section> 
<section id="about">
	<!-- contenuti -->	
</section>
<section id="portfolio">
	<!-- contenuti -->	
</section>

<section id="contact">
	<!-- contenuti -->	
</section>
<footer>
	<!-- contenuti -->
</footer>

Figura 1 - struttura HTML, 4 layout per diverse risoluzioni

Approfodimenti sul codice e download

Il codice presentato è ottimizzato per i browser moderni, con il supporto più avanzato alle nuove proprietà CSS3 utilizzate: quindi Safari, Chrome, Firefox 3.6+, Internet Explorer 9, Opera 10.5+, oltre naturalmente ai browser mobile di iPhone, iPad, iPod Touch o smartphone e tablet con sistema operativo Android.

Analizzando in dettaglio il foglio di stile dell'esempio, potrete notare l'utilizzo in numerose regole dei selettori CSS3 (soprattutto pseudo-classi strutturali) in modo da ridurre al minimo il markup aggiuntivo. Per estenderne il supporto ai browser meno recenti (Internet Explorer 6-7-8) è possibile includere un utilissimo script, Selectivzr (richiede un framework javascript o un selector engine), posizionato nel tag <head> nell'apposito commento condizionale. Allo stesso modo, sempre per i vecchi browser Microsoft e per l'ultimo IE Mobile, possiamo abilitare il funzionamento delle media queries utilizzando Respond.js o in alternativa CSS3-Mediaqueries.js.

Visualizzando la demo con una delle ultime versioni di Mozilla Firefox o con un browser Webkit (Safari o Chrome anche in versione mobile) è possibile notare un accattivante effetto rollover sul menu di navigazione, ottenuto impiegando le trasformazioni e transizioni CSS, incluse nei nuovi moduli CSS3 transitions e 2D transform.

Altri articoli

Altre guide

Altre newsletter