Personalmente, non sono daccordo con l’approccio MOBILE FIRST (ovvero una progettazione web che parta dalla visualizzazione del sito web sui dispositivi mobili), penso che il sito internet debba essere progettato sempre a partire dai suoi contenuti (content is the king!) e sulla base dei contenuti, debbano essere compiute le scelte di progettazione e di web design, tenendo anche in conto degli obiettivi specifici che il sito internet si pone e dei processi di navigazione dell’utenza, avremo modo di tornarci in futuri post dedicati alla user experience.

Detto questo….. resta valido che

Sviluppare un sito web responsive è fondamentale, tutti i dati e tutti i “guru del web” convengono che il traffico mobile sia in netta ascesa e sia quindi necessario e fondamentale tenerne conto.

A livello di web design, i principi cardine di un sito web responsive (sito internet responsivo in italiano) sono, a mio giudizio 5, ovviamente sto parlando di aspetti di “base” per progettare un sito web responsive e per ottenere un sito internet usabile ed una grafica che si adatta a tutti i dispositivi (o alla gran parte dei dispositivi), un approccio (quello del  web design responsive) che permette ad un layout di “rispondere e adattarsi” al dispositivo con cui l’utente sta visualizzando il sito internet, così da reagire bene sia che si tratti di uno schermo per PC Desktop sia che si tratti di un Tablet o di uno Smartphone.

Per responsive design si intende:

“Il design responsivo, o responsive web design (RWD), indica una tecnica di web design per la realizzazione di siti in grado di adattarsi graficamente in modo automatico al dispositivo coi quali vengono visualizzati (computer con diverse risoluzioni, tablet, smartphone, cellulari, web tv), riducendo al minimo la necessità dell’utente di ridimensionare e scorrere i contenuti.” (definizione di responsive design tratta da wikipedia.org)

Il primo articolo a parlare di responsive web design è uscito nel 2010 eccolo “Responsive Web Design by Ethan Marcotte May 25, 2010” (in lingua inglese).

Quali sono le “basi” nella progettazione di un sito web responsive?

Nei miei corsi di formazione dedicati a questo argomento, li suddivido in 5 aspetti/caratteristiche che un buon design deve necessariamente avere, certo non esauriscono l’argomento del design responsivo ma penso che siano le basi fondamentali da cui partire nella progettazione del nostro sito internet se vogliamo che si adatti ai vari dispositivi:

1. Definire il viewport
2. Definire i breakpoint tramite le cd CSS media-queries
3. Fare in modo che le immagini si adattino alla risoluzione schermo dell’utente
4. Progettare e lavorare su una tipografia responsive
5. Dotarsi di strumenti che facilitino e semplifichino il testing sui vari browser del nostro design responsive

Cominciamo quindi dal chiarire cosa si intende per VIEWPORT (e relativo meta-tag viewport da aggiungere sempre nel nostro progetto di layout responsive)

1. Il viewport (l’area rettangolare per la visualizzazione che è ovviamente variabile a seconda del dispositivo)

Ci sarebbe tanto da dire sul viewport, ma per capirlo possono bastare un paio di semplici concetti.

Dobbiamo partire dalla considerazione che ogni volta che noi guardiamo una pagina web (su un tablet o su uno smartphone ad esempio) il browser (qualsiasi sia il nostro browser preferito) adatta in modo automatico le dimensioni (la grandezza) della sua area di visualizzazione (la cd viewport) per provare a sistemare al meglio il layout della pagina, anche se questa è concepita per essere visualizzata su dispositivi desktop.

Se quindi la pagina è ottimizzata solo per dispositivi desktop e proviamo a visualizzarla sul nostro cellulare il browser cerca di farci vedere “tutta la pagina” e quindi la riduce di molto e costringe l’utente ad utilizzare lo zoom per leggere i contenuti della pagina, comportamento questo non in linea con i principi base dell’usabilità e della fruizione del contenuto di una pagina internet.

Se vogliamo che il sito internet si adatti ai cellulari e che quindi il nostro layout segua i principi del responsive design questo comportamento “predefinito” dei browser va EVITATO.

A livello di web design ci basterà inserire nella HEAD html della nostra pagina il meta tag viewport.

Grazie a questo meta tag siamo noi web designer ad indicare ai browser il modo in cui dovranno “trattare e gestire” la viewport.

In questo modo possiamo evitare che l’utente sia costretto a zoomare la pagina per leggerne il contenuto ed il controllo del layout passa dunque nelle nostre mani!!!
Ed evitiamo che siano le impostazioni predefinite del browser ad occuparsene.

Questo è quindi la prima cosa da fare quando si vuole realizzare un layout responsive di una pagina web:

AGGIUNGERE NEL TAG HEAD IL META-TAG viewport, questa l’istruzione minima necessaria (ci sono altre istruzioni che possiamo usare e che approfondirò in un prossimo post, qui mi interessa chiarire le impostazioni basilari di un web design responsivo):

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

