La progettazione e lo sviluppo di un sito dovrebbero adattarsi al comportamento e all’ambiente dell’utente (dimensioni dello schermo, piattaforma e l’orientamento del device, etc..): il MF non è una metodologia per creare versioni dei siti ‘ottimizzate’ e specifiche per il mobile: un principio cardine del responsive design infatti è che il web è uno e unico.
Nella progettazione del sito è opportuno partire dalla strutturazione dei contenuti per lo schermo limitato nelle dimensioni dei dispositivi mobili: non, quindi, da un layout e da un set di funzionalità concepiti per il desktop per poi adattarli per il mobile, togliendo elementi, ma al contrario, si parte dai limiti posti dai dispositivi mobili per concentrarsi al meglio sui contenuti essenziali, per poi arricchire il tutto sui dispositivi più capaci sia in termini di spazio che di prestazioni.
Todo list
"Non iniziate la progettazione del sito pensando al layout per il desktop. Ma non iniziate nemmeno pensando al layout per il mobile. Pensate invece, prima di tutto, ai contenuti".(Jeremy Keith)
- quali contenuti inseriamo sulla pagina?
- per i dispositivi mobili inseriamo gli stessi contenuti e le stesse funzionalità che usiamo per il desktop?
- se non inseriamo gli stessi contenuti, quali manteniamo?
- in che ordine li collochiamo? questo elemento va ‘sotto’ o ‘sopra’ a quest’altro?
- sui dispositivi mobili come trattiamo i contenuti ‘superflui’? li nascondiamo? li compattiamo?
poi
- adattare il layout al più ampio numero di risoluzioni di schermo possibile (dai telefoni cellulari al desktop);
- adattare le dimensioni delle immagini (e in genere di tutti i contenuti a larghezza fissa) alla risoluzione e alle dimensioni dello schermo;
- servire immagini ‘meno pesanti’ ai dispositivi che non possono sempre sfruttare la banda larga;
- semplificare il layout degli elementi presenti sulla pagina per i dispositivi mobili con schermi piccoli;
- nascondere gli elementi non essenziali su questi stessi dispositivi;
- fornire un’interfaccia adatta all’interazione touch per i device che la supportano;
- individuare e sfruttare, quando serve, funzionalità adatte al mobile (come la geolocalizzazione).
Ad esempio un risultato potrebbe essere ( le ultime voci barrate non si visualizzeranno su mobile )
- Logo
- Navigazione principale
- Sezione ultimi post (5)
- Sezione ‘Around you’
- Box di ricerca
- Link e icone social
- Info di contatto e supporto
Sezione contenuti in evidenzaSezione ultimi commentiNavigazione secondaria (tag)
Tipi di media nelle mediaqueries
Possiamo scegliere tra questi:
- all: il CSS si applica a tutti i dispositivi di visualizzazione;
- screen: schermo di computer;
- print: pagina stampata;
- projection: presentazioni e proiezioni;
- speech: dispositivi a sintesi vocale;
- braille: supporti basati sull’uso del braille;
- embossed: stampanti braille;
- handheld: dispositivi mobili con schermo piccolo e in genere dotati di browser con limitate capacità grafiche;
- tty: dispositivi a carattere fisso come i terminali;
- tv: visualizzazione su schermi televisivi.
Se in una media query non si dichiara alcun tipo di media specifico, si assume che la regola o il CSS siano rivolti a tutti i tipi di media. In pratica, il valore implicito di default è all.
Usando questo codice
media="only screen and (color)"
nascondiamo il CSS ai vecchi browser, che salteranno la dichiarazione.
Una volta compreso il meccanismo si possono costruire query molto specifiche e complesse, per esempio concatenando tramite and più espressioni:
media="screen and (color) and (device-aspect-ratio: 16/9)"
La query è vera se la pagina viene visualizzata su uno schermo a colori con aspect ratio di 16/9.
Più media query possono essere raggruppate in una lista separandole con una virgola:
media="screen and (color), projection and (color)"
Infine, si può importare un CSS specifico attraverso una media query usando la direttiva @import all’interno di un altro foglio di stile:
@import url(colore.css) screen and (color);
Width
Width designa la larghezza dell’area di visualizzazione del documento.
La seguente espressione, per esempio, applica un certo stile quando le dimensioni sono comprese tra 400px e 1024px:
@media screen and (min-width: 400px) and (max-width: 1024px) {
/* regole CSS */
}
Ricordiamo però che l'attributo display: none asconde solamente gli elementi, che verranno comunque caricati nel DOM.
Orientation
La caratteristica orientation indica se il dispositivo di output è in modalità landscape (la larghezza è maggiore dell’altezza) oppure portrait (l’altezza è maggiore della larghezza). I valori che può assumere sono appunto landscape o portrait.
Nell’esempio la definizione di media queries con cui si servono CSS ad hoc ad un iPad a seconda se si trovi in modalità landscape o portrait:
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css" type="text/css" /> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css" type="text/css" />
Resolution
Descrive la risoluzione (ovvero la densità di pixel) del dispositivo di output. I valori della risoluzione possono essere espressi in dpi (punti per pollice) oppure in dpcm (punti per centimetro). Può assumere i prefissi min- e max-.
@media print and (min-resolution: 300dpi) {
/* regole CSS */
}
Css di stampa
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print”>
Breakpoint
Ad ogni breakpoint corrisponde una media query.
body {
background: red;
}
@media screen and (min-width: 480px) {
body {
background: yellow;
}
}
@media screen and (min-width: 768px) {
body {
background: green;
}
}
@media screen and (min-width: 1024px) {
body {
background: blue;
}
}
@media screen and (min-width: 1200px) {
body {
background: gray;
}
}
Breakpoint in base ai dispositivi
La pratica oggi prevalente tende a fissare i breakpoint sulla base delle dimensioni dello schermo (o della finestra del browser) delle principali tipologie di device:
- Smartphone (con orientamento portrait o landscape)
- Tablet (con orientamento portrait o landscape)
- Netbook
- PC desktop con monitor ad alta o altissima risoluzione
Traducendo questo schema in numeri, poi, si può verificare come per le categorie smartphone e tablet le dimensioni ‘standard’ prevalentemente adottate corrispondano a quelle dell’iPhone e dell’iPad:
- 320px: iPhone con orientamento portrait
- 480px: iPhone con orientamento landscape
- 768px: iPad con orientamento portrait
- 1024px: iPad con orientamento landscape (ma anche netbook, visto che in genere questi dispositivi hanno una risoluzione orizzontale di 1024px)
Immagini adatte per ogni dispositivo
Con la tecnica del max-width: 100% risolviamo solo una parte dei problemi posti dalle immagini in un contesto responsive. Rimane una seconda questione: se responsive design significa adattamento automatico all’ambiente d’uso del sito, allora dovremmo fare in modo di servire immagini ad hoc a seconda dei dispositivi e delle loro caratteristiche. In pratica: perché far scaricare a chi usa uno smartphone un’immagine ad altissima risoluzione di 500kb e 1300x700px quando lo schermo non supera, per dire, i 480px?
Sencha.io Src non fa altro che individuare il device con cui si accede al sito per poi servire un’immagine adatta in termini di dimensioni e peso. Pertanto, sui nostri server mettiamo le immagini ad alta risoluzione, pensa poi Sencha a fare il lavoro di ridimensionamento.
Il procedimento è tutto meno che complicato, basta configurare nel modo giusto l’attributo src per le immagini nel codice HTML:
<img src="http://src.sencha.io/http://html.it/ilviaggio/pompieri.jpg">
Tutto quello che c’è da fare è inserire prima dell’url dell’immagine che risiede sui nostri server (http://html.it/ilviaggio/pompieri.jpg), il prefisso http://src.sencha.io/. Null’altro, per la configurazione di base.
Le risoluzioni
Inoltre un problema non indiffferente riguarda la crescita della risoluzione dei dispositivi, sopratutto con l'arrivo degli schermi in retina, per cui le alte risoluzioni delle mediaqueries non corrispondono necessariamente a supporti di grande dimensioni:
<meta name="viewport" content="width=device-width; initial-scale=1.0">
E' possibile forzare una view port in modo che a seconda del dispositivo venga usata una risoluzione piuttosto che un altra. Ad esempio, fare in modo che nei tablet il nostro sito si veda come se avesse una risoluzione in larghezza di 800 (anche se la risoluzione reale è ben più alta, e il sito verrebbe visualizzato per intero , ma piccolissimo)
Altri accorgimenti
Ad esempio
<a href="tel:+3906123456789">Chiamaci!</a>
per fare in modo che il cellulare intercetti e possa chiamare direttamenteil numero, oppure l'uso dei placeholder nei campi per risparimiare lo spazio delle label.
Demo responsive avanzato html.it :
http://www.html.it/guide/img/responsivedesign2/demo/start/index.html
http://www.html.it/guide/img/
Media Queries
Come di seguito, i tipi di media definiti nelle mediaqueries sono:
- all
All devices
Matches printers, and devices intended to reproduce a printed display, such as a web browser showing a document in “Print Preview”.
- screen
Matches all devices that aren’t matched by print or speech.
- speech
Matches screenreaders and similar devices that “read out” a page.
(riferimenti)