Come realizzare un sito web completamente responsive

La navigazione da mobile è diventata sempre più importante negli ultimi tempi. Ce lo confermano le statistiche di Analytics dove vediamo un progressivo calo delle sessioni da desktop a vantaggio delle navigazioni da tablet e soprattutto da smartphone.

Per questo motivo è fondamentale assicurarsi che il nostro sito si adatti a qualsiasi risoluzione. Tecnicamente si parla di sito responsive. L’anno scorso anche Google ha ribadito questa necessità, lanciando un algoritmo che penalizza tutti quei siti che non sono mobile-friendly nelle SERP da mobile.

Certamente l’utente medio non si pone minimamente il problema in quanto tutti i temi per Wordpress sono ottimizzati da questo punto di vista. Esistono anche molti framework totalmente responsive come Bootstrap e Foundation che semplificano di molto la vita del web designer. Tuttavia credo che sia importante capire come funziona un sito responsive per realizzare all’occorrenza modifiche e personalizzazioni.

In questo articolo vedremo come rendere responsive un sito web con una struttura classica: un corpo centrale, dove sono contenuti i contenuti principali, e una sidebar laterale, dove collocare widgets, banner pubblicitari e tutti gli altri elementi secondari.

Per quanto riguarda la navbar, faremo un articolo a parte dove vedremo come creare un menu a scomparsa sfruttando jQuery.

Struttura del sito

Questo è il nostro sito web di partenza. Come vedete abbiamo utilizzato un layout classico da blog. Nell’header abbiamo allineato sulla stessa riga il logo e il menu di navigazione. Nel corpo centrale troviamo il main content e la sidebar, mentre nel footer abbiamo inserito i crediti e un secondo menu.

Struttura sito responsive visualizzato da desktop

Di seguito il codice HTML

<!DOCTYPE html>
<html>
<head>
 <title>Responsive website</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="container">
 <header>
  <div class="logo">
   <img src="images/logo.png" alt="my website">
  </div>
  <nav class="main-menu">
   <ul>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Page 4</li>
   </ul>
  </nav>
 </header>
 <main>
  <div id="primary" class="content">
  <h1>Article title</h1>
  <p>
   <img class="alignleft medium" src="images/image1.jpg" alt="a simple image" />
   Testo articolo
  </p>
  <div id="secondary" class="sidebar">
   <div class="widget">
    <h2>Widget title</h2>
    <ul>
     <li>Link 1</li>
     <li>Link 2</li>
     <li>Link 3</li>	
    </ul>
   </div><!-- widget -->
  </div><!-- sidebar -->
 </main>
 <footer>
  <div class="credit">
  Sito realizzato da me
  </div>
  <nav class="footer-nav">
   <ul>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
   </ul>
  </nav>
 </footer>	
 </div>
</body>
</html>

E infine il codice CSS

/* LAYOUT */
.container {
  width: 1024px;
  margin: 0 auto;
}

header, main, footer {
  display: block;
  overflow: hidden;
}

header::after, main::after, footer::after {
  clear: both;
}

.content, .sidebar {
  float: left;
}

.content {
  width: 75%;
  margin-right: 5%;
}

.sidebar {
  width: 20%;
}
/* HEADER */
header {
  height: 70px;
}

.logo {
  float: left;
}

.logo img {
  height: 50px;
  width: auto;
  padding: 10px 0;
}
/* MENU */
nav.main-menu, nav.footer-nav {
  float: right;
  margin-right: 15px;
}

nav.main-menu {
  line-height: 70px;
}

nav.main-menu ul, nav.footer-nav ul {
  list-style: none;
  margin: 0;
}

nav.main-menu ul li, nav.footer-nav ul li {
  display: inline-block;
  margin-left: 25px;
}

nav.main-menu ul li:first-child, nav.footer-nav ul li:first-child {
  margin-left: 0;
}
/* FOOTER */
footer {
  line-height: 70px;
}

.credit {
  float: left;
}

Per quanto riguarda il codice HTML dobbiamo spiegare il metatag viewport, utile per risolvere la differenza che sussiste tra l’area di visualizzazione (viewport) e la risoluzione dello schermo. Attraverso questo metatag suggeriamo al browser d’impostare la larghezza della viewport in base alla risoluzione del dispositivo (device-width).

Per quanto riguarda il codice CSS di base, abbiamo definito la larghezza in un contenitore che racchiude tutto il sito, abbiamo impostato la proprietà float per gli elementi da visualizzare sulla stessa riga e gli abbiamo assegnato una larghezza in percentuale.

Utilizzo delle media query

Prima dell’avvento del CSS3 per gestire un sito mobile friendly avevamo bisogno necessariamente di Javascript, attraverso il quale si rilevava la larghezza dello schermo e si caricava dinamicamente il foglio di stile corrispondente. Adesso tutto questo procedimento non serve più perché abbiamo a disposizione le già citate Media Queries.

