realizzazione
siti web a Bologna

dal 2002
10 anni di siti web

realizzazione di siti web responsive

30/05/2014

che cos'è la responsività

In generale parliamo di siti web responsive quando ci troviamo di fronte a pagine il cui template è in grado di adattarsi a diversi tipi di risoluzioni e quindi in un certo senso «risponde» al contesto.

L'entità dell'adattamento dipende in gran parte dal tipo di template e dalle scelte progettuali e contenutistiche fatte dagli autori del sito; in generale, salvo alcuni casi di template che richiedono adattamenti minimi, le variazioni sono abbastanza significative e d'altronde questo è facilmente comprensibile mettendo a confronto un monitor 22" con un piccolo smartphone.

La responsività dei siti web può essere ottenuta con diverse tecniche e noi ci atterremo alle linee guida del W3C.

perché un sito web dovrebbe essere responsive

In un mondo che fa del web una delle sue colonne portanti, un sito web responsive è semplicemente al passo con i tempi. Sono ormai lontani infatti i tempi in cui la fruizione delle pagine web era relegata ai personal computer; oggi (e la tendenza non accenna a diminuire) al web si accede sempre più da dispositivi mobili e nessuno può sapere cosa ci riserva il futuro.

Creare un sito web responsive quindi è indispensabile per non rimanere tagliati fuori in un contesto tecnologico nel quale la competizione diventa sempre più accanita e che fa del cambiamento il proprio ritmo quotidiano.

Salvo i rari casi nei quali il vostro sito web ha un'utenza esclusivamente legata al tradizionale personal computer, dovreste seriamente prendere in considerazione di potenziarlo con caratteristiche responsive o, se pianificate di ristrutturarlo, dovreste includere la responsività nelle specifiche del progetto.

ottenere la responsività con le media query

In questo articolo ci soffermeremo in particolare su una specifica tecnica per ottenere la responsività, le media query dei fogli di stile CSS (la documentazione completa si trova sul sito del W3C); grazie a questa tecnica potremo applicare fogli di stile diversi a seconda della risoluzione disponibile. Iniziamo considerando il seguente codice HTML:

<html>
    <head>
	<link rel="stylesheet" href="phone.css" media="screen" />
	<link rel="stylesheet" href="tablet.css" media="only screen and (min-width: 480px)" />
	<link rel="stylesheet" href="screen.css" media="only screen and (min-width: 1024px)" />
    </head>
    <body>
	<div id="bloccoTest">
	    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>
    </body>
</html>

Osservando la sezione head si può notare che vengono richiamati tre diversi fogli di stile, tuttavia per due di essi viene posta una condizione sulla larghezza minima dello schermo in pixel. Questo significa che non verranno richiamati se tale condizione non viene soddisfatta. Il contenuto dei tre fogli di stile è il seguente:

/* phone.css */
#bloccoTest {
    background-color: #0000ff;
}
/* tablet.css */
#bloccoTest {
    background-color: #00ff00;
}
/* screen.css */
#bloccoTest {
    background-color: #ff0000;
}

Se apriamo la pagina in tre finestre di dimensioni diverse, vedremo in pratica come opera il meccanismo:

i tre CSS responsive a confronto
i tre CSS responsive a confronto

Come ampiamente descritto nella documentazione, le media query possono essere applicate anche all'interno dei CSS stessi per raggiungere un livello di precisione ancora maggiore nell'adattare il template al contesto.

quali risoluzioni e dispositivi considerare

Ora che sappiamo caricare fogli di stile CSS differenti per le varie risoluzioni, dobbiamo chiederci quanti fogli differenti dobbiamo prevedere, e quali risoluzioni conviene considerare. Prima di fare qualsiasi considerazione è opportuno raccogliere statistiche (ad esempio tramite Google Analytics) su quali dispositivi realmente accedono al sito web; se l'utenza mobile per esempio è inferiore all'1% allora è probabilmente superfluo creare un foglio di stile ad hoc per quel tipo di dispositivi.

Il W3C come al solito ci mette a disposizione uno strumento molto valido che può essere usato per farsi un'idea delle tendenze del web in materia di dispositivi e risoluzioni più diffuse; si tratta del report browser display statistics.

conclusioni

In questo breve articolo abbiamo introdotto brevemente la realizzazione di siti web responsive tramite media query. Per approfondimenti si rimanda alla documentazione linkata nel corso del testo e, in generale, al sito W3schools. Buon web responsivo a tutti!