10 suggerimenti per il Responsive Design

Abbiamo parlato di responsive design già da parecchio tempo. E’ una tecnica decisamente utile ed innovativa, con cui molti di voi si saranno già cimentati, altri invece saranno ancora un pò impauriti ed aspetteranno il momento giusto per iniziare.

Questo articolo ha l’obiettivo di aiutarvi nella comprensione di questo strumento, dandovi qualche suggerimento che di sicuro vi tornerà utile nella progettazione e realizzazione dei vostri siti responsive, che adattano un singolo layout ai vari dispositivi con i quali viene visualizzato.

1. Rendi il tuo layout semplice

Rendere il layout ed il codice html il più semplice possibile è la prima cosa da fare. Prova ad eliminare temporaneamente lo stile css dalla pagina del tuo sito, se il contenuto è facilmente leggibile, allora sarà valido.

Evita div intricati, stile css nella pagina, l’uso del codice javascript o di flash, posizionamenti inutili attraverso float ed absolute, contenuto ridondante e quindi inutile.
Mantieni piuttosto il tuo codice pulito e semplice, facendo a meno di effetti speciali realizzati con css3 e js per quanto riguarda le parti critiche del layout.

2. Utilizza le Media Queries

Le Media Queries sono lo strumento principale per il funzionamento dei siti responsive e sono molto semplici da utilizzare. Attraverso di esse puoi applicare stili differenti in base alla larghezza dei dispositivi con i quali si visualizza il sito.

/* Stili di base - Mobile first */
  body { ... }

@media screen and (min-width: 480px) {
  body { ... }
}

@media screen and (min-width: 768px) {
  body { ... }
}

@media screen and (min-width: 1024px) {
  body { ... }
}

@media screen and (min-width: 1200px) {
  body { ... }
}

3. Definisci i Breakpoints

Quando realizzate un sito potrete scegliere voi stessi a quale dimensione far modificare il layout del vostro sito. Decidere quindi i punti di rottura (breakpoints) in cui il vostro sito si trasforma. I principali sono:

<480 (minore di 480px) >480 e <768 (maggiore di 480px e minore di 768px) >768 e <1024 (maggiore di 768px e minore di 1024px) >1024 e <1200 (maggiore di 1024px e minore di 1200px) >1200 (maggiore di 1200px)

4. Rendi flessibile il tuo layout

Le griglie flessibili usano le colonne per organizzare il contenuto e larghezze percentuali invece che fisse per adattarsi automaticamente ai dispositivi.

Un layout fluido è il modo migliore per adattarsi secondo le dimensioni e l’orientamento dello schermo.

5. Rendi fluide le tue immagini

Un semplice stile renderà le vostre immagini fluide, ossia adattabili alle dimensioni del layout. Basta impostare la larghezza dell’immagine a 100% {width:100%;} o impostare la larghezza dell’immagine fino ad un massimo di 100% {max-width:100%;}

6. Non dimenticare minimo e massimo

Utilizza min e max come confini in modo da gestire al meglio il tuo layout, specie per evitare che questo appaia poco gradevole in dimensioni troppo piccole o troppo grandi.

7. Rendi relative la maggior parte delle cose

I metodi migliori sono due e si basano su unità cui tutti i contenuti fanno poi riferimento: il metodo a cascata % ed il metodo em (emphemeral unit).

Il metodo a cascata % definisce un contenitore con dimensione fixed o fluid e calcola ogni elemento interno ad esso in percentuale (quindi la dimensione, il margin, il padding).

Il metodo em definisce invece un font-size nel body, cui ogni elemento fa riferimento. Se ad esempio impostiamo font-size=16px e impostiamo la larghezza a 30em, il suo equivalente in pixel sarà 30em x 16 = 480px. Ricorda quando usi em che legge fino ad un massimo di 3 numeri decimali.

8. Linearizza il sito mobile

Organizza i contenuti del tuo sito mobile su una colonna unica. Farlo è semplice, non devi fare altro che assegnare in css ad ogni colonna la larghezza 100%, andando poi ad affinare piccoli problemi che potrebbero sorgere ad esempio dai margin.

9. Elimina contenuti non indispendabili

Sempre in ambito mobile, il sito va decisamente sfoltito, vanno eliminati i contenuti non essenziali. La fruizione dei contenuti tramite cellulare deve essere veloce ed essenziale, non deve affaticare nè il telefono, nè la lettura da parte dell’utente.
Un’ottima idea è quella di applicare una .not_mobile class agli elementi non essenziali del layout cui associare il seguente codice.

@media screen and (max-width:300px) {
.not_mobile { display:none; }
}

Questi contenuti potrebbero poi essere mostrati su richiesta cliccando su un apposito tasto.

10. Verifica il lavoro realizzato su vari dispositivi

Ovviamente importantissimo il lavoro di controllo dei risultati ottenuti. Prova sui dispositivi a tua disposizione a verificare come viene visualizzato il tuo sito. Ci sono anche dei siti molto validi per testare il funzionamento dei siti responsive.

Il consiglio è di inserire nell’head del sito una piccola riga di codice, che costringe i browser a mostrare la dimensione reale del dispositivo, senza che possano scegliere loro come mostrare il tuo sito.

<meta name="viewport"
content="width=device-width">

Conclusioni

Spero che questi piccoli suggerimenti siano stati per voi utili a capire meglio i meccanismi del responsive design e che possano essere da stimolo, spronandovi a cimentarvi in questa tecnica che rappresenta il futuro, ma già il presente del web design.