In questo articolo spiegheremo velocemente e in modo efficace come realizzare un layout grafico responsive per il vostro sito web.

Il termine responsive indica semplicemente il fatto che un layout grafico è realizzato utilizzando alcuni accorgimenti CSS per permettere una migliore, e più efficace, navigazione del sito da parte degli utenti che utilizzano device come tablet e smartphone.

Naturalmente l’ideale sarebbe quello di avere, in questa fase, sotto mano sempre entrambi i sopracitati per effettuare tutti i test sul campo, oltre al caro e fedelissimo PC ovviamente.

Il concetto alla base dell’ implementazione di un layout responsive è quello di predisporre alcune regole che diranno al browser quale file CSS sarà applicato in tutte le diverse situazioni che dovrà affrontare.

E’ buona cosa considerare la fase di montaggio in CSS/XHTML già inizialmente quando si progetta lo stile del layout con il programma grafico preferito, che sia Photoshop, Fireworks o altri, quindi conviene studiare una demo specifica per ogni device, naturalmente partendo da quella per desktop.

Anche lo stesso HTML andrà posizionato tenendo conto di questi fattori determinati dal CSS, soprattutto ricordate sempre che per lavorare in responsive è meglio avere dimestichezza con un tipo di approccio di layout fluido (se siete abituati a specificare sempre i pixel vi consiglio di cominciare quanto prima a perdere questa brutta abitudine).

Effettivamente i layout responsive sono una sorta di evoluzione dei layout fluidi, questo per venire in contro al crescente uso che si fa di cellulari e tablet per navigare su internet.

Incominciamo e buttiamo giù un po di codice.

Dentro il nostro file CSS non dovremo fare altro che indicare al browser quali precedenze dovrà utilizzare e quindi applicare al rendering della pagina.

[css]
@media all and (min-width:600px){
aside.first{
width:50%;
float:left;
}
aside.last{
width:50%;
float:right;
}
}
@media all and (min-width:960px){
content{
width:60%;
float:left;
margin-left:20%
}
aside.first{
width:20%;
margin-left:-80%;
float:left;
}
aside.last{
width:20%;
float:right;
}
}
[/css]

Come potete vedere nel codice qui sopra abbiamo indicato con la direttiva “@media all and (min-widht:600px)” tutte le proprietà che avranno la priorità rispetto al resto del css nel caso in cui la risoluzione dello schermo dell’utente sia inferiore a 600 pixel.
Lo stesso discorso vale per la seconda versione, in questo caso però la larghezza minima sarà di 960 pixel.
Questo significa che il secondo blocco sarà considerato in tutte le risoluzioni che vanno da 601 a 960 pixel.

Come potrete immaginare questo semplice parametro ci spiana la strada ad una miriade di applicazioni, potremo, con questo strumento costruire diverse versioni del nostro sito web e saremo sicuri che ognuno di essi risponderà come effettivamente è stato da noi pensato.

E’ possibile utilizzare anche “media screen” in alternativa a “media all“, ma il secondo caso è più corretto perché include tutte le modalità possibili mentre il primo è utilizzabile nel caso in cui abbiamo la necessità di fare distinzione rispetto ad altri device come stampanti (media print), proiettori (media projection), device tattili (media braille) e sintetizzatori vocali (media speech).

Come avrete notato dal codice CSS in questo banalissimo esempio si fa assoluto uso delle percentuali, questo perché il layout responsive, come dicevamo si basa sul concetto del layout fluido, infatti bisogna ragionare sempre e il più possibilmente con questi accorgimenti.