css, programmazione web, Responsive Design, sito web, Web Design

Web Design: l’importanza di chiamarsi… Responsive!

Il web è in costante evoluzione e i dispositivi con i quali oggi vi si accede sono molteplici: dal computer wide screen al notebook, dal tablet allo smartphone.

Le risoluzioni sono differenti, non pensiamo più a siti con larghezze statiche come i vecchi design 800 pixel per 600 pixel o con una larghezza che non superi i 1024 pixel.

Per questo motivo realizzare siti con un design statico non è più possibile ed è nato il bisogno di progettare siti web con un design fluido, che si adatti al dispositivo come l’acqua in un contenitore.

Content is like Water Responsive Design
“Content is like Water” Responsive Design – Fonte: Pinterest

Questo principio è alla base del responsive design.

Il responsive design, o design responsivo, nasce da questa esigenza di avere siti leggibili e ottimizzati nella visualizzazione in base al dispositivo da cui si visitano.

Ma come si realizza un sito responsive?

Innanzitutto la base è il css o foglio di stile, nel quale vengono definiti alcuni step che identificano le risoluzioni dei dispositivi: i breakpoint.

Si può agire in varie maniere ma quella che posso suggerirvi è associare due file css al vostro html (o php o asp.net):

  • il file style.css nel quale inserirete tutte le classi e identificativi con proprietà e attributi di base dello stile del vostro sito;
  • il file responsive.css nel quale inserirete solo le classi e gli identificativi che subiranno variazioni in base al dispositivo.

Il file responsive.css avrà quindi al suo interno tutti i breakpoint necessari alla visualizzazione sui dispositivi, che possiamo indicativamente suddividere con questo criterio:

  • smartphone verticale: larghezza massima 320 pixel;
  • smartphone orizzontale: larghezza massima 480 pixel;
  • smartphone e tablet con misure intermedie: dai 481 pixel ai 767 pixel;
  • tablet verticali (ad esempio iPad): dai 768 pixel ai 1023 pixel;
  • tablet orizzontali o monitor PC piccoli: dai 1024 pixel ai 1200 pixel;
  • monitor wide: dai 1201 pixel a salire.

Questa è una divisione indicativa, sapendo che i modelli di smartphone e tablet sono in crescita e hanno una costante evoluzione e miglioramento delle risoluzioni.

Come inserire i breakpoint nel css per ottenere un responsive design?

Dopo la dichiarazione del file css è bene inserire un commento, inserendo /* all’apertura e */ alla chiusura, nel quale identificate il tipo di css e il tipo di dispositivo per cui state adattando il design. Seguirà la dichiarazione del tipo di supporto @media screen con la definizione delle larghezze minime e massime.

Vediamo come in questo esempio:

/* CSS Responsive Design */
/* smartphone verticale */
 @media screen and (max-width: 320px){
   .my-class{
   }
   #my-id{
   }
 }
 /* smartphone orizzontale*/
 @media screen and (min-width: 321px) and (max-width: 480px){
   .my-class{
   }
   #my-id{
   }
 }
 /* misure intermedie smartphone e tablet */
 @media screen and (min-width: 481px) and (max-width:767px){
   .my-class{
   }
   #my-id{
   }
 }
 /* tablet */
 @media screen and (min-width: 768px) and (max-width:1023px){
   .my-class{
   }
   #my-id{
   }
 }
 /* iPad e monitor piccoli*/
 @media screen and (min-width: 1024px) and (max-width:1200px){
   .my-class{
   }
   #my-id{
   }
 }
 /* monitor wide */
 @media screen and (min-width: 1201px){
   .my-class{
   }
   #my-id{
   }
 }

Si ma una volta realizzato il css, come farete a testarlo?

Si possono utilizzare differenti tecniche:

  • utilizzare il browser stesso, ridimensionando la sua larghezza
  • utilizzare dei plugin o delle estensioni per web designer, come “Web Developer” per Chrome
  • utilizzare dei simulatori, come Responsinator e iPadPeek.
  • utilizzare i dispositivi a nostra disposizione

Perchè è importante avere un sito responsive?

Questa infografica lo spiega benissimo:

  • attualmente il 25% degli utenti accede a internet da mobile;
  • non si ha bisogno di siti mobile dedicati, quindi si ha un solo codice al quale si associa il css responsive e non un numero indefinito di css per ogni dispositivo;
  • migliora la SEO ed è caldamente consigliato da Google;
  • si prevede che entro la fine del 2014 gli utenti mobile supereranno gli utenti desktop.
Responsive Design Infografica
Responsive Design Infografica – Fonte: Pinterest

Ma… il vostro sito è responsive? 😉

Annunci

6 thoughts on “Web Design: l’importanza di chiamarsi… Responsive!”

    1. Bravo 🙂
      Anche l’approccio di inserire le media queries nel css principale è corretto.
      Il mio consiglio, soprattutto per i neofiti, è di separare i file utilizzando un css per il responsive, per individuare a colpo d’occhio dove fare le modifiche, senza perdersi in migliaia di righe di codice.
      Alla fine il css è come un vestito. C’è a chi piace l’abito lungo e a chi piace lo spezzato 🙂

  1. Salve
    Aiuto….Non ho ancora capito dove diamine devo copiare il codice per rendere il mio sito responsive.
    nel foglio style.css ? ma dove ?
    grazie 1000 per l’aiuto

    1. Ciao Federico, per rendere il tuo sito responsive puoi fare in due modi, come spiegato nell’articolo:
      1) copi il codice nel file style.css o comunque nel tuo css principale
      2) crei un altro file, ad esempio responsive.css, che dovrai linkare nella head e in cui copierai il codice.
      Tutto chiaro?
      🙂 Buona giornata

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...