Come costruire un Sito Web Responsive

By Andrea Marchetti
Set 2012

Come costruire un Sito Web Responsive

Oggi andremo a vedere come costruire un sito web responsive, ovvero ottimizzato per smartphone, tablet e grandi monitor. Per chi non conoscesse il responsive web design, ė una tecnologia che permette di creare siti che cambiano la loro forma “reattivamente” in base alla grandezza dello schermo del device con il quale vengono visualizzati. Il nostro sito si adatterà quattro volte ottimizzandosi per tablet smartphone  egrandi schermi:

Il cuore del responsive web design sono le media queries, queste non sono altro che un sistema per eseguire porzioni di codice css quando lo schermo è minore di un determinato numero di pixel, adattando la struttura del sito alla larghezza del device con il quale viene visualizzato.

Ma prima di andare a vedere nel dettaglio le media queries dobbiamo costruire una struttura di default che si presti ad essere modificata in maniera semplice con poche regole css eseguite dalle nostre media queries.
La struttura del nostro sito sarà una classica blog/magazine con menu nella testata e sidebar a destra, arricchita da uno slider di immagini logicamente Responsive.

Layout di default:


#wrapper {width: 960px;margin: 0 auto;background:#fff;}
#header {width: 920px;float:left;padding: 20px 20px 20px 20px; background:#21aabd;}
#mainmenu {width: 100%;float:left;background: #888}
#main {width: 920px;float:left;padding: 20px 20px 20px 20px;}
#content {width: 620px;float:left;}
#sidebar {width: 270px;float:right;}
#footer {width: 920px;float:left;padding: 30px 20px 10px 20px;background:#666;}

Una volta fatto questo dobbiamo impostare le media queries, il nostro sito si adatterá 4 volte. Partendo dalla struttura di default se lo schermo ha una larghezza sotto i 980px (per esempio un iPad) diminuiremo la larghezza di sidebar e contenuto con la media queries che segue.

Layout  per Tablet:

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

/* Structure 768 to 980 */
#wrapper {width: 748px;margin: 0 auto;}
#header {width: 708px;float:left;padding: 20px 20px 20px 20px;}
#mainmenu {width: 100%;float:left;}
#main {width: 708px;float:left;padding: 20px 20px 20px 20px;}
#content {width: 470px;float:left;}
#sidebar {width: 210px;float:right;}
#footer {width: 708px;float:left;padding: 30px 20px 10px 20px;}
#mainmenu {display:block;}

}

Quando la larghezza del nostro device scendo sotto i 767 pixel (per esempio un iPhone) andremo a “linearizzare” i contenuti, la sidebar andra posta sotto il contenuto principale, il menu verra nascosto e mostrato tramite il tasto che appare in alto a destra.

layout per Smartphone:


