Corso di HTML: 7 Siti Responsive e Mobile

7 – Siti Responsive e Mobile

In questo modulo ci concentreremo sul responsive design, ovvero la capacità di un sito web di adattarsi automaticamente a qualsiasi dispositivo, dalle grandi schermate desktop ai piccoli smartphone. Comprendere il responsive design è fondamentale per garantire una buona esperienza utente e un corretto posizionamento sui motori di ricerca (SEO).

Impareremo a usare media queries, breakpoints, layout fluidi e immagini flessibili. Infine, introdurremo Bootstrap, un framework CSS che semplifica enormemente la creazione di siti responsive.

---

Concetto di Responsive Design

Il responsive design permette al sito di essere fruibile su qualsiasi dispositivo senza creare versioni separate per desktop, tablet o smartphone. Gli elementi della pagina, come colonne, immagini, testi e menu, si ridimensionano e si riposizionano automaticamente in base alla larghezza dello schermo.

Un sito responsive è importante perché:

• Migliora l’esperienza dell’utente, che può navigare facilmente anche da smartphone.

• Incrementa la SEO, in quanto Google favorisce siti mobile-friendly.

• Permette di gestire un unico codice, riducendo manutenzione e costi.

Per ottenere un sito veramente responsive occorre combinare:

1. Layout fluidi: le dimensioni degli elementi si adattano proporzionalmente alla larghezza dello schermo.

2. Media queries: applicano stili diversi in base alle dimensioni del dispositivo.

3. Immagini flessibili: che si ridimensionano automaticamente senza deformarsi.

---

Media Queries e Breakpoints

Le media queries sono regole CSS che applicano stili differenti a seconda delle caratteristiche del dispositivo, come la larghezza, l’altezza o l’orientamento dello schermo.

Esempio pratico:

body {
  background-color: lightblue;
}
@media only screen and (max-width: 768px) {
  body {
    background-color: lightgreen;
  }
}

Spiegazione:

• Il body ha uno sfondo azzurro di default.

• La regola @media only screen and (max-width: 768px) indica che se la larghezza dello schermo è ≤768px (tipico di tablet o smartphone), lo sfondo diventa verde chiaro.

• Questo è un esempio di breakpoint, il punto in cui il layout cambia per adattarsi a schermi più piccoli.

È possibile aggiungere più breakpoint per dispositivi diversi:

@media (max-width: 1024px) { /* Tablet */
  /* Stili specifici */
}
@media (max-width: 480px) { /* Smartphone */
  /* Stili specifici */
}

---

Layout Fluidi e Immagini Flessibili

Per rendere un sito veramente responsive, è fondamentale evitare unità fisse come pixel e usare unità relative (% o vw/vh). In questo modo, tutti gli elementi si adattano alla larghezza disponibile.

Esempio di layout fluido:

.container {
  width: 90%;   /* Larghezza relativa al viewport */
  margin: 0 auto; /* Centra il contenitore */
}

Per le immagini, si consiglia di usare max-width: 100% e height: auto:

img {
  max-width: 100%;
  height: auto;
}

Spiegazione:

• max-width: 100% impedisce all’immagine di superare la larghezza del contenitore.

• height: auto mantiene le proporzioni corrette.

• In combinazione con layout fluidi, le immagini diventano completamente adattive.

---

Introduzione a Bootstrap

Bootstrap è un framework CSS che rende semplice creare siti responsive senza scrivere tutto il CSS da zero. Fornisce:

• Sistema a griglie (grid) con righe e colonne.

• Componenti pronti come menu, bottoni, caroselli, form.

• Utility classes per margini, padding, colori e testi.

Esempio di griglia con Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-md-6">Colonna 1</div>
    <div class="col-md-6">Colonna 2</div>
  </div>
</div>

Spiegazione:

• container è il contenitore principale, centrato e responsivo.

• row definisce una riga di colonne.

• col-md-6 indica che la colonna occupa 6 unità su 12 per dispositivi medi (tablet e desktop).

• Le colonne si ridimensionano automaticamente su schermi più piccoli, diventando una sopra l’altra se necessario.

Bootstrap semplifica la creazione di siti responsive perché evita di scrivere manualmente tutte le media queries e consente di creare layout complessi in pochi minuti.

Ecco uno sviluppo dettagliato e narrativo dell’esercizio pratico, completo di spiegazioni passo-passo e indicazioni operative, pensato per studenti che vogliono creare una pagina responsive funzionante su desktop, tablet e smartphone.

---

Esercizio – Pagina HTML Responsive

