CSS Academy · Lezione

Approccio mobile-first e desktop-first

Comprendete la differenza tra le strategie di progettazione mobile-first e desktop-first.

Approccio mobile-first e desktop-first è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Che cos'è il responsive design

Il responsive web design crea layout che si adattano a qualsiasi dimensione dello schermo, dai piccoli smartphone ai grandi monitor desktop, utilizzando griglie fluide, immagini flessibili e media query CSS.

Design mobile-first

In un approccio mobile-first, scrive il CSS di base per gli schermi piccoli e utilizza poi le media query min-width per aggiungere progressivamente complessità agli schermi più grandi.

<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Narrow (default) preview — driven by the real CSS below:</p>
<nav class="nav" style="display:flex;gap:8px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;margin-bottom:16px;">
  <a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</nav>
<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Static reference for the ≥768px (tablet+) row layout (not driven by the media query):</p>
<nav style="display:flex;flex-direction:row;gap:8px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">
  <a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</nav>

Design desktop-first

In un approccio desktop-first, scrive il CSS di base per gli schermi grandi e utilizza le media query max-width per adattarlo agli schermi più piccoli.

<aside class="sidebar" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar — width: 100% below 768px (this preview is narrow, so the override is already visible)</aside>

Perché si preferisce il mobile-first

Vantaggi del mobile-first:

Obbliga a dare priorità ai contenuti, cioè a stabilire che cosa è più importante sugli schermi piccoli
Progressive enhancement: si parte da una soluzione semplice e si aggiunge complessità
Prestazioni migliori: sui dispositivi mobili vengono caricati solo gli stili di base, non le sovrascritture
È in linea con il fatto che la maggior parte del traffico web proviene da dispositivi mobili

La cascata e il mobile-first

Il mobile-first funziona naturalmente con la cascata CSS. Gli stili di base vengono caricati per primi; le sovrascritture per gli schermi più grandi vengono aggiunte successivamente tramite media query. Questo comporta meno conflitti di specificità CSS.

Strategia content-first

Prima di scrivere CSS, si chieda: di quali contenuti ha bisogno un utente mobile? Strutturi l'HTML e il CSS di base in funzione della risposta. Sugli schermi più grandi, migliori l'esperienza invece di ricostruirla.

Progressive enhancement e graceful degradation

Progressive enhancement (mobile-first): si parte da un minimo funzionale e si aggiungono miglioramenti a livelli. Graceful degradation (desktop-first): si costruisce un'esperienza completa e poi la si adatta agli schermi più piccoli. In genere, il progressive enhancement è più robusto.

Aree di tocco e di clic

Gli utenti mobili utilizzano le dita, non un cursore del mouse preciso. Il design mobile-first porta naturalmente a creare aree di tocco più grandi, di almeno 44x44px, e uno spazio adeguato tra gli elementi interattivi.

<button>Tap target (min 44x44px)</button>

Modello di navigazione

La navigazione mobile-first inizia generalmente con un menu hamburger o un drawer, per poi espandersi in una barra di navigazione visibile sugli schermi più grandi:

<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Narrow (default) preview — driven by the real CSS below:</p>
<button aria-label="menu" style="margin-bottom:8px;">&#9776; Menu</button>
<div class="nav-links" style="gap:12px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;margin-bottom:16px;">
  <a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</div>
<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Static reference for the ≥768px (desktop) visible nav bar (not driven by the media query):</p>
<div style="display:flex;gap:12px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">
  <a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</div>

Tipografia mobile-first

Imposti innanzitutto dimensioni dei caratteri confortevoli e leggibili sui dispositivi mobili, quindi le aumenti per gli schermi più grandi:

<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Narrow (default) preview — driven by the real CSS below:</p>
<h1>Mobile heading (1.75rem)</h1>
<p style="font-size:0.85em;color:#888;margin:16px 0 6px;">Static reference for the ≥1024px (desktop) size (not driven by the media query):</p>
<h1 style="font-size:3rem;">Desktop heading (3rem)</h1>

Fluido e adattivo

Il responsive design può essere:

Fluido: utilizza unità relative e si adatta gradualmente a qualsiasi dimensione
Adattivo: passa da un layout fisso all'altro in corrispondenza di specifici breakpoint

La migliore pratica moderna combina entrambi gli approcci: layout fluidi all'interno dei breakpoint e layout diversi in corrispondenza dei breakpoint.

Verifica rapida

Quale tipo di media query è caratteristico di un approccio mobile-first?

Riepilogo

Il design mobile-first definisce gli stili di base per i dispositivi mobili e utilizza le query min-width per migliorarli sugli schermi più grandi. Favorisce la priorità dei contenuti, prestazioni migliori ed è in linea con i moderni modelli di traffico. Il progressive enhancement a partire dagli schermi piccoli produce design responsive più robusti e facili da mantenere.

Domande Frequenti

La lezione «Approccio mobile-first e desktop-first» è gratuita?

Sì — il testo completo di «Approccio mobile-first e desktop-first» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Approccio mobile-first e desktop-first»?

Comprendete la differenza tra le strategie di progettazione mobile-first e desktop-first. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Approccio mobile-first e desktop-first»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a CSS Academy