Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Impostare correttamente i breakpoint

Capire quanti breakpoint servono e come utilizzarli
Capire quanti breakpoint servono e come utilizzarli
Link copiato negli appunti

Quando abbiamo introdotto il concetto di breakpoint nella Guida al Responsive Design, ponevamo una domanda: quanti breakpoint servono? La risposta era questa:

Quanti ne servono. Ovvero quanti ne servono perché una pagina si adatti al meglio alle caratteristiche del dispositivo con cui viene visualizzata.

E per capire quanti breakpoint servono una sola è la via: testare, testare, testare. E testando la pagina, annotare tutte le criticità che emergono aumentando e restrtringendo la larghezza dello schermo. Quando qualcuna di queste criticità si manifesta, è il momento di aggiungere un nuovo breakpoint in corrispondenza di quallo specifico punto, usando come unità i px o gli em. In questa operazione diventano utilissimi dei tool specifici per il responsive design: li segnaleremo nell'ultima lezione della guida. Per il momento vediamo come questo approccio è stato applicato al nostro progetto.

Breakpoint e tweakpoint

Recentemente Jeremy Keith ha proposto sul suo blog una differenziazione terminologica tra breakpoint e tweakpoint. Che si voglia adottarla o meno, quello che conta è il concetto.

Un breakpoint è un punto in cui avviene una modifica importante e drastica alla struttura del layout. Sono le media query con cui, ad esempio, facciamo passare il layout o una sua sezione da due a una colonna; oppure quando una sezione viene 'nascosta'; o ancora quando adattiamo un componente cruciale come la navigazione.

Un tweakpoint, invece, corrisponde a una media query che creiamo per aggiustare un dettaglio del layout magari minore ma comunque importante: la dimensione del testo, l'interlinea, la posizione di un'immagine, la disposizione degli elementi in un form, etc.

Se usiamo questa idea e prendiamo come riferimento la home page de 'Il Viaggio', abbiamo questi breakpoint:

  • a 480px, i blocchi con i link della sezione 'Occasioni low-cost' si dispongono su due colonne invece che una;
  • a partire da 1024px si dispongono su tre colonne perché abbiamo lo spazio necessario;
  • a 600px viene visualizzata l'immagine di sfondo della testata che da sola modifica radicalmente l'aspetto della pagina;
  • sempre a partire da 600px carichiamo, come abbiamo visto, i contenuti inclusi dinamicamente;
  • da 601px il layout diventa a due colonne;
  • da 768px la navigazione si dispone orizzontalmente nella barra in alto.

Come si vede, alla fine i breakpoint propriamente detti sono pochi.

Aggiustamenti minori

Per rendere pienamente comprensibile il concetto di tweakpoint, ci limitiamo a tre situazioni.

Posizionamento dell'immagine della testata

L'immagine di fondo della testata è larga ben 1600px. Ecco come appare su un tablet in modalità portrait:

Figura 14 - Immagine della testata a 768px

screenshot

In realtà, vogliamo che a qualunque larghezza venga mostrato il dettaglio più importante: la ragazza a destra che scrive sulla sabbia. Abbiamo iniziato con queste regole di posizionamento dello sfondo, ma intorno ai 900px la perdiamo:

#testata {
 background: url(../../assets/img/beach-2.jpg);
 background-position:  center center;
 background-size:cover;
 background-repeat:  no-repeat;
}

Ci siamo messi all'opera, e di prova in prova abbiamo creato una serie di media query con cui andiamo a sistemare la posizione. Così facendo, la ragazza compare sempre nel punto giusto:

#testata {
 background: url(../../assets/img/beach-2.jpg);
 background-position:  -800px center;
 background-size:cover;
 background-repeat:  no-repeat;
}
/* Media queries per sistemare la posizione dello sfondo della
testata alle varie risoluzioni di schermo */
@media only screen and (min-width: 700px) and (max-width: 890px) {
#testata {background-position:  -700px center;}
}
@media only screen and (min-width: 890px) and (max-width: 990px) {
#testata {background-position:  -500px center;}
}
@media only screen and (min-width: 990px) and (max-width: 1165px) {
#testata {background-position:  -400px center;}
}
@media only screen and (min-width: 1165px) {
#testata {background-position:  center center;}

Immagini della sezione 'Articoli più letti'

La lista con gli articoli più letti è accompagnata da una serie di immagini con dimensioni pari a 120x120px.

Quando la larghezza della finestra diminuisce, però, si nota che a un certo punto c'è una sproporzione tra l'immagine e il testo. Quest'ultimo diventa oggettivamente troppo 'stretto', in certi casi ci ritroviamo solo una parola per riga:

Figura 15 - Dettaglio delle immagini nella sezione 'Articoli più letti'

screenshot

È bastato ridimensionare l'immagine a 60px tra i 350 e gli 860px per sistemare le cose:

/* Restringiamo la larghezza delle immagini nella sezione 'Articoli più letti */
@media only screen and (min-width: 350px) and (max-width: 860px) {
aside .media .media--img {width: 60px; height: auto;}
}

Figura 16 - Immagini nella sezione 'Articoli più letti' dopo il ridimensionamento

screenshot

Aggiustamenti all'interlinea

Quando abbiamo testato la pagina su un tablet in modalità portrait, abbiamo notato una certa sproporzione nell'interlinea dei paragrafi:

Figura 17 - Dettaglio dell'interlinea

screenshot

Ancora una volta, basta una media query e un piccolo ritocco, questa volta alla proprietà line-height:

/* Aggiustiamo l'altezza di linea  */
@media only screen and (min-width: 600px) and (max-width: 1023px) {
article p, #lanci-video .media p, #lanci-blog p {line-height: 1.2;}
}

Questo il risultato:

Figura 18 - Dettaglio dell'interlinea dopo l'aggiustamento

screenshot

Per tutti gli altri interventi di questo genere, potete consultare la parte finale dei foglio di stile 'stile.css' che trovate nel pacchetto zip.

Ti consigliamo anche