2.641 views

Il responsive design è più di una semplice moda, consiste in una serie di strumenti e di tecniche che si utilizzano per modificare il modo in cui le informazioni vengono visualizzate dall’utente in base al dispositivo che sta usando.

responsive_web_design

La chiave sta proprio nel modo in cui il sito “risponde” alle caratteristiche del dispositivo che si utilizza e mostra le informazioni nel miglior modo possibile. La risposta è la chiave di tutto.

Ecco dunque una lista di dieci semplicissimi consigli per realizzare un sito fruibile da ogni dispositivo:

1) Mantieni un layout semplice

Sembra un consiglio banale e ovvio ma non è così. Cerca di mantenere sempre pulito il codice HTML della tua pagina. Per capire se lo stai facendo nel modo giusto basta aprire la tua pagina senza nessun foglio di stile (.css). Se sei in grado di leggere facilmente tutti i contenuti probabilmente stai andando nella giusta direzione.

Evita:
  • Evita di utilizzare una struttura intricata e non necessaria di <div>;
  • Evita di assegnare gli stili direttamente dai tag HTML (esempio: <div style=”background: white;”>);
  • Evita assolutamente l’utilizzo di Flash;
  • Evita di utilizzare attributi come float senza che sia necessario;
  • Evita qualsiasi linea di codice che sia ridondante.
Usa:
  • Usa il doctype per l’HTML5 e seguine le linee guida;
  • Scrivi un codice pulito e semantico;
  • Utilizza un layout più semplice possibile per quanto riguarda le parti critiche come la barra di navigazione ed i menù.

 

2) Usa le media queries

Se non hai idea di cosa siano queste media queries, di cui sicuramente avrai sentito parlare, pensale come del codice che permette al sito di attivare o disattivare vari stili nel tuo foglio di stile.

Se vogliamo scrivere del codice che si trasformi in un sito responsive, l’elemento sul quale dobbiamo concentrarci è la larghezza, la width.

Esempio:

Se vogliamo che una determinata azione si verifichi solamente quando l’utente visualizza la pagina da un dispositivo che abbia una risoluzione compresa fra i 200 e i 640 pixel di larghezza, basterà inserire le opzioni all’interno della media querie:

@media screen and (min-width: 200px) and (max-width: 640px)

Tutti le opzioni di stile che saranno scritte all’interno di questa querie si verificheranno solamente quando la risoluzione del dispositivo sarà compresa nella fascia che abbiamo prestabilito.

 

3) Scegli quali sono le fasce di risoluzioni più comuni

Le risoluzioni più comuni possono essere divise in sei fasce. Vediamole rapidamente:

  • Indispensabili:
    • <480 px – Si può prendere questa fascia (tutti i dispositivi con una risoluzione inferiore a 480 pixels) come riferimento per i primi smartphone, orientati in verticale;
    • <768 px – Smartphone di fascia alta e iPad orientati in verticale;
    • >768 px – Qualsiasi cosa che abbia una risoluzione maggiore a quella di un iPad;
  • Meglio avere anche:
    • <320 px – Stiamo quasi parlando dell giurassico, risoluzioni inferiori a 320px. Se le prendiamo comunque in considerazione non ci fa certo male;
    • 768 – 1024 px – Possiamo considerare in questo range di dispositivi gli iPad in modalità “landscape” ed altri tablet con alte risoluzioni;
    • >1024 px – Da qui in poi comincia la zona dei desktop, qui potete cominciare a sbizzarrirvi con gli stili.

 

4) Rendi il tuo layout fluido

Se vuoi che il tuo sito sia responsive devi disegnare il tuo layout su una griglia flessibile dove le dimensioni non sono date da pixel ma siano date in percentuale per fare in modo che il sito si adatti a tutte le differenti dimensioni di viewport.

fluid-layout

Un layout fluido è il miglior modo per far si che il proprio layout sia pronto ad ogni tipo di schermo.

5) Utilizza un Framework

Il modo più semplice di realizzare un layout responsive è sicuramente quello di costruire la struttura del nostro sito con l’aiuto di un framework. Se non sai cos’è un framework pensalo come un insieme di librerie che sono già pronte da utilizzare. Insomma Il codice è stato già tutto pensato e gli è stato assegnato uno stile, devi solo sapere dove posizionarlo.

Tra i framework, per un design responsive, più famosi ricordiamo:

– Bootstrap

bootstrap

 

– Foundation

zurb

Gumby

gumpy

Skeleton

html5_framework_03skeleton

Questi framework sono tutti gratuiti. Aspettali e poi dicci qual’è il tuo preferito!