questo meta-tag va ovviamente nell’HEAD

In sostanza, tramite questo meta stiamo dicendo al browser (Firefox, Explorer, Chrome ecc.) di impostare la width (la larghezza) della viewport sulla base della larghezza del dispositivo sul quale l’utente sta visualizzando la pagina.

Per avere una idea delle “viewport sizes” dei differenti dispositivi, rimando a questo sito web:
http://viewportsizes.com/

In questo modo l’utente non dovrà zoomare la pagina perchè questa si adatterà alla grandezza del suo schermo. Il risultato sarà che l’utente potrebbe (in mancanza di opportuni aggiustamenti lato css di cui parleremo nel prossimo post) visualizzare solo una parte della pagina web.

Per questo è necessario che il design di ADATTI alle varie risoluzioni, posso farlo utilizzando le cd “media-queries” che mi consentono di individuare dei breakpoint (delle risoluzioni base) in cui il layout grafico subisce degli adattamenti e cambia ottimizzandosi al meglio per i vari dispositivi.

E’ fondamentale quindi progettare i breakpoint e quello che succede PRIMA di pensare al layout grafico, partendo quindi dai contenuti della mia pagina!

Il secondo principio BASE del web design responsive ovvero la progettazione delle media-queries e dei breakpoint.

2. Le media queries (CSS)

Le media queries consentono (tramite i CSS Cascading Style Sheets, in italiano fogli di stile a cascata) di definire dei breakpoint in cui il design della pagina web cambia e varia.

A livello di progettazione web è infatti fondamentale definire cosa avviene sulla grafica della pagina al variare delle “risoluzioni” schermo, definendo appunto i breakpoint.

Facciamo un esempio, consideriamo tre risoluzioni principali:

• Desktop (per esempio risoluzione 1150 px di larghezza)
• Tablet (per esempio risoluzione 768 px di larghezza)
• Smartphone (per esempio risoluzione 480 px di larghezza)

Ognuna di queste risoluzioni potrebbe essere un breakpoint (impostabili con le media queries dei CSS).

Tramite i fogli di stile possiamo definire cosa cambia nel layout della pagina allo “scattare” di  ciascuno dei tre breakpoint.

Il layout grafico può quindi modificarsi, per esempio:

• nella versione desktop (risoluzioni per i PC) il layout della pagina internet potrebbe svilupparsi su tre colonne,
• nella versione per tablet (secondo breakpoint che scatta quando la risoluzione del monitor scende a 768 px) l’impaginazione mostra due sole colonne,
• nell’ultimo breakpoint, di questo semplice esempio, il layout della pagina invece diventa mono-colonna, sviluppandosi in modo lineare su una unica colonna.

Questo è solo un esempio, ma mi serve per chiarire che grazie alle media queries (CSS) posso definire dei “punti di rottura” (breakpoint) in cui, sempre tramite i fogli di stile, posso far cambiare anche NOTEVOLMENTE il layout della nostra pagina web.

E’ naturalmente fondamentale PROGETTARE I BREAKPOINT, per esempio con dei wireframe (bozzetti) in cui decidiamo quali saranno gli “oggetti” da visualizzare nella pagina in corrispondenza di ciascuno dei breakpoint che ho definito.

Come impostare le media queries nel nostro CSS

Abbiamo definito un Breakpoint come, un punto di interruzione a partire dal quale vengono applicati dei cambiamenti agli stili della pagina.

Esempio di codice CSS per le nostre media queries in corrispondenza di unbreakpoint:

@media only screen and (min-width: 480px) {
/* Qui inseriremo le regole CSS che cambiano rispetto al foglio di stile generale del nsotro sito web, quando "scatta" una determinata risoluzione minima, esempio 480px di larghezza */
}


3. Immagini “elastiche” al variare della risoluzione schermo dell’utente

Un altro aspetto fondamentale (dopo breakpoint e viewport) riguarda le immagini che fanno parte del nostro sito web. E’ importante che le immagini si adattino alle varie risoluzioni (definite in fase di progettazione del mio layout di pagina), siano quindi fluide così da evitare che la pagina subisca una “spaginazione” se l’utente la visualizza su uno “schermo piccolo” 😉

La proprietà max-width dei CSS ci viene in aiuto in quanto consente di definire una larghezza fluida alle immagini.

Per avere immagini fluide e quindi “adattive” rispetto al contesto in cui sono inserite ricorriamo ad una semplice regola CSS, ad esempio:

img {max-width: 100%;}

Impostando questa regola, la dimensione orizzontale di un’immagine sarà sempre pari a quella dell’elemento che la contiene. Il contenitore si restringe? L’immagine si restringe con lui. E viceversa. Con questa semplicissima regola di foglio di stile riesco ad avere immagini (quando mi serve per la mia grafica) che si adattano ai contenitori.

