InnoMarts logo
InnoMarts
Fast websites
← Back to course

Responsive Design

Responsive Design

Bentornato.

Nella lezione precedente hai imparato CSS Grid.

Righe.

Colonne.

Card che si comportano come piccole scatole disciplinate.

Molto bene.

Ora dobbiamo far funzionare quei layout su schermi diversi.

Perché un sito che sembra bellissimo solo sul tuo laptop non è finito.

È solo sicuro di sé in una stanza sola.

Gli utenti possono aprire il tuo sito su:

Il responsive design aiuta il sito ad adattarsi.

L’obiettivo è semplice:

rendere la pagina leggibile, usabile e piacevole su ogni schermo.

Senza costringere gli utenti a fare zoom, scrollare di lato o mettere in dubbio le tue scelte di vita.

Cosa Imparerai

In questa lezione imparerai:

Cos’è il Responsive Design?

Responsive design significa costruire siti che si adattano a diverse dimensioni dello schermo.

Un layout desktop può avere:

Un layout mobile di solito ha bisogno di:

Responsive design non significa creare cinque siti diversi.

Significa creare un sito flessibile.

Un sito.

Molti schermi.

Meno caos.

Più dignità.

Il Viewport Meta Tag

Responsive design comincia in HTML.

Dentro head, dovresti avere questa riga:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Questa riga dice al browser:

Usa la larghezza reale del dispositivo e non fingere che il telefono sia un piccolo desktop.

Senza questa riga, i browser mobile possono zoomare o scalare la pagina in modo strano.

Il tuo CSS può essere perfetto.

Ma senza il viewport meta tag, il telefono può comunque comportarsi come se avesse trovato il tuo layout in una caverna antica.

Includilo sempre.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir css-lesson7
cd css-lesson7
touch index.html
touch style.css

Dovresti avere:

css-lesson7/
  index.html
  style.css

Apri la cartella nel tuo editor.

Costruiremo una piccola pagina responsive con:

Poi la faremo adattare agli schermi piccoli.

Niente panico.

Solo CSS.

Che a volte è la stessa cosa.

Ma oggi restiamo calmi.

Scrivi l’HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Design</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <nav class="navbar">
      <h1 class="logo">ResponsiveSite</h1>

      <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">Corsi</a>
        <a href="#">Progetti</a>
        <a href="#">Contatto</a>
      </div>
    </nav>

    <section class="hero">
      <div class="hero-text">
        <h2>Costruisci Siti per Ogni Schermo</h2>
        <p>
          Il responsive design aiuta il layout ad adattarsi a telefoni, tablet, laptop e monitor grandi.
        </p>
        <a href="#" class="button">Inizia a Imparare</a>
      </div>

      <div class="hero-image">
        <img src="https://via.placeholder.com/600x400" alt="Esempio di responsive design">
      </div>
    </section>
  </header>

  <main class="page">
    <section class="intro">
      <h2>Perché il Responsive Design Conta</h2>
      <p>
        Le persone visitano i siti da molti dispositivi. Il tuo layout dovrebbe funzionare ovunque, non solo sul tuo schermo preferito.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <h2>Layout Flessibili</h2>
        <p>Usa larghezze flessibili, Grid e Flexbox per creare layout che si adattano.</p>
      </article>

      <article class="card">
        <h2>Testo Leggibile</h2>
        <p>Il testo deve restare comodo da leggere sia su schermi piccoli che grandi.</p>
      </article>

      <article class="card">
        <h2>Media Queries</h2>
        <p>Usa media queries per cambiare stili a diverse dimensioni dello schermo.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Creato mentre imparo responsive design.</p>
  </footer>
</body>
</html>

Questo HTML include il viewport meta tag.

Bene.

La tua pagina è già più preparata per gli schermi mobile di molti siti del 2009.

Una piccola vittoria.

Inizia con il CSS Base

Apri style.css e aggiungi:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

Parte importante:

img {
  max-width: 100%;
  display: block;
}

Questo rende le immagini responsive.

L’immagine non diventerà più larga del suo container.

Senza questo, immagini grandi possono rompere il layout.

