Responsive Web Design

ResponsiveResponsive
web Design

CHISONO
) Simone Viani
) Interface Developer presso LBi Italia
) Clienti: Ermenegildo Zegna, Valentino, Lavazza, Vodafone...
) t flik185 / g simone.viani@gmail.com
.

DICOSAPARLIAMO
) Il contesto multi device: uno sguardo al futuro
) Le strade possibili: siti dedicati / responsive design (rwd)
) Contenuti vs. device
) Il Workflow: cosa cambia?
) Creare un sito responsive: griglie, media fluidi e media queries
) I framework per il rwd: Bootstrap
) Esempi e “hands on code”
) Assegnazione e svolgimento di un progetto
P

ILCONTESTOMULTIDEVICE
“The web should be accessible from any kind of hardware that can
connect to the Internet: stationary or mobile, small screen or large”.
Tim Berners-Lee

Sebbene i computer siano ancora il mezzo
principale di accesso ad internet,
negli ultimi anni il numero di differenti tipi
di device che navigano sul web è cresciuto
in maniera esponenziale…
) Smartphone
) Tablet
) eBook readers
) Sistemi di navigazioni in-car
) TV
Ecresceràancora.

le persone online alla fine del 2012
(~35% della popolazione)
2009
2015
*ComScore Survey 2012
1.9 miliardi
800 milioni
2009
2015
mobileinternet
desktopinternet
1.4 miliardi
1.6 miliardi
Le previsioni parlano di un mercato mobile (smartphone+tablet)
in continua creascita
la media di dispositivi collegati ad internet
per nucleo famigliare in U.S
+2.5miliardi
5.7
*NPD GROUP
Nell’arco di una giornata uno stesso utente
si collega ad internet usando diversi
device, in base anche al luogo in cui si
trova

Asia Europa N. America Mondo
TRAFFICO WEB 2010
2012mobile vs. pc, per area geografica
5,1%
17,84%
7,96%
10%
altri
2%
Android Tablets
2%
Android Phone
20%
iPhone
47%
iPad
29%
Email

LESTRADEPOSSIBILI
Stiamo andando verso un web in cui un sito verrà “consumato” da un numero sempre
maggiore di device.
Questo significa scegliere tra:
Disegnare siti dedicati
per ogni tipo di
schermo
Disegnare in modo Responsive,
creando un unico sito, fruibile da
qualsiasi device
La scelta dell’una o dell’altra strada dipenderà molto dalle tempistiche / budget a disposizione
scegliere l’opzione responsive significa prepararsi al futuro
ma

LESTRADEPOSSIBILI
RWD NON SIGNIFICA DISEGNARE PENSANDO AI DISPOSITIVI DI OGGI, MA
SIGNIFICA PROGETTARE PENSANDO AI DISPOSITIVI DI DOMANI

LESTRADEPOSSIBILI
In termini pratici, un sito responsive riconosce la risoluzione del device che lo visualizza.
unicourl unicocontenuto unicohtml

LESTRADEPOSSIBILI
La strada del responsive design comporta:
) continua ricerca ed educazione cliente / team
) stretta collaborazione tra i reparti del team
) Maggiore tempo per la fase di test / QA
) Avere a disposizione il maggior numero di device per i test

CONTENUTIVS.DEVICE
Disegnare un sito in ottica responsive significa
determinarne un ordine di priorità
assegnare un peso ad ogni “categoria” di contenuti
focalizzarsi sui contenuti
pianificare in anticipo come i contenuti si riadatteranno ad ogni contesto di visualizzazione

CONTENUTIVS.DEVICE
Un modo per aiutare il processo è
pensare mobile first
prendendo risoluzioni basse come punto di partenza nel disegno del sito
Sarà poi più facile aggiungere / organizzare i contenuti per le risoluzioni maggiori
Lo stato dell’arte della progettazione responsive considera i contenuti più importanti del
device specifico (approccio device-agnostic)

ILWORKFLOW
Con i siti non responsive siamo abituati ad avere uno o più layout grafici come punto di arrivo
dello sviluppo (html / css)
Non si parla più di pixel-perfect
In un contesto responsive, soprattutto se il sito è molto strutturato, non è pensabile creare un
layout per ogni device in target
GRAFICA HTML/CSS
Il flusso di lavoro deve diventare anch’esso flessibile

ILWORKFLOW
Occorre quindi rivedere il flusso di lavoro a cascata fin’ora utilizzato
studio wireframe design dev online
studio
design
prototype test online
vs
8
8
browser
sketch
Il browser diventa un punto importante nel nuovo workflow