Detta in altro modo, usando l’istruzione CSS “max-width: 100%“, quando l’immagine è più piccola del suo contenitore, mantiene le sue dimensioni originarie, scatta la “dimensione 100% in larghezza” solo quando l’immagine eccede le dimensioni del suo contenitore, cosa che può avvenire quando la risoluzione schermo scende (per esempio su un Iphone o su un dispositivo android come per dirne uno un samsung s6).

4. Definire la tipografia (titoli, paragrafi, testi) in modo elastico

Il suggerimento basilare a livello di progettazione grafica di una pagina internet responsive, è quello di utilizzare per la definizione della grandezza dei testi (font-size in CSS) l’unità di misura EM e non i PX.

Gli em sono una misura relativa, scritta come: 1em, 0.5em, 1.5em ecc. Gli em possono essere specificati con fino a tre cifre decimali, per esempio:
1.063em.

Quindi sono diversi dall’esprimere in PIXEL le dimensioni dei caratteri. I pixel sono una dimensione FISSA per i testi del sito web, gli em invece sono una dimensione flessibile e quindi si “adattano” a seconda del dispositivo e del contesto in cui sono stati definiti. Sono quindi responsivi e costituiscono, a mio giudizio, un altro elemento fondamentale nella progettazione di un sito web responsive.

Tipografia “Relativa/elastica” significa, detta in altre parole:
Le dimensioni di un testo vengono calcolate in base alla dimensione del testo dell’elemento genitore (ovvero l’elemento che contiene un determinato contenuto testuale).

Per esempio:
se un elemento HTML <div> ha una dimensione di font calcolata in 16px ogni elemento al suo interno – quindi ogni elemento HTML figlio –  eredita la stessa dimensione del font del suo elemento html padre, a meno che tale dimensione non venga cambiata (con una nuova istruzione font-size), ricordiamoci sempre che l’html è “gerarchico”. Se la dimensione del font nell’elemento figlio viene cambiata in 0.75em allora la dimensione calcolata sarà 0.75 × 16px = 12px.

font-size: 0.75 em;

Qui un comodo tool per convertire gli em in pixels qualora, come designers, siate abituati ad esprimere le dimensioni delle font in pixel:
http://v1.jontangerine.com/silo/css/pixels-to-ems/

Ad ogni modo la formula è molto semplice (per convertire pixel in unità di misura “em”):

1em = 16px.
Quindi, 1pixel = 1 ÷ 16 = 0.0625em

5. Responsive web design: qualche tool per testare il nostro layout grafico responsivo.

I tools da utilizzare per effettuare dei test del nostro layout responsive e quindi facilitare le operazione di debug grafico sono tantissimi e prometto di dedicare uno o più post in futuro a questo importante aspetto, come progettista e consulente web, dedico sempre molta attenzione a come il sito web si visualizza su tutti i dispositivi a prescindere dalle loro “risoluzioni”.

Mi limito a citarne alcuni, ma prometto di approfondire in seguito tutti questi importanti tools per aiutare a testare siti web responsive:

• Ispezione elemento del browser Chrome, utilissimo in quanto consente di simulare la navigazione di una qualunque pagina internet con un dispos9tivo mobile (tablet, smatphone).
• Analizza elemento di Firefox (come Chrome, funzionamento similare)
• Opera mobile emulator (software)
• Responsive testing: http://responsivetest.net
• Altri tools online per testare se il proprio sito web è responsive:
  http://ami.responsivedesign.is/
  https://www.responsinator.com/

La lista di tools utili al debug delle proprie pagine per capire come rispondono sui vari device mobili potrebbe continuare ancora, esistono anche tantissimi plugin sia per Chrome che per Firefox che possono aiutare il testing del sito web su differenti dispositivi mobili, per il momento mi fermo ad indicare questi. E’ un aspetto, quello dei tools per i testing, molto importante considerando il numero di dispositivi mobile attualmente in commercio e i tantissimi browser disponibili per Android, Iphone, Windows Phone.

Ripeto, non voglio certo dire che  la progettazione di un sito internet “responsive” si limiti a questi semplici aspetti, ma penso che siano gli elementi fondamentali da cui partire quando vogliamo costruire un progetto grafico responsive, riassumiamoli:

1. Progettare i breakpoint, ovvero i punti in cui il nostro impaginato subisce delle modifiche. Esempio se la pagina internet viene visualizzata a 480px di larghezza il layout grafico viene mostrato su una unica colonna. Le media queries dei CSS consentono di definire i breakpoint.
2. Definire sempre al viewport (meta tag da inserire in <head> di pagina)
3. Immagini adattive, grazie alla proprietà max-width dei fogli di stile
4. Tipografia “elastica” grazie alla definizione delle font-size dei miei test con gli “em” e non con i pixel
5. Strumenti di testing che mi semplifichino il lavoro di debug del layout responsivo del mio sito internet.

Grazie della lettura! Alla prossima!

Se ti è piaciuto questo post, condividilo!!!!!!! 🙂