Le immagini sono come ospiti entusiasti.

Bello averle.

Ma hanno bisogno di confini.

Stilizza Header e Navbar

Aggiungi questo:

.site-header {
  background-color: #111827;
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

Su desktop, logo e link saranno sulla stessa riga.

Va bene per schermi larghi.

Ma sui telefoni potrebbe non esserci abbastanza spazio.

Lo sistemeremo più avanti con una media query.

Per ora, layout desktop.

Come costruire il tavolo prima di decidere dove si siederà il gatto.

Stilizza la Hero Section

Aggiungi:

.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.hero-text h2 {
  margin: 0 0 16px;
  font-size: 48px;
  line-height: 1.1;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

.hero-image img {
  border-radius: 24px;
  border: 2px solid #374151;
}

La hero usa Grid con due colonne:

grid-template-columns: 1fr 1fr;

Questo va bene per desktop.

Testo da una parte.

Immagine dall’altra.

Molto rispettabile.

Ma su un telefono, due colonne possono diventare troppo strette.

Quindi più avanti le trasformeremo in una colonna.

CSS deve imparare le buone maniere.

Stilizza la Pagina Principale

Aggiungi:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  margin-bottom: 24px;
  border-left: 6px solid #2563eb;
}

.intro h2 {
  margin-top: 0;
  font-size: 32px;
}

.intro p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

Questo dà al contenuto una larghezza comoda.

max-width impedisce alla pagina di diventare troppo larga.

padding tiene il contenuto lontano dai bordi dello schermo.

Sui telefoni, il padding laterale è molto importante.

Testo attaccato al bordo dello schermo sembra scomodo.

Come una sedia con una gamba sospetta.

Crea Card Responsive

Aggiungi:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
}