L’obiettivo di questo esercizio è realizzare una pagina web che si adatti automaticamente a diversi dispositivi: desktop, tablet e smartphone. Per raggiungere questo obiettivo, utilizzeremo layout fluidi, immagini flessibili, media queries e una prima griglia di Bootstrap.

---

1. Struttura Base della Pagina

Prima di tutto, creiamo la struttura HTML minima, con <!DOCTYPE html>, <html>, <head> e <body>. Nel <head> inseriremo i meta tag essenziali per il responsive design:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagina Responsive Esercizio</title>
  <link rel="stylesheet" href="stile.css"> <!-- CSS esterno -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

Spiegazione:

• meta name="viewport": fondamentale per far sì che il layout risponda correttamente alla larghezza del dispositivo.

• Collegamento a Bootstrap: ci permetterà di utilizzare griglie e componenti responsive già pronti.

• CSS esterno: contiene le personalizzazioni aggiuntive oltre a Bootstrap.

---

2. Creare il Menu di Navigazione

Il menu deve essere orizzontale su desktop e verticale o a scomparsa su smartphone:

<header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Logo</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="menuNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Chi siamo</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Servizi</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contatti</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

Spiegazione:

• navbar-expand-md: il menu sarà orizzontale a partire dai dispositivi medi (tablet e desktop), mentre su smartphone diventa a scomparsa.

• navbar-toggler: bottone che permette di aprire il menu su schermi piccoli.

• ms-auto: spinge i link verso destra nel menu.

---

3. Layout a Colonne per il Contenuto

Creiamo tre colonne di testo affiancate su desktop usando Bootstrap:

<main class="container my-4">
  <div class="row">
    <div class="col-md-4 mb-3">
      <h2>Colonna 1</h2>
      <p>Testo della prima colonna. Qui puoi descrivere un argomento o un servizio.</p>
      <img src="https://via.placeholder.com/300x150" alt="Immagine 1" class="img-fluid">
    </div>
    <div class="col-md-4 mb-3">
      <h2>Colonna 2</h2>
      <p>Testo della seconda colonna. Adatta il contenuto al tema della pagina.</p>
      <img src="https://via.placeholder.com/300x150" alt="Immagine 2" class="img-fluid">
    </div>
    <div class="col-md-4 mb-3">
      <h2>Colonna 3</h2>
      <p>Testo della terza colonna. Puoi inserire link o altre informazioni.</p>
      <img src="https://via.placeholder.com/300x150" alt="Immagine 3" class="img-fluid">
    </div>
  </div>
</main>

Spiegazione:

• container: mantiene il contenuto centrato e con margini fluidi.

• row: crea una riga di colonne.

• col-md-4: ciascuna colonna occupa 4 unità su 12 su dispositivi medi e grandi, affiancandosi orizzontalmente.

• mb-3: aggiunge margine inferiore per separare le colonne su schermi piccoli.

• img-fluid: rende le immagini flessibili e responsive.

Su smartphone, le colonne si impilano automaticamente verticalmente grazie alla griglia di Bootstrap.

---

4. Media Queries Personalizzate (Opzionali)

Possiamo aggiungere media queries per personalizzare ulteriormente il layout, ad esempio modificando il font o la disposizione delle immagini:

@media (max-width: 768px) {
  main h2 {
    font-size: 1.2rem;
  }
  main p {
    font-size: 0.9rem;
  }
}

Spiegazione:

• Riduce le dimensioni dei titoli e paragrafi su tablet e smartphone.

• Le media queries permettono di adattare ogni aspetto del layout senza rompere la struttura fluida.

---

5. Footer Semplice

<footer class="bg-dark text-white text-center py-3">
  <p>© 2025 Nome Studente. Tutti i diritti riservati.</p>
</footer>

• Footer scuro con testo bianco, centrato.

• py-3: padding verticale per maggiore leggibilità.

---

6. Script Bootstrap

Per far funzionare il menu a scomparsa, aggiungiamo il JS di Bootstrap prima della chiusura del body:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

---

Competenze Acquisite con questo Esercizio

• Creare un layout fluido con colonne responsive.

• Inserire immagini flessibili che si ridimensionano in base alla larghezza del contenitore.

• Realizzare un menu di navigazione responsive con Bootstrap.

• Integrare media queries per modifiche personalizzate su diversi dispositivi.

• Comprendere il comportamento automatico della griglia Bootstrap su schermi di diverse dimensioni.

✅ Risultati Attesi

Al termine del modulo, sarai in grado di progettare e implementare siti web che si adattino automaticamente a qualsiasi dispositivo, dai grandi monitor desktop agli smartphone, combinando layout fluidi, media queries e, se desiderato, framework CSS come Bootstrap.