Creare un sito responsive

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Il responsive design (alla lettera design reattivo, che da' una risposta), per definizione, è una tecnica di Webdesign che consente di creare il template di un sito in modo che si adatti automaticamente al tipo di dispositivo che sta visitando le pagine del sito in questione, ovvero un PC, un tablet, uno smartphone, piuttosto che altri tipi di device.

Si tratta di una tecnica avanzata di design dei siti Web che non intende soppiantare la creazione di un m-site fisico (mobile site, ovvero "sito ottimizzato per dispositivi mobili" - ovvero il famoso sito "m.miosito.it"), bensì offrire una diversa soluzione, apparentemente meno pratica al primo approccio, ma ottimale per la creazione di siti Web professionali che soddisfino le esigenze del mercato: essere cross-device, vista la crescita esponenziale del traffico che arriva da dispositivi mobili.

La caratteristica principale di questi dispositivi è la risoluzione dello schermo: uno smartphone avrà un display che sarà verosimilmente largo tra i 300 ed i 400 pixel, un tablet dai 600 ai 750 pixel, quindi un PC dai 750 in su. Ma, a prescindere da questi valori da considerare puramente indicativi, il concetto che ci interessa è che il responsive design si basa su questo aspetto come parametro per effettuare tutte le operazioni che deve compiere al fine di soddisfare la suddetta esigenza.

Andiamo quindi a spiegare in modo approfondito questo argomento, partendo dalla premessa che, per semplicità didattica, nell'esempio pratico di questo articolo ci baseremo su tre risoluzioni-tipo: una per smartphone, una per tablet ed una per desktop.

Come detto in precedenza, per creare un sito responsive ci baseremo sulla risoluzione del display del dispositivo che sta visualizzando una pagina e lo faremo attraverso i CSS3 che mettono a disposizione le media query, ovvero una tecnica di definizione di regole basate su una condizione. Partiamo proprio da questo argomento introducendo la struttura di base del foglio di stile del nostro esempio:

@media screen and (min-width: 320px)
{
    /* Stili per la versione smartphone */
}
@media screen and (min-width: 720px)
{
    /* Stili per la versione tablet */
}
@media screen and (min-width: 1000px)
{
    /* Stili per la versione desktop */
}

Il funzionamento è semplice: utilizziamo il comando @media che effettua una richiesta allo screen (quindi allo schermo) e verifica la risolizione minima su cui basare la condizione, usando il comando min-width. Ciascuno decida in autonomia, a seconda delle proprie esigenze, quali e quante risoluzioni specificare.

Accademicamente parlando, per creare un sito responsive si parte dal design della versione più piccola, impostando modalità di visualizzazione differenti man mano che la risoluzione aumenta. Per comprendere meglio questo concetto, guardiamo una serie di illustrazioni che ci aiuteranno a comprendere meglio la questione in oggetto, partendo dalla simulazione di un dispositivo mobile di tipo smartphone:

Si tratta di una finestra del browser ridimensionata a grandezza cellulare (più o meno) in cui possiamo notare il logo, un simbolo in alto a destra per comune interpretazione viene inteso come "questo è il menu, clicca per aprirlo", quindi il contenuto della pagina. Di sotto vediamo un banner e sotto ancora (cosa che non vediamo) c'è il footer. Nella seguente illustrazione, invece, vediamo semplicemente il menu aperto a risoluzione smartphone:

Allargando la finestra, fino a simulare la dimensione di un tablet, vedremo il template iniziare a somigliare ad un classico layout a due colonne, con una porzione principale e la sidebar sulla destra:

Notiamo che, anche in versione tablet, il menu non viene visualizzato per un semplice motivo: nel nostro esempio abbiamo dieci link la cui caption è sempre "LINK", quindi sole quattro lettere. Immaginiamo però che gli stessi dieci link siano composti da caption tipo "Homepage", "Chi siamo", "I nostri prodotti" ... "Contatti" e così via, quindi parole più lunghe: c'è il rischio che anche a risoluzione tablet il menu sfori e, da qui, la scelta di visualizzarlo in modalità smartphone anche per questo tipo di dispositivo. Scelta che, quindi, non è una regola, bensì una valutazione da fare caso per caso.

Mettendo a tutto schermo la finestra del browser, il template sarà visualizzato a in versione desktop che, fondamentalmente, differisce dalla versione tablet solo per la visualizzazione del menu di navigazione:

Passiamo dalla demo illustrata ad una demo vera e propria: testiamo dunque l'esempio di responsive design che stiamo approfondendo cliccando sul link appena proposto.

Per gustare l'effetto, ridimensionate la finestra del browser fino a simulare la grandezza di un tablet, quindi quella di uno smartphone. Sarà possibile notare che l'aspetto del sito resta sempre lo stesso, ma si adatta in maniera ottimale sia a schermo pieno (quindi in versione desktop) che a grandezza tablet. A risoluzione smartphone, invece, il sito cambia nel senso che la sidebar non sarà più visualizzata di lato, ma al di sotto del contenuto della pagina.

Passiamo alla pratica, iniziando dal codice HTML completo della pagina Web:

<!DOCTYPE html>
<html lang="it">
<head>
    <title>Demo per la creazione di un sito responsive by lukeonweb.net</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="stylesheet" type="text/css" href="responsive.css"/>
    <script type="text/javascript" src="script.js"></script>
</head>
<body id="pagina">

<div id="layout">
    <div id="header">
        <img src="logo.png" class="logo" alt=""/>
        <img src="menu.png" class="menu" onclick="menu()" alt=""/>
    </div>
    <div id="menu">
        <ul>
            <li><a href="#">LINK</a></li>
            <li><a href="#">LINK</a></li>
            <li><a href="#">LINK</a></li>
            <li><a href="#">LINK</a></li>
            <li><a href="#">LINK</a></li>
            <li><a href="#">LINK</a></li>
            <li><a href="#">LINK</a></li>
            <li><a href="#">LINK</a></li>
            <li><a href="#">LINK</a></li>
            <li><a href="#">LINK</a></li>
        </ul>
    </div>
    <div class="stop"></div>
    <div id="content">
        <h1>La mia prima pagina responsiva</h1>
        <p>Contenuto di esempio della pagina, bla bla bla bla bla...</p>
        <p>Contenuto di esempio della pagina, bla bla bla bla bla...</p>
        <p>Contenuto di esempio della pagina, bla bla bla bla bla...</p>
    </div>
    <div id="sidebar">
        <a href="https://www.mrwcorsi.it/" rel="nofollow"><img src="mrwcorsi.gif" alt=""/></a>
    </div>
    <div class="stop"></div>
    <div id="footer">&copy; lukeonweb.net</div>
</div>

</body>
</html>

Stiamo lavorando in HTML5. Nell'header della pagina richiamiamo due fogli di stile ed un file Javascript:

  • style.css - Imposta tutti gli stili di base della pagina, compresi quelli degli elementi suscettibili a variazioni a seconda della risoluzione dello schermo.
  • responsive.css - Gestisce tutti gli aspetti peculiari degli elementi che subiranno variazioni a seconda della risoluzione dello schermo.
  • script.js - Contiene lo script che consente di gestire il menu del sito in versione tablet e smartphone.

Per il resto, la pagina è un semplice layout table-less a due colonne in cui troviamo un header (che contiene il logo e l'icona che rappresenta l'apertura del menu in versioni non desktop), il menu di navigazione, una porziona di conteenuto, una sidebar (in cui al momento abbiamo messo semplicemente un banner pubblicitario) ed un footer.

Passiamo quindi ai tre suddetti file inclusi nell'intestazione della pagina, iniziando dal file Javascript che contiene il seguente codice:

var m = 0;
function menu() {
    if (m == 0) {
        document.getElementById("menu").style.display = "block";
        m = 1;
    } else {
        document.getElementById("menu").style.display = "none";
        m = 0;
    }
}

Per default impostiamo a "zero" il valore di una variabile che ci serve per controllare se il menu è aperto o è chiuso. Controlliamo quindi il suo stato e, se è chiuso lo apriamo cambiando il valore alla variabile; se è aperto, lo chiudiamo cambiando nuovamente il valore alla variabile di controllo. Noteremo quindi che il menu si aprirà e si chiuderà cliccando sempre sulla stessa icona.

Passiamo ai fogli di stile, iniziando dal file style.css, il cui codice è il seguente:

html, body, div, h1, p, img, #menu ul, #menu li { margin: 0; padding: 0; border: 0; }
body { background: #EEE; }
div { color: #333; font: normal 13px tahoma; }
h1 { color: #AAA; font: bold italic 25px georgia; margin: 0 0 10px 0; }
p { text-align: justify; margin: 0 0 10px 0; line-height: 20px; }
a { color: #0000DD; text-decoration: none; }
a:hover { color: #DD0000; }

#layout { background: #FFF; margin: 0 auto; }

#header { position: relative; background: #1B9D9D; height: 50px; }
.logo, .menu { position: absolute; top: 10px; }
.logo { left: 10px; }

#menu { display: none; }
#menu, #menu ul { background: #333; }
#menu ul { list-style-type: none; }
#menu li { border-top: solid 1px #FFF; }
#menu li a { display: block; color: #FFF; padding: 10px; }
#menu li a:hover { background: #555; }
.menu { display: block; right: 10px; cursor: pointer; }

#content, #sidebar { float: left; }
#content { padding: 10px; }
#sidebar { padding: 10px; width: 300px; }

#footer { background: #333; color: #FFF; padding: 10px; }

.stop { clear: left; width: 0; height: 0; }

Per semplicità di lettura ho diviso il codice in vari blocchi. Nel primo stilizziamo tutti gli elementi di base, quindi passiamo a ID e classi. Nel secondo assegno un colore di sfondo al contenitore principale del layout e lo centro rispetto alla risoluzione, senza però assegnargli delle dimensioni, poichè è il primo degli aspetti che gestiremo con la tecnica responsiva nell'altro file CSS esterno.

Stilizziamo quindi l'header della pagina impostando delle dimensioni in altezza, un colore di sfondo e posizionando in modo dinamico il logo ed il menu, nascondendo quest'ultimo che, come vedremo, verrà visualizzato solo nelle versioni non desktop. Posizioniamo quindi in modo table-less il contenuto e la barra laterale, quindi stilizziamo il footer.

Passiamo al file responsive.css che riprende le condizioni illustrate in partenza spiegando cosa sono le media query. Approfondiamo il discorso vedendo come impostare le stilizzazioni nei tre casi di dispositivo-tipo. Segue il codice completo:

@media screen and (min-width: 320px)
{
    #layout { width: 320px; }
    #content { width: 300px; border-bottom: solid 1px #DDD; }
}
@media screen and (min-width: 720px)
{
    #layout { width: 720px; }
    #content { width: 380px; padding-right: 0; border: 0; }
}
@media screen and (min-width: 1000px)
{
    #layout { width: 1000px; }
    #menu { display: block; }
    #menu ul { height: 40px; line-height: 40px; }
    #menu li { float: left; padding: 0; border-top: 0; border-right: solid 1px #555; }
    #menu li a { padding: 0 20px; }
    .menu { display: none; }
    #content { width: 670px; padding-right: 0; border: 0; }
}

Notiamo che le operazioni che compiamo nelle prime due condizioni (ovevro risoluzioni ottimali per smartphone prima e tablet poi) sono molto più snelle di quelle che compiamo nella terza condizione, quella desktop: il motivo è quello che abbiamo spiegato in precedenza, ovvero che quando si disegna un sito con la tecnica responsiva si parte dalla versione più piccola fino ad arrivare alla versione più grande, in termini di risoluzione del display.

Quello che andiamo a fare, in sostanza, è assegnare le stilizzazioni "mancanti" non definite nel foglio di stile primario del sito, impostandole in modo differente a seconda delle esigenze di risoluzione. In particolare andiamo a gestire una diversa dimensione del contenitore del layout, quindi a gestire la dimensione della porzione di gestione dei contenuti.

La maggior parte delle operazioni che andiamo a compiere sono sul menu di navigazione e, naturalmente, lo facciamo solo in versione desktop, poichè per default il menu nasce per esere visualizzato a tendina. Gestiamo quindi la disposizione dei link in orizzontale piuttosto che in verticale, annulliamo una serie di stilizzazioni peculiari della visualizzazione a tendina e, soprattutto, lo rendiamo visibile per default.

Sebbene approfondito ed illustrato in modo completo ed esaustivo, il presente è solo uno dei tantissimi esempi di creazione di un template ma, come ben sappiamo, di impostazioni ne esistono centinaia, o addirittura migliaia. Tuttavia, le nozioni apprese in questo articolo sono sufficienti a comprendere il concetto da applicare a tutte le tipologie di sito che si intende disegnare con layout responsive nativo, "fatto in casa", senza basarsi su librerie esterne.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (49.892)

:: Referenze dei fogli di stile Css (41.899)

:: Menu ad effetto mouseover con i Css (39.293)

:: Effetti sui link con i Css (30.281)

:: Testo verticale coi Css (20.096)

:: Angoli smussati in un box coi Css (18.978)

:: Box con effetto ombra con i CSS3 (16.386)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.290)

:: Stilizzare i form Html con i Css (16.102)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.891)

IN EVIDENZA
DOWNLOAD