.card h2 {
  margin-top: 0;
  font-size: 24px;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

Su desktop mostriamo tre card in una riga.

Va bene.

Ma su tablet e telefoni servono meno colonne.

Qui entrano le media queries.

Le media queries sono CSS che dice:

“In certe condizioni, mi comporterò diversamente.”

Molto maturo.

Se solo tutti i layout fossero così emotivamente disponibili.

Cos’è una Media Query?

Una media query permette di applicare CSS solo quando alcune condizioni sono vere.

Esempio:

@media (max-width: 800px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

Questo significa:

Se lo schermo è largo 800px o meno, metti le card in una colonna.

Le media queries sono essenziali per il responsive design.

Permettono al layout di adattarsi.

Non di andare in panico.

Adattarsi.

Grande differenza.

Rendi il Layout Responsive

Aggiungi questo in fondo al CSS:

@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-text h2 {
    font-size: 40px;
  }
}

Ora:

Questo è meglio per tablet e schermi più piccoli.

Non perfetto ancora.

Ma meglio.

Responsive design non è una soluzione gigante.

È una serie di decisioni ragionevoli.

Come la vita.

Ma con più punti e virgola.

Migliora il Layout su Telefono

Aggiungi un’altra media query:

@media (max-width: 560px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
  }

  .hero {
    padding: 48px 20px;
  }

  .hero-text h2 {
    font-size: 34px;
  }

  .hero-text p {
    font-size: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .intro,
  .card {
    padding: 24px;
  }
}

Ora sui telefoni:

Questo è responsive design in azione.

Lo stesso HTML.

Layout diverso in base allo schermo.

Molto potente.

Molto utile.

Quasi sospettosamente civile.

CSS Mobile-First

Ci sono due approcci comuni.

Desktop-first:

.cards {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 560px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

Mobile-first:

.cards {
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

Mobile-first significa scrivere prima il layout mobile, poi aggiungere layout più larghi per schermi più grandi.

Spesso è un buon approccio.

Perché?

Perché gli schermi piccoli hanno più limiti.

Se il design funziona su telefono, espanderlo per desktop è spesso più facile.

Come preparare prima uno zaino, poi trasferirsi in una casa.

Non il contrario.

Larghezze Flessibili

Evita larghezze fisse quando possibile.

Male:

.card {
  width: 400px;
}

Questo può rompersi su schermi piccoli.

Meglio:

.card {
  width: 100%;
  max-width: 400px;
}

Oppure lascia che Grid controlli la larghezza:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Le larghezze fisse non sono sempre sbagliate.

Ma vanno usate con attenzione.

Una larghezza fissa su desktop può diventare un disastro su mobile.

CSS ricorda tutto.

E mobile espone i tuoi peccati.

Testo Responsive

Titoli grandi su desktop possono essere troppo grandi sui telefoni.

Desktop:

.hero-text h2 {
  font-size: 48px;
}

Telefono:

@media (max-width: 560px) {
  .hero-text h2 {
    font-size: 34px;
  }
}

Questo mantiene il testo leggibile senza invadere lo schermo.

Il testo grande è bello.

Il testo che mangia tutto lo schermo del telefono non è bello.

Non è un titolo.

È una situazione con ostaggi.

CSS Completo

Il tuo style.css dovrebbe essere così:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.site-header {
  background-color: #111827;
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.hero-text h2 {
  margin: 0 0 16px;
  font-size: 48px;
  line-height: 1.1;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

.hero-image img {
  border-radius: 24px;
  border: 2px solid #374151;
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  margin-bottom: 24px;
  border-left: 6px solid #2563eb;
}

.intro h2 {
  margin-top: 0;
  font-size: 32px;
}

.intro p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
}

.card h2 {
  margin-top: 0;
  font-size: 24px;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-text h2 {
    font-size: 40px;
  }
}

@media (max-width: 560px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
  }

  .hero {
    padding: 48px 20px;
  }

  .hero-text h2 {
    font-size: 34px;
  }

  .hero-text p {
    font-size: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .intro,
  .card {
    padding: 24px;
  }
}

Salva il file.

Aggiorna il browser.

Ridimensiona la finestra.

Il layout dovrebbe cambiare.

Desktop:

Tablet:

Telefono:

Complimenti.

Il tuo layout non ha più paura dei telefoni.

Errori Comuni

Dimenticare il viewport meta tag

Senza questo:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

il layout mobile può comportarsi male.

Includilo sempre.

Non negoziare con questa riga.

È piccola ma potente.

Come una minuscola guardia del corpo CSS.

Creare scroll orizzontale

Lo scroll orizzontale spesso succede perché qualcosa è troppo largo.

Cause comuni:

Se la pagina scrolla di lato su mobile, indaga.

Lo scroll laterale di solito è una richiesta d’aiuto.

Testo troppo piccolo

Gli utenti su telefono non dovrebbero usare un microscopio.

Male:

p {
  font-size: 12px;
}

Meglio:

p {
  font-size: 16px;
  line-height: 1.6;
}

Il testo leggibile conta.

Un layout bellissimo con testo illeggibile è solo decorazione con problemi di fiducia.

Pratica

Crea una pagina responsive con:

Falla funzionare così:

Usa:

Testa ridimensionando il browser.

Non fidarti solo dei tuoi occhi su uno schermo.

Uno schermo mente.

Molti schermi dicono la verità.

Mini Sfida

Prendi la card grid della lezione precedente.

Rendila responsive:

Poi aggiungi una hero responsive sopra.

Usa Grid per la hero.

Usa Grid per le card.

Usa Flexbox per la navbar.

Questo è un pattern reale di layout web.

Non stai solo imparando teoria.

Stai costruendo la struttura usata nei siti veri.

Il layout sta crescendo.

Cerca di non piangere.

Riassunto

Oggi hai imparato che:

Un sito deve funzionare dove gli utenti sono davvero.

E gli utenti sono ovunque.

Telefoni.

Tablet.

Laptop.

Dispositivi strani.

Forse anche frigoriferi intelligenti.

Non costruire solo per il tuo schermo.

Costruisci per la vita reale.

La vita reale ha molte dimensioni di schermo e pochissima pazienza.

Prossima Lezione

Nella prossima lezione impareremo backgrounds, borders e shadows.

Renderemo sezioni, card e pulsanti più rifiniti.

Non sovradecorati.

Rifiniti.

C’è differenza.

Una differenza molto importante.