ILWORKFLOW
La fase di sketch può avvenire con la semplice carta e penna, oppure con software come
sketch&design
Balsamiq - www.balsamiq.com/products/mockups
Axure - www.axure.com
Photoshop
)
)
)
Foundation* - foundation.zurb.com)
StyleTiles - styletil.es)
Omnigraffle* - www.omnigroup.com/products/omnigraffle/)
foundation.zurb.com/stencils.php*

ILWORKFLOW
Prototype
Firefox / Firebug - in generale qualsiasi browser con un inspector del codice)
Foundation (templates))
La fase di prototyping avviene direttamente sul browser, utilizzando appositi tool per la
modifica dei contenuti html

CREAREUNSITORESPONSIVE
Gli ingredienti per creare un sito responsive sono essenzialmente:
) Mediaqueries ) grigliefuide ) contenutiflessibili
@media screen and
(min-width:320px)
I contenuti media flessibili e le grigle fluide si adattano alla dimensione dello schermo.

MEDIAQUERIES
Pensate alle media queries come uno strumento con cui applicare il “costrutto”
se questa grandezza, allora questo stile
Le media queries vengono introdotte come un modulo CSS3,
e non sono dunque supportate da IE<9*
Sono la logica estensione dei media types conosciuti da CSS2, ed utilizzati, per esempio, nei
fogli di stile dedicati alla stampa
Tecnicamente una media query consiste nella dichiarazione di un tipo di media e di zero o più
espressioni che verifichino le condizioni di validità o non validità delle caratteristiche di un
certo media.
* esistono diverse soluzioni javascript per rendere le media queries compatibili con IE<9, come ad esempio https://github.com/scottjehl/Respond
1

MEDIAQUERIES
La sintassi è molto semplice e può essere richiamata in più modi
@media media_type
| op logici | caratteristiche media
<link rel="stylesheet"
media="media_type |op logici |caratteristiche
media" href="specifico.css" />
dentro un css esistente in un css indipendente
@import url(specifico.css) media_type | op
logici | caratteristiche media
= and / not / , (or)
A A
A
) op logici
) media_type = screen / print / ...

MEDIAQUERIES
Caratteristica Definizione
width larghezza ”browser” (min/max)
height altezza “browser” (min/max)
device-width larghezza ”schermo” (min/max)
device-height altezza ”schermo” (min/max)
orientation landscape / portrait
aspect-ratio rapporto w / h “browser”
device-aspect-ratio rapporto w / h “schermo”
resolution (dpi) densità dello “schermo” (min/max)
scan progressive / scan (per le tv)
min-device-pixel-ratio “schermi alta densità“
pointer coarse / fine / none
) caratteristiche media
es: @media not projection and (max-width: 1200px)
@media screen and (min-width: 800px) and (orientation: landscape),@media screen and (max-width: 1200px)

MEDIAQUERIES
Vediamo un esempio:
@media screen
and (min-width:320px)
and (max-width: 480px){}
Le caratteristiche di riferimento definiscono i break point,
ovvero le condizioni in cui andremo a riadattare i contenuti (stili)
break point inferiore
tutti i device con larghezza minima di 320px
break point superiore
tutti i device con larghezza massima di 480px
2
(es. iPhone landscape)
(es. iPhone portrait)
NB - Il cambio di stile (width, font-size, ecc) .es {
-webkit-transition: all 0.3s ease-
out;
-moz-transition:all 0.3s ease-out;
-ms-transition:all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
applicando le transitions css3 sull’elemento
di un elemento da un breakpoint
stesso (no IE<10)
ad un altro può essere animato

MEDIAQUERIES
La scelta dei break point è del tutto libera e, seguendo il paradigma device-agnostic,
dipenderà molto dai contenuti
Volendo comunque fare una panoramica sulle risoluzioni più comuni:
320 480 768 1024 1920
low
res
1st
gen
smartphone desktop tvtablet

MEDIAQUERIES
Un buon approccio nello stabilire i possibili break point è quello di
partire da una risoluzione bassa (mobile) ed espandare il layout
fino a quando reputate necessario un riadattamento: ecco che occorre un break point
<style>
@import url(‘small.css’) (min-width:320px);
@import url(‘big.css’) (min-width:768px);
</style>

MEDIAQUERIES
<meta name=”viewport”>
3
A
Molti browser mobile tentano di emulare il desktop
comprimendo i contenuti in modo da renderli visibili alle basse risoluzioni.
Safari, ad esempio, renderizza di
default le pagine ad una larghezza di
980px
8
ma ha uno schermo largo 320px!

MEDIAQUERIES
Per dire al browser del dispositivo mobile
di usare le dimensioni reali
del proprio schermo basta inserire
un solo meta tag con i seguenti valori
Introdotto da Apple per la prima volta nel 2007,
è diventato uno standard
<meta name=”viewport”
content=”width=device-width”>
initial-scale=1.0
maximum-scale=1.0
user-scalable=yes|no
)
)
)