Una media query esegue un procedimento molto simile ma in maniera molto più pulita. In pratica possiamo definire attraverso dei parametri definiti, regole di stile che valgono solamente per una determinata condizione. Ad esempio possiamo scrivere una media query che vale solamente per dispositivi con una larghezza massima di 768 pixels, mentre per tutte le risoluzioni superiori il codice sarà ignorato dal browser.

@media screen and (max-width: 768px) {
/* REGOLE DI STILE VALIDE SOLO PER SMARTPHONE E TABLET */
.selettore-1{
proprietà: valore;
}

.selettore-2{
proprietà: valore;
}
}
/* REGOLE DI STILE ESTERNE ALLA MEDIA QUERY, VALIDE PER TUTTI I DEVICES */
.selettore-1{
proprietà: valore;
}

.selettore-2{
proprietà: valore;
}

Venendo al nostro esempio, scorrendo il codice CSS ci accorgiamo che il contenitore con classe .container ha una larghezza di 1024 pixel, per cui credo che sia opportuno impostare una media query per le risoluzioni inferiori, in modo che il blocco rientri sempre perfettamente nello schermo.

Spostiamoci alla fine del file (ma la posizione è totalmente indifferente) e scriviamo la seguente media query

@media screen and (max-width: 1024px) {
  .container {
    width: auto;
  }
}

Come possiamo vedere dall’immagine che ho ottenuto attraverso lo strumento screenshot di Firefox, con una larghezza inferiore a 1024 px, il layout è ancora all’interno dell’area di visualizzazione.

Prima media query con risoluzione inferiore alla larghezza del container

Questa media query andrebbe bene anche per i tablet ma proviamo a prendere una maggiore confidenza con questo strumento. Definiamo una nuova media query per le risoluzioni fino a 768 pixel, dove lasceremo i blocchi ancora fluttuanti ma facendo qualche piccolo aggiustamento. È importante sottolineare che le dichiarazioni CSS all’interno di una media query sovrascrivono le proprietà al di fuori della condizione.

@media screen and (max-width: 768px) {
  .container {
    margin: 0 1%;
  }

  .content {
    width: 73%;
    margin-right: 5%;
  }

  .sidebar h2 {
    font-size: 20px;
  }
}

Con questa seconda media query abbiamo sottratto un 2% di larghezza al contenitore principale (dove sono contenuti gli articoli), di modo da poter aumentare i margini dai bordi del layout. Abbiamo anche ridotto il font size utilizzato per il tag H2 nella sidebar in modo che rientri nello spazio a sua disposizione.

media query per tablet

Adesso passiamo alla risoluzione per smartphone, considerando che i device più moderni hanno una larghezza massima di 360 pixel (con qualche rarissima eccezione) direi di fare una media query che prenda tutti gli schermi con una risoluzione massima di 400 pixel.

In questa media query faremo scivolare la sidebar al di sotto del content e daremo una larghezza del 100% per entrambi gli elementi in modo che combacino con i margini del schermo.

media screen and (max-width: 400px) {
  .container {
    margin: 0 auto;
    padding: 0 10px;
  }

  header {
    height: auto;
  }

  .logo {
    float: none;
  }

  .content, .sidebar {
    float: none;
    width: 100%;
    margin-bottom: 20px;
  }

  .content {
    margin-right: 0;
  }

  footer {
  line-height: 35px;
  }

  .credit {
    float: none;
    margin-bottom: 20px;
  }

  nav.main-menu, nav.footer-nav {
    float: none;
    margin-right: 0;
  }
}

Analizziamo questo codice. Abbiamo cambiato i margini del container e impostato un padding di 10px a destra e sinistra. Abbiamo cambiato l’altezza dell’header, impostandola su auto, in modo che si adatti in base agli elementi contenuti. Abbiamo rimosso la proprietà float per tutti gli elementi: logo, menu di navigazione, content e sidebar. Infine abbiamo aggiustato larghezza e margini per tutti gli elementi.

media query per smartphone

Conclusioni

Oggi abbiamo imparato come realizzare un sito web completamente responsive attraverso l’utilizzo delle media queries. Attraverso una media query possiamo definire regole di stile valide solo quando il sito viene visualizzato con un dispositivo che rispetta la condizione impostata nel parametro.

Vi lascio anche il videotutorial sull’argomento che ho realizzato qualche tempo fa.

[responsive_video url=”https://www.youtube.com/watch?v=GRA4qX2qxi4″]Guarda il videotutorial[/responsive_video]

Potete osservare il risultato finale in questa demo. Per cambiare la risoluzione dello schermo, se utilizzate Firefox, bisogna usare questa combinazione di tasti: Ctrl + Shift + m

Con Chrome invece, bisogna prima attivare il DevTools (premendo F12) e poi usare la combinazione di tasti precedente.

Lascia un commento

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