Breakpoint comuni e strategie di scelta

Quali misure usare in px per far scattare le tue media queries? Spoiler: non progettare basandoti sui modelli di telefono.

Nella lezione precedente abbiamo usato la misura 768px come “soglia” per far scattare il nostro layout Desktop. Quella soglia esatta si chiama Breakpoint (punto di rottura).

La domanda che ogni web designer si pone all’inizio è: “A quali pixel esatti devo impostare i miei Breakpoint? Che misura ha un iPhone? Che misura ha un Samsung?”.

Il limite dei breakpoint basati sui dispositivi

Agli albori del responsive design, si cercava di creare breakpoint che combaciassero perfettamente con la larghezza dell’iPad (768px) o dell’iPhone (320px).

Oggi questo approccio è fragile. Esistono smartphone larghi 320px, 375px, 414px, tablet di molte dimensioni, laptop piccoli e monitor ultrawide. Rincorrere i singoli modelli produce CSS difficile da mantenere.

Segui il contenuto, non il dispositivo

Il modo corretto di impostare un Breakpoint è usare gli occhi.

Inizia a progettare su Mobile (es. 320px). Il layout è a singola colonna.
Allarga gradualmente la finestra del browser (dal DevTools).
Continua ad allargare. I testi diventeranno righe molto lunghe. Le immagini diventeranno gigantesche.
Fermati nel momento in cui il layout ti sembra “rotto”, brutto o sgraziato.
Prendi nota della larghezza in pixel in cui ti sei fermato (es. 612px).
Questo è il tuo Breakpoint! Lì aggiungerai una Media Query @media (width >= 612px) per aggiungere colonne o cambiare il layout.

Questo approccio rende il layout più robusto, perché i breakpoint nascono dalle esigenze del contenuto invece che dal nome commerciale di un dispositivo.

I Breakpoint Standard “di convenienza”

Nonostante la regola d’oro, lavorare in team e usare framework moderni (come Tailwind CSS o Bootstrap) richiede spesso di mettersi d’accordo su alcune fasce “standard” per comodità di comunicazione.

Se non sai da dove partire, usa questa scala universalmente riconosciuta (usata dai professionisti e da Tailwind):

Smartphone: Nessuna media query (CSS base). Fino a 639px.
Tablet (Piccoli / Verticali): @media (width >= 640px). Da qui in poi di solito si passano i form in linea o si affiancano due card.
Tablet (Grandi / Orizzontali) / Laptop Piccoli: @media (width >= 768px).
Laptop / Desktop Base: @media (width >= 1024px). Qui si mostra il menu Desktop tradizionale e si crea il layout laterale classico.
Desktop Grandi: @media (width >= 1280px).

Non riempire il codice di breakpoint continui! Un sito web eccellente, se ben architettato con CSS Grid e Flexbox fluido, spesso richiede solo 1 o al massimo 2 breakpoint in tutto per passare dalla visualizzazione Mobile a quella Desktop.