MEDIAQUERIES
) Cambio proprietà (statico) ) Cambio proprietà (animato)
i<
<

GRIGLIEFLUIDE
Il concetto di griglia fluida si basa su
) un determinato numero di colonne (e gap) per organizzare i contenuti della pagina
) grandezze relative al posto di fisse
se già non presenti a livello di design, individuiamo una possibile divisione in colonne

GRIGLIEFLUIDE
La griglia aiuta a pensare ai contenuti in termini di proporzioni tra gli elementi,
slegando il design dalla sua “staticità” intrinseca
Lavorare con grandezze relative, e non pixel, permette di mantenere tali proporzioni
intatte tra le varie risoluzioni con cui lavoreremo
Alcuni sistemi a griglia molto usati:
) 960 Grid System (960.gs)
) Golden GS (goldengridsystem.com)

GRIGLIEFLUIDE
Le dimensioni relative possono essere espresse con due unità
Si considera una grandezza base di font
attribuendola ad un contenitore master
(generalmente il body) - tutte le
dimensioni dei figli vengono calcolate in
em
Si definisce una grandezza fissa / fluida
di un contenitore master - tutte le
dimensioni dei figli vengono calcolate in
percentuale
% em

GRIGLIEFLUIDE
target / context = result
(target)
200px
-
15.38%
(target)
300px
-
23.07%
(target)
800px
-
61.538%
(IE8+) per correggere il calcolo della
larghezza nel il box model, comprendendo
sia il padding che il bordo
1300px
(context)
formula per trasformare i valori assoluti in
relativi
rapporto tra elementi di design
width = 67% + 15*2px +3*2px > 100%W
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.gr-1x2 {
width: 33.333%;
min-width: 238px;
min-height: 536px;
}
.gr-2x2 {
width: 66.667%;
min-width: 476px;
min-height: 536px;
}
GRIGLIEFLUIDE
box model)
zegna.com (griglia))
Easy (no griglia))
<div class="wrap-row">
<div class="wp-area gr-1x2 clearfix">
<article class="module gr-1x1 img block-over js-scroll-show">
...
</article>
<article class="module gr-1x1 info t-link">
...
</article>
</div>
<div class="wp-area gr-2x2 clearfix">
<article class="zs module gr-2x2 img white js-scroll-show">
...
</article>
</div>
</div>
html
css
i<
<

CONTENUTIFLESSIBILI
Anche i contenuti media (immagini / video) possono essere resi fluidi
) (img) breakpoints + bg image
) show/hide elemento genitore *
) overflow:hidden elemento genitore
* alcuni browser mobile non caricano immagini se il genitore è messo a display:none
/* non supera width contenitore */
img, video {
max-width: 100%;
height: auto;
}
/* IE6 Fix */
img{
width: 100%;
height: auto;
}
...oppure
** per un bug di ie8 width: auto9;

CONTENUTIFLESSIBILI
La regola del max-width non funziona per contenuti iframe e object
comunemente usati da servizi video come Youtube e Vimeo
La soluzione (demo):
i
<div class="video-wrapper">
<div class="video-container">
<iframe src="http://player.vimeo.com/video/52267355"
width="800" height="450" frameborder="0"></iframe>!
</div>

</div>

.video-container {
position: relative;padding-bottom:
56.25%;padding-top: 30px;height: 0;overflow:
hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {position: absolute;top:
0;left: 0;width: 100%;height: 100%;}
/* se voglio dare una larghezza max (600px) */
.video-wrapper {
! width: 600px;
! max-width: 100%;
}
html
css
<
<

BOOTSTRAP
Uno dei più conosciuti framework legati al responsive web design,
creato da Twitter
Pacchetto scaricabile da twitter.github.io/bootstrap/
) classi css per dare stile ad elementi di interfaccia (bottoni, form, ...)
) librerie javascript per implementare elementi comuni (slider, tooltip, ...)
es. <a href=”#” el=”tooltip” title=”first tooltip”>tooltip</a>
) sistema a griglia integrato

