Da circa un paio di anni il mondo web ha sposato la grafica “responsive“, ossia la possibilità offerta dall’HTML5 + CSS3 di adattare il layout dei siti web al dispositivo che li sta leggendo.
Come lavorano quindi i fogli di stile per poter offrire la maggior user experience di navigazione in base a COSA si sta utilizzando per navigare?
Innanzitutto vediamo quali sono le risoluzioni degli schermi attuali:
- 320 pixel: device con schermi piccoli – orientamento verticale (portrait)
- 480 pixel: device con schermi piccoli – orientamento orizzontale (landscape)
- 600 pixel: device come ad esempio tablet con orientamento verticale
- 768 pixel: tablet da 10 pollici (ad esempio Ipad e Samsung) con orientamento verticale
- 1024 pixel: computer desktop, laptop, notebook e tablet come l’iPad e Samsung (1024×768) mantenuti con orientamento orizzontale
- 1200 pixel: computer con schermi larghi, desktop ma anche laptop
In secondo luogo occorre pensare ai vari contenuti delle pagine del sito:
- Header: la parte in alto sempre uguale e sempre presente su ogni pagina del sito web
- Logo: normalmente in alto a sinistra
- Navigazione: il cuore del responsive. Con alte risoluzione normalmente i link sono i “splittati” e si vedono senza necessità di click. Nelle versioni a più bassa risoluzione, come ad esempio telefoni e tablet, sono “sintetizzati” in un menù da “toccare” per farlo aprire: generalmente si usano 3 lineete denominate HAMBURGER MENU.
- Eventuale Slider Immagini: molto utilizzate della grafica 3.0 ; sono davvero indispensabili con la navigazione da mobile? Se no si possono togliere
- Area contenuti: si rende fluida, affinchè le varie sezioni possano “scivolare” in base alla risoluzione dello schermo
- Footer: la parte in basso dei siti web, normalmente contiene i riferimenti aziendali.
Fatte queste analisi siamo in grado di scegliere, insieme al nostro grafico web, come costruire la nostra Home Page e le pagine internet, definendo a quale risoluzione vogliamo far comparire l’hamburger, quando vogliamo vedere o meno dei contenuti.
Un esempio di CSS:
Queste scelte si inserisocno nel foglio di stile (CSS Media Queries) fissando i cosiddetti Brekpoints
In questo esempio chiarificatore prospettiamo una pagina che , a seconda della risoluzione, cambia colore di sfondo.
Con questo “gioco” si capisce con facilità visualizzando la seguente pagina che riporta quanto schematizzato in questa immagine:
Provate a ridurre le dimensioni dello schermo per visualizzare i cambiamenti! Chiaramente l’ultimo colore verde lo si può vedere da cellulare solo. Provate inoltre a girare il telefono in orizzontale (landscape)
Di seguito il codice utilizzato per fissare i brekpoints delle varie risoluzioni dello schermo cambiandone lo sfondo.
body
{
margin: 0;
padding: 0;
background: #eb8e15;
}
@media screen and (max-width: 320px)
{
body {background:#FF8000;}
}@media screen and (min-width: 321px) and (max-width: 481px)
{
body {background:#bbeb15;}
}
@media screen and (min-width: 481px) and (max-width: 769px)
{
body {background:#15ebde;}
}
@media screen and (min-width: 769px) and (max-width: 1024px)
{
body {background:#eb15e3;}
}
Fluido o boxed?
Non ultimo pensiamo se vogliamo un layout FLUIDO o BOXED: ecco due esempi che possono chiarire con maggior semplicità:
Esempio di layout FLUIDO
Esempio di layout BOXED
Conclusioni
Google dal 21 Aprile 2015 premia i siti web che sono “Mobile Friendly”: ecco lo strumento di verifica di Google