• Italiano

Il responsive design: come il vostro sito è visto dai telefoni

Data articolo: 21 07 2016

Il responsive design: come il vostro sito è visto dai telefoni

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.

    menu dei link da cellulare

    Esempio menu dei link da cellulare

  • 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:

Esempio cambio sfondo in base a risoluzione schemro: LAYOUT responsive

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

 

 

Per rimanere aggiornati iscrivetevi alla nostra newsletter