BOOTSTRAP
Basato su un sistema a griglia di 12 colonne da 60px, distanziate di 20px (940px)
con possibilità di usare modalita responsive
Il contenuto della pagina gestito dal sistema a griglia deve seguire una precisa struttura
) bootstrap.css
) bootstrap.js
) glyphicons-halflings.png
glyphicons-halflings-white.png
Occorre importare
) bootstrap-responsive.css
) plugin (es.bootstrap-carousel.js)
importbase
importresponsive/plugin

BOOTSTRAP
) x+y=12
W
) -fluid per modalità responsive + bootstrap-responsive.css
) blocco row/spanx annidabile
) offsetz per spaziare colonne
(class=”span3 offset2”)
somma degli elementi interni ad un div spanX
deve avere come risultato il valore dell’elemento
genitore (A+B=Y)
)
somma degli elementi interni ad un div spanX
deve avere come risultato 12 (A+B=12)
<!DOCTYPE html>
<html lang=”en”>
...
<div class="container-fluid">
<div class="row-fluid">
<div class=”spanx”>blocco largo x colonne</div>
<div class=”spany”>
<div class=”row”>
<div class=”spanA”></div>
<div class=”spanB”></div>
</div>
</div>
</div>
</div>
...

BOOTSTRAP
Bootstrap implementa le seguenti media queries
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }

BOOTSTRAP
...ed implementa il sistema a griglia seguente
Larghezza Colonna Gap
1200px+ 70px 30px
980px+ 60px 20px
768px+ 42px 20px
767px - larghezza fluidalarghezza fluida
480px - larghezza fluidalarghezza fluida

BOOTSTRAP
i<
<
Esempio responsive)Esempio statico)

LESS
i<
<
E’ un’estensione dei CSS che permette di usare costrutti del mondo della programmazione
all’interno dei fogli di stile, dandone quindi un carattare dinamico
Un file less (.less) deve essere compilato prima di poter essere interpretato da un browser
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
La compilazione può avvenire client-side (solo browser moderni)
$ npm install -g less
$ lessc styles.less > styles.css
oppure server-side (node.js)

LESS
i<
<
.box-sizing(@sizing: border-box) {
-ms-box-sizing: @sizing;
-moz-box-sizing: @sizing;
-webkit-box-sizing: @sizing;
box-sizing: @sizing;
}
variabili
Il comportamento dinamico deriva dalla possibilità di usare:
@break-mobile: 320px;
...
@media screen and (min-width: @break-mobile){$em-base/2}
mixin

LESS
i<
<
/* VARS */
@em-base: 16; // px
/* MIXINS + NAMESPACE */
#font {
.em-calc (@pxWidth) {
// target/context
font-size: (@pxWidth / @em-base) * 1em;
}
}
body {
#font > .em-calc(10);
}
codiceannidato
p { font-size: 0.8em;
a { text-decoration: none;
&:hover { color: red; }
}
}
funzioni/operazioni

LESS
i<
<
jsdentroicss
@height =
`document.body.clientHeight`;
@string: 'ciao!';
@var:
~`'@{string}'.topUpperCase()`;

LESS
i<
<
Bootstrap è scritto in Less, per cui è possibile sfruttarlo all’interno del framework
Bisogna scaricare a parte i file less (https://github.com/twitter/bootstrap/tree/master/less)
Nel caso si volesse sfruttare less, andando però a riscrivere alcuni parti con il nostro codice
bisogna ricreare la seguente struttura di file all’interno della directory principale del progetto
directory-progetto/
css/
images/
less/
bootstrap/
accordion.less
.....
bootstrap.less
responsive.less
...
styles.less
copiare qui
tutti i file bootrap less
import file
bootstrap less import file responsive
import boostrap.less/
responsive.less + stili propri
Linkadirectory

LESS
i<
<
Ora possiamo
)
) Usare i mixin di Bootstrap all’interno del nostro foglio di stile (.clearfix(), .size(), ...)
Fare direttamente override delle variabili usate da Bootstrap
) Customizzare i breakpoint (che si trovano in responsive.less)

ESEMPI
Ottimi esempi di siti responsive
) http://mediaqueri.es
Alcuni tool che posso aiutare
rwdcalc.com - calcolatrice per grandezze relative)
) http://eu.suitsupply.com/on/demandware.store/Sites-INT-Site/it/Home-Show
jetstrap.com - “interfaccia” per bootstrap)
bradfrostweb.com/demo/ish/ - simulatore di breakpoint)
mqtest.io/ - caratteristiche media) 6
6
bradfrost.github.io/this-is-responsive/resources.html#viewport-testing)
6
) http://www.time.com/time

Responsive Web Design

More Related Content

Similar to Responsive Web Design (20)

Responsive Web Design