@media (max-width: 767px) {

/* Structure < 767 */
body{padding:10px;background:#fff;}
#wrapper {width:100%;margin: 0 auto;}
#header {width:100%;padding: 20px 0 20px 0px;}
#mainmenu {width:100%;float:left;}
#main {width:100%;float:left;padding: 20px 0 0 0;}
#content {width:100%;float:left;}
#sidebar {width:100%;float:right;padding: 20px 0 0 0px;}
#footer {width:100%;float:left;padding: 20px 0 0 0px;}

/* Header */
.search{display:none;}
.btn-responsive-menu{display:block;}
#mainmenu {display:none;}
#mainmenu ul li {float: none;}

/* Sidebar */
.widget{width:48%;float:left;}
.widget:first-child{margin-right:4%;!important}

#site-title a {font-size:25px;margin-left:10px;}
#footer p {margin-left:10px;}

}

Questa struttura è fluida quindi ha una larghezza che non è fissa ma cambia da larghezze che vanno da 767px a 320px. Da notare, i widget della sidebar che vengono posti su due colonne e il menu che viene nascosto.

Una volta impostate queste andiamo a impostare la media queries per i grandi schermi con larghezza superiore a 1200 pixel.

Layout per grandi schermi:

@media (min-width: 1200px) {

/* Structure > 1200px */
#wrapper {width: 1170px;margin: 0 auto;}
#header {width: 1130px;float:left;padding: 20px 20px 20px 20px;}
#mainmenu {width: 100%;float:left;}
#main {width: 1130px;float:left;padding: 20px 20px 20px 20px;}
#content {width: 670px;float:left;}
#sidebar {width: 420px;float:right;}
#footer {width: 1130px;float:left;padding: 30px 20px 10px 20px;}
#mainmenu {display:block;}

}

Impostiamo le Immagini Responsive

Rendiamo ora Responsive l’immagine del post:


.index-thumb {width:100%;height:auto;margin-bottom:10px;}

Impostiamo lo Slider Responsive


Impostiamo lo slider Responsive Flexslider. Inseriamo nell’header i file necessari, jquery, flexslider.css e flexslider.js. Di seguito inizializziamo lo slider.


<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){

//Inzializzo Slider
$(window).load(function(){
$(‘.flexslider’).flexslider({
animation: "slide",
start: function(slider){
$(‘body’).removeClass(‘loading’);
}
});
});

// ]]></script>

Successivamente inseriamo l’Html necessario per visualizzare lo slider nella sidebar. Le immagini hanno link, caption e si ridimensionano al cambio di larghezza dello schermo.

</pre>
<div class="flexslider">
<ul class="slides">
<li><a href="#">
<img src="img/times-square.jpg" alt="" />
</a>
<div class="flex-caption">titolo della caption</div>
<a href="#">
</a></li>
<li><a href="#">
<img src="img/times-square.jpg" alt="" />
</a>
<div class="flex-caption">titolo della caption</div>
<a href="#">
</a></li>
</ul>
</div>
<pre>

Cosi facendo abbiamo un sito che si adatta sfruttando le potenzialità, sia dei grandi, che dei piccoli schermi, riadattando la propia struttura con poche istruzioni css eseguite dalle media queries.

La struttura completa è disponibile qui sotto per il Download.. Stay tuned!

, ,

39 Commenti

  1. Ivan ha detto:

    Articolo molto interessante! Complimenti!

    Sarebbe utile anche un articolo sui menu dropdown responsive.

  2. mero ha detto:

    come mai a 768×1024 il menu scompare?

    • Andrea Marchetti ha detto:

      Ciao Mero,
      il menu scompare sotto 767px di larghezza per essere visualizzato (ottimizzato per mobile) tramite il pulsante in alto a destra.

  3. mero ha detto:

    e sisi, ma da 768a 784, il menu scompare lasciando il cerca in alto a dx.

    Su flexslider non è possibile inserire un testo sopra? che cambia ad ogni foto?

    • Andrea Marchetti ha detto:

      Bisogna aggiustare di una decina di px la media queries per ottenere il passaggio perfetto, per le caption con flex slider guarda qua:

      http://www.woothemes.com/flexslider/

      a meta pagina c’è la voce Adding captions..

      • Dario ha detto:

        Non riesco a capire quale media queries e come va modificata per non avere l’effetto che ad un certo punto scompare il menù sotto senza che compaia il menù “mobile”.

        Grazie mille e veramente complementi per il lavoro fatto

  4. Mauro ha detto:

    Bellissimo lavoro complimenti. Però ho due dubbi:
    1) come faccio a sostituire negli una pagina esterna?
    Cioè io vorrei che cliccando sulla foto mi aprisse altre pagine del sito e non la stessa.
    Se metto
    http://www.xxx.com\… al posto del # mi da in risposta http://www.xxx.com\cartella del flexslider\index.htmlwww.xxx.com\… cioè mi concatena le due stringhe
    2) come faccio ad aumentare lo spazio tra le scritte sotto le immagini e i “puntini” di scroll?
    Grazie mille e buona giornata

  5. Mauro ha detto:

    scusami ma mi modifica i commenti:
    forse mi sono spiegato male: io vorrei che cliccando sulle foto che girano (slider) si possa aprire una pagina diversa per ogni foto. Quello che non trovo è dove venga passato il link della pagina stessa nel tag “a href ” nel pezzo di codice dove viene richiamato lo slider

  6. Mauro ha detto:

    nella tua parte di codice :
    3 ul class=”slides”
    4 li><a href="#"
    5 img src="img/times-square.jpg" alt="" /
    6 /a
    come faccio a sostituire il # con un indirizzo che voglio io? mettendo href="www.xxx.com come si fa di solito mi esce
    http://www.yyy.com\index.htmlwww.xxx.com

  7. D.O. ha detto:

    Grazie davvero questo articolo mi ha schiarito un po’ le idee sull’argomento: si vede che sei un WebDesigner di qualità!

  8. Github ha detto:

    Grazie per l’articolo, sei stato molto utile. 🙂

  9. Vincenzo ha detto:

    Salve e complimenti per la guida. Scrivo solo per un’informazione, sono un pò profano in materia e mi chiedevo dove dico al sistema di inserire i pulsanti del menu all’interno del bottone in alto a destra che compare a px ridotti? Poi se creo un template per joomla, tutto questo discorso è lo stesso?
    Grazie in anticipo attendo notizie in merito

  10. Christian ha detto:

    Articolo molto interessante, però mi preme evidenziare che il meta tag

    non è standard e non supera la validazione HTML5

  11. […] Come costruire un Sito Web Responsive […]

  12. Marco ha detto:

    Non riesco a visualizzare i pallini da Mobile, per favore mi aiuti?
    Grazie!!

    • Andrea Marchetti ha detto:

      Ciao Marco,
      intendi i pallini degli slider? ho testato la struttura con ios e android e li vedo, che browser utilizzi?

  13. Paolo ha detto:

    Interesante. Complimenti.
    E’ possibile aprire il ns. Sito in questo formato per smartphone o iphone?
    Grazie

    • Andrea Marchetti ha detto:

      Ciao Paolo,
      intendi utilizzare il codice dell’articolo per iltuo sito?
      certo che si 😉

      • Paolo ha detto:

        Ciao Andrea
        Scusa la mia ignoranza. Sono un autodidatta. Ho 62 anni ma sono affascinato di tutte le novita’..
        Si mi piacerebbe creare o permettere ai miei clienti di vedere il ns. Sito… che ho creato con un piccolo aiuto…
        Ma non so come fare…

  14. marco ha detto:

    Ciao andrea complimenti per il lavoro stupendo.
    Mi chiedevo come si fa ad ottenere il sito in fullscreen responsive.
    Grazie mille in anticipo

  15. francesco ha detto:

    Salve signor Marchetti, ho seguito molti dei suoi tutorial, spiegati in maniera perfetta, semplice e chiara. So che sarà una cosa complcata ma ci provo lo stesso, dopo aver grazie al suo aiuto “creato” dei siti, vorrei poterli mettere on line, sul mio worpress, come faccio a creare un index php partendo dall’index html?…..mi spiego meglio non conoscendo php ce un modo per”tradure il mio html”?grazie e complimentu

  16. Federico ha detto:

    Ciao articolo molto interessante,

    avevo una domanda, tu quindi inizi a disegnare un layout per la versione ipad landscape, solo dopo crei una versione desktop del sito, giusto?

    Grazie

  17. Susanna ha detto:

    Salve, ho usato la tua struttura per creare un sito web ma mi dà problemi con Internet Explorer 7-8-9-10 e con alcuni browser dei tablet tipo Mediacom. Come posso risolvere il problema?

    • afmarchetti ha detto:

      Ciao Susanna, ti consgilio di testare bene la struttura e utilizzare firebug per inspezionare le parti del sito che ti danno problemi. Test, test, test 🙂

  18. roberto ha detto:

    buongiorno,
    ho visto questa guida che mi è stata molto utile, chiedevo se il file di esempio è liberamente usabile (codice e script, slide ecc)
    saluti roberto

  19. nicola ha detto:

    ciao a tutti, io sto studiando web design da poco… la mia domanda è elementare! per creare un sito web responsive, bisogna scrivere i codici sopraelencati nel foglio di stile, scrivendoli uno dopo l ‘ altro? cioè prima gli stili del layout di defoult, poi sotto gli stili del layout per il tablet e così gli altri layout?

  20. paolo ha detto:

    ciao,

    una domanda. Ci sono alcuni template a pagamento che hanno alcuni effetti particolari, come un immagine di sfondo che scorre con la sidebar a velocità differente rispetto ad altri elementi, come se ci fossero layer sovrapposti.

    Quale tecnica viene usata ?

    Grazie mille

  21. Dario ha detto:

    Se si volesse inserire nella head il logo del sito come immagine come dovrebbe variare il codice per avere lo stesso effetto responsive?

    Grazie mille

  22. Giovanna ha detto:

    Ciao Andrea, ho eseguito il tuo tutorial creando un sito da me, tutto ok peró quando vado a visualizzare il sito sul mio smartphone galaxy S4 mini succede che non si vede la struttura del layout smartphone max-whidt 767 ma si vede la struttura uguale al tablet. Perché mi succede questo? Da cosa dipende?

    Grazie

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Share