Blog di Eugi GufoEugi Gufo

La maggioranza delle persone, al giorno d’oggi, utilizza una grande varietà di apparecchi per navigare sull’internet: non solo i computer, ma pure gli smartphone e i tablet. Per esempio, secondo le statistiche del mio sito circa il 40% delle visite giornaliere viene effettuato con gli smartphone. Questo significa che ai proprietari dei siti conviene rendere questi ultimi adattabili a tutte le tipologie degli schermi rendendo quindi sempre comoda la consultazione dei contenuti.

IMHO, entro pochissimi anni avremo due internet paralleli: quello basato sulle app per gli smartphone (i servizi offerti via form e i contenuti sintetici diffusi via messenger) e quello basato sui vecchi siti responsive per i computer (e forse per i tablet, se questi riescono a sopravvivere). A fino a quel momento siamo costretti a creare i siti responsive per ogni genere di apparecchio. Perché dopo la prima fase dell’entusiasmo per l’internet tascabile la gente sta ormai capendo che il mezzo più comodo per il consumo dei contenuti è comunque il computer con lo schermo sufficientemente grande e comodo.

Realizzare un sito web responsive è in realtà molto più facile di quanto possa sembrare, ma oggi vorrei concentrarmi solo su un preciso aspetto di tale missione: quali dimensioni degli schermi vanno previste. È un aspetto importante perché per essere visualizzato in modo ottimale su tutte le tipologie degli schermi un sito responsive deve:
1) ridurre progressivamente la quantità delle colonne e annullare il float con il stringersi della larghezza della pagina;
2) utilizzare il max-width al posto del width per l’assegnazione della larghezza al contenitore;
3) diminuire i valori di margin e di padding sui dispositivi mobili;
4) ottimizzare le dimensioni dei caratteri sugli schermi piccoli (in modo che l’utente non debba ingrandire la pagina per riuscire a leggere i testi);
5) trasformare i menu orizzontali in menu estendibili;
6) nascondere gli elementi/contenuti secondari sugli schermi piccoli (display: none);
7) diminuire le dimensioni delle immagini di sfondo.
Se mi sono dimenticato qualche punto importante della lista, segnalatemelo pure!
In pratica, nel corso della realizzazione del nostro sito web responsive noi dobbiamo prevedere quelle categorie degli schermi per le quali la composizione della pagina cambia radicalmente. Io utilizzo da tempo questa sequenza di media query (in CSS3):

/* Smartphones (orientamento verticale e orizzontale) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
/* i vostri stili */
}

/* Smartphones (orientamento orizzontale) ----------- */
@media only screen and (min-width: 321px) {
/* i vostri stili */
}

/* Smartphones (orientamento verticale) ----------- */
@media only screen and (max-width: 320px) {
/* i vostri stili */
}

/* iPads (orientamento verticale e orizzontale) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* i vostri stili */
}

/* iPads (orientamento orizzontale) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* i vostri stili */
}

/* iPads (orientamento verticale) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* i vostri stili */
}

/* iPad 3**********/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* i vostri stili */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* i vostri stili */
}

/* desktopo e portatili ----------- */
@media only screen  and (min-width: 1224px) {
/* i vostri stili */
}

/* schermi grandi ----------- */
@media only screen  and (min-width: 1824px) {
/* i vostri stili */
}

/* iPhone 4 ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* i vostri stili */
}
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* i vostri stili */
}

/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}

/* iPhone 6 ----------- */
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}

/* iPhone 6+ ----------- */
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* i vostri stili */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* i vostri stili */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* i vostri stili */
}
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* i vostri stili */
}

Per quanto riguarda il codice appena riportato, è importante sottolineare l’uso intenzionale dell’operatore «only». Esso ci permette di applicare gli stili solo ai browser moderni. I browser vecchi (tra i quali saluto in modo particolare l’IE6) che sanno interpretare solamente il CSS2, devono invece essere trattati con un foglio di stili separato (per non appesantire e «rallentare» quello principale).
Parlerò dei vecchi browser in uno degli articoli successivi (perché purtroppo non possono essere del tutto ignorati), mentre l’obbiettivo del presente paragrafo era quello di condividere con voi uno «schema» in CSS utile, dettagliato e funzionante. Ho fatto risparmiare del tempo alle persone ancora più pigre di me…
Prego!