Web e Code Script

10 suggerimenti per il Responsive Design

media-queries

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.

responsive-design

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">

responsive

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.




emoticons

avatar
Autore: Valerio Del Re

Dott. in Comunicazione e Pubblicità per le Organizzazioni,
Grafico e Web Designer freelance, CEO presso Robadagrafici


Cosa ne pensi? Esprimi la tua opinione.
Scrivi un commento.

Loading Facebook Comments ...

Ti potrebbero interessare anche:


font-awesome

Icon Font Awesome. Come inserire sul sito icone tramite font

Le icone sono ormai uno standard per chi realizza siti internet. Permettono infatti un’ottima personalizzazione per lo stile […]


testare-sito-mobile-online

Testare sito mobile online. Effettua il test con Google

Se sei un webdesigner sicuramente nell’ultimo periodo ti starai dedicando allo studio della tecnica del responsive design. Un […]


orologio-esadecimale

What colour is it? L’orologio esadecimale

Oggi vi segnalo un sito creativo, da veri nerd, per appassionati di grafica e web. Si tratta del […]


sfumature-css3

Come creare una sfumatura con CSS3

CSS3 ha tantissime potenzialità che ogni web designer dovrebbe conoscere per evitare di fare un uso spropositato di […]


css3-box-shadow

Ombra CSS3. Come aggiungerla a testo, div e immagini

CSS3 è una rivoluzione. Ci permette di aggiungere tanti effetti grafici agli oggetti presenti nelle nostre pagine web, […]


css3-border-radius

Come smussare angoli di immagini e div con CSS3 Border Radius

Con Html5 e CSS3 il mondo del web ha fatto un notevole passo avanti, offrendo un’esperienza più ricca […]


mappa-vettoriale-jquery

Mappa del mondo con ingrandimento in jQuery

Creare una mappa navigabile per il sito internet è diventata ormai pratica comune, specialmente quando si tratta di […]


atlas

Arriva Atlas, la concorrenza di Facebook a Google

È ufficiale: Google ha un concorrente. Si chiama Atlas ed è di proprietà di Facebook. Quest’ultimo aveva acquistato […]


jquery-document-ready-function

La base della sintassi di jQuery: $(document) .ready()

Se vi state avvicinando da poco a jQuery e state iniziando a studiarlo, avrete notato che spesso il […]


php-if-else

PHP: gestire le condizioni con le istruzioni if e else

Se state realizzando un sito nel linguaggio di programmazione Php, magari con il CMS WordPress, imparare a gestire […]


Shares

Robadagrafici.com non è una testata giornalistica in quanto viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi prodotto editoriale ai sensi della legge 62/2001. Le immagini e i testi pubblicati sono valutati come di pubblico dominio: qualora il loro uso violasse diritti d'autore, lo si comunichi all'autore del blog che provvederà alla loro pronta rimozione.
Tutti i contenuti sotto Licenza Creative Commons. Marchi e loghi di soggetti terzi utilizzati in questo sito sono di proprietà esclusiva dei rispettivi proprietari.
Roba da Grafici © 2011-2016 - Progetto a cura di ServiziWeb Srl - Privacy & Cookies Policy