responsive web design
Post on 14-Nov-2014
5.129 Views
Preview:
DESCRIPTION
TRANSCRIPT
Responsive web design
TERSIS ZONATO 2013
!www.tersis.com.br !tersishiranzonato@gmail.com
Tersis Zonato
• Desenhista industrial !
• Designer gráfico !
• Designer de interação
http://ica
nt.co.uk
/talks
/h5/pictures/pos
scon
/clinton-ob
ama-sm
artpho
nes.jpg
http://digitalclaritygrou
p.co
m/w
ordp
ress/w
p-co
nten
t/uploa
ds/201
2/12
/DCG
-Insig
ht-U
nderstan
ding
-the-Mob
ile-Shift-N
ov-201
2.pd
f
http://www.prox
xima.co
m.br/h
ome/mob
ile/201
3/06
/05/Brasileiro
s-ac
essand
o-int
erne
t-por-disp
ositiv
os-m
oveis
-ultrap
asso
u-via
-
http://www.nie
lsen.co
m/us/en
/new
swire
/201
3/who
s-winn
ing-th
e-u-s-sm
artpho
ne-m
arke
t-.html
http://www.on
bile.co
m/in
fo/w
p-co
nten
t/uploa
ds/201
2/05
/scree
n1.png
http://www.wire
d.co
m/im
ages_b
logs
/gad
getlab/20
13/04/12
1120
_gala
xyno
teII_07
4.jpeg
Telinha?
http://de
sign2
15.com
/toolbo
x/im
ages/scree
n_reso
lutions
.gif
http://www.sim
onmarxen.dk
/portfo
lio/?p=
165
“In the Bubble” - Simon MarxenArquitetura responsiva
Layout fixo
Layout fluído
http://d.alistap
art.c
om/re
spon
sive-web
-design/ex/ex-site-flexib
le.html
Responsive web design
1. Layout flexível, baseado em grid !
2. Imagens e mídias flexíveis !
3. Media queries (CSS3)
http://alistap
art.c
om/d/re
spon
sive-web
-design/ex/ex-site-FINA
L.html
Responsive design: Vantagens
Vantagens
• Layout customizado • Adaptação de conteúdo
http://med
ia.sm
ashin
gmag
azine
.com
/wp-co
nten
t/uploa
ds/201
3/05
/picn
ic_with
_art_
direction_
mini.jp
g
Vantagens
Imagens flexíveis
Vantagens
• Otimização para ferramentas de busca • Centralização de conteúdo
Vantagens
Experiência do usuário (UX)
http://thum
bnails.vis
ually.netdn
a-cd
n.co
m/re
spon
sive--native
-in-th
e-ux
-lifecycle
_502
919a
230d
f9.png
Vantagens
Velocidade de carregamento
http://med
ia02.ho
ngkia
t.com
/servin
g-resp
onsiv
e-im
ages/re
spon
sive-im
g.jpg
Atividades
http://www.fre
ecsstemplates.org/previe
w/goo
dnatured
/
www.freecsstemplates.org/preview/goodnatured/
http://bit.ly/LGZYtk
http://drgina
.files.w
ordp
ress.com
/200
9/04
/girl-
with
-han
d-ou
t-stop1
.jpg
Antes de
começar...
Configurações da extensão Web Developer
Reset CSS
http://finaid
.utk.edu
/imag
es/C
alcula
tor.jp
g
A calculadora!
alvo ÷ contexto = resultado
http://www.fantom
-xp.co
m/w
allpa
pers/33/Se
cret_servic
e_ag
ent.jpg
http://s2
.man
ifo.com
/usr/5/536
D6/60/man
ager/pixe
l/nyan_
cat___mine
craft_pixel_a
rt_by
_sou
lsylve
r-d3h
y8gz
.png
Pixel hater...
Convertendo (px) para (em)
#logo h1 { font-size: 3.75em; /* 60px */ }
60px
Convertendo (px) para (em)
16px÷Alvo (px) Contexto (100%)
3.75emResultado (em)
#logo h1
#logo p { font-size: 1.375em; /* 22px */ }
22px
Convertendo (px) para (em)
16px÷
1.375em
#logo p
Alvo (px) Contexto (100%)
Resultado (em)
h1 { font-size: 2em; /* 32px */ }
32px
Convertendo (px) para (em)
16px÷
2em
h1
Alvo (px) Contexto (100%)
Resultado (em)
h2 { font-size: 2.75em; /* 44px */ }
44px
Convertendo (px) para (em)
16px÷
2.75em
h2
Alvo (px) Contexto (100%)
Resultado (em)
h3 { font-size: 1.5625em; /* 25px */ }
25px
Convertendo (px) para (em)
16px÷
1.5625em
h3
Alvo (px) Contexto (100%)
Resultado (em)
#splash { font-size: 3em; /* 48px */ }
48px
Convertendo (px) para (em)
16px÷
3em
#splash
Alvo (px) Contexto (100%)
Resultado (em)
#menu a { font-size: 1.25em; /* 20px */ }
20px
Convertendo (px) para (em)
16px÷
1.25em
#menu a
Alvo (px) Contexto (100%)
Resultado (em)
http://2.bp
.blogs
pot.c
om/-_
RvQvo
Cqn2
Q/U
B81S
XPrKvI/
AAAA
AAAA
T78/WYJ
JWLp
b0h4
/s16
00/kee
p+ca
lm.png
.post .meta { font-size: 1em; /* 16px */ }
16px
Convertendo (px) para (em)
16px÷
1em
.post .meta
Alvo (px) Contexto (100%)
Resultado (em)
#footer-content h2 { font-size: 2.25em; /* 36px */ }
36px
Convertendo (px) para (em)
16px÷
2.25em
#footer-content h2
Alvo (px) Contexto (100%)
Resultado (em)
PRONTO...
#SQÑ
Convertendo (px) para (%)
http://www.wallsh
eer.c
om/w
p-co
nten
t/uploa
ds/201
3/09
/Fun
ny-C
ouple-Se
cret-C
hildren
-Wallpa
per.jp
g
alvo ÷ contexto = resultado
x 100
Convertendo (px) para (%)
#logo { width: 31.25%; /* 300px */ }
300px
Convertendo (px) para (%)
960px÷
31.25%
#logo
Alvo (px) Contexto (px)
Resultado x 100 = (%)
#menu { width: 52.08%; /* 500px */ }
500px
Convertendo (px) para (%)
960px÷
52.08%
#menu
Alvo (px) Contexto (px)
Resultado x 100 = (%)
#content { width: 62%; /* 620px */ }
620px
Convertendo (px) para (%)
1000px÷
62%
#content
Alvo (px) Contexto (px)
Resultado x 100 = (%)
#sidebar { width: 32%; /* 320px */ }
320px
Convertendo (px) para (%)
1000px÷
32%
#sidebar, #column1, #column2, #column3
Alvo (px) Contexto (px)
Resultado x 100 = (%)
Margin e padding flexíveis
Margin e padding flexíveis
Marcotte (2010)
Margin e padding flexíveis
1. Ao definir a propriedade margin de um elemento, o contexto é a largura do elemento que o contém; !
2. Ao definir a propriedade padding de um elemento, o contexto é a largura do próprio elemento.
padding conteúdo
margin border
CSS box-sizing
http://css-trick
s.co
m/box
-sizing
/
.elemento { box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
É possível controlar o tamanho com width, a borda com border e as margens externas e internas com margin e padding. Box model é como todas essas propriedades se relacionam pra determinar o tamanho final do elemento.
#logo p { padding: 0 0 0 1.666666666667%; /* 5px / 300px */ }
5px 300px÷
1.666666666667%
#logo p
Margin e padding flexíveis
Alvo (px)
Resultado x 100 (%)
Contexto (px)
#content { padding: 0 4% 0 0; /* 40px / 1000px */ }
40px 1000px÷
4%
#content
Margin e padding flexíveis
Alvo (px)
Resultado x 100 (%)
Contexto (px)
cuidado com o float
CUIDADO com o float!
Imagens fluídas
http://www.clo
udso
ftwarep
rogram
.org/rs
/372
/e9c
4455
d-a3
17-4f4c-9f70
-108
d736
bae9
8/01
f/filen
ame/su
perio
r-user-e
xperien
ce.jp
g
img, embed, object, video { max-width: 100%; }
Imagens fluídas
img, embed, object, video { width: 100%; }
Imagens fluídas
O Internet Explorer 6 não suporta max-width...
Imagens fluídas
O banner está com uma altura fixa de 400px podendo travar o tamanho em telas menores. !
A imagem tem 350px de altura com a borda. !
Portanto é possível usar um padding-bottom de 50px.
http://www.clo
udso
ftwarep
rogram
.org/rs
/372
/e9c
4455
d-a3
17-4f4c-9f70
-108
d736
bae9
8/01
f/filen
ame/su
perio
r-user-e
xperien
ce.jp
g
img, embed, object, video { height: auto; }
Imagens fluídas
http://www.dillerdesign.co
m/exp
erim
ent/D
D_be
lated
PNG/
http://mob
ile.smashin
gmag
azine
.com
/201
3/07
/08/ch
oosin
g-a-resp
onsiv
e-im
age-so
lution/
http://fila
men
tgroup
.com
/examples/re
spon
sive-im
ages/
https://g
ithub
.com
/sco
ttjeh
l/Respo
nsive
-Imag
es
Viewport
Viewport
• width (pixel width/device width); • height (pixel height/device height); • initial-scale; • minimum-scale; • maximum-scale; • user-scalable (yes/no).
!<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Media Queries
<link rel=”stylesheet” href=”styles.css” media=”all” /> !<link rel=”stylesheet” href=”main.css” media=”screen” /> !<link rel=”stylesheet” href=”print.css” media=”print” />
Media Queries
@media screen and (min-width: 320px) and (max-width: 480px) { !}
@media screen and (max-width: 1080px) { !}
1000px 1080px÷
92.59%
.container
Media Queries
Alvo (px)
Resultado x 100 (%)
Contexto (px)
@media screen and (max-width: 1080px) { .container { width: 92.59%; } }
960px 1080px÷
88.88%
#header
Media Queries
Alvo (px)
Resultado x 100 (%)
Contexto (px)
@media screen and (max-width: 1080px) { #header { width: 88.88%; } }
A div #wrapper está com a propriedade min-width definida com 1000px. !
Basta alterar para 100% e o conteúdo irá se adaptar à largura da tela.
Media Queries
@media screen and (max-width: 1080px) { #wrapper { min-width: 100%; } }
Breakpoints
http://www.ea
csoft.c
om/eac
mag
/wp-co
nten
t/uploa
ds/201
3/06
/resp
osive
-design.jpg
Breakpoints
Breakpoints
Content stacking
@media screen and (max-width: 960px) { #logo { float: none; margin: 0 auto; text-align: center; width: 100%; } ! #menu { float: none; text-align: center; width: 100%; } ! #menu ul { display: inline-block; float: none; padding: 20px 0 0; text-align: center; } }
Breakpoints
@media screen and (max-width: 767px) { #content, #sidebar { width: 100%; } }
Breakpoints
@media screen and (max-width: 500px) { #header { height: auto; } #menu a { padding: 10px 0; } ! #menu li { float: none; } ! #menu ul { display: block; padding: 20px 0; } }
Breakpoints
https://c
ode.go
ogle.co
m/p/css3-med
iaque
ries-js/
Frameworks
Ferramentas
http://lab
.maltew
asserm
ann.co
m/view
port-resiz
er/
Inspecione o iPhone através do Safari...
https://d
evelo
pers.goo
gle.co
m/w
eb/fu
ndam
entals/do
cumen
tatio
n/mult
i-device
-layo
uts/ind
ex
Touch events
• touchstart Quanto o dedo toca a superfície !
• touchmove Quanto o dedo desliza na superfície !
• touchend Quando o toque é finalizado
Touch events
Touch events
document.addEventListener(‘touchstart’, function(e) { ...
})
document.addEventListener(‘touchmove’, function(e) { ...
})
document.addEventListener(‘touchend’, function(e) { ...
})
Mobile first
Foco no conteúdo +
Priorizar o necessário +
Usar somente o que for preciso =
Melhor experiência do usuário!
Mobile first
Não esconder conteúdo...?Mobile first
Mobile first
• Pense relativo, não estático ou absoluto; !
• Aprimoramentos CSS/JavaScript; !
• Evite carregar dados desnecessários; !
• Transições CSS ( JavaScript são acelerados por hardware); !
• Sprites CSS; !
• Simplifique...
Prototipação
http://jer
emyp
alford.co
m/arch-journa
l/respo
nsive
-web
-design-sketch
-she
ets/
Referências
Referências
EPSTEIN, Zach. Apple’s global tablet market share falls to all-time low. BGR, 2013.Disponível em: <http://bgr.com/2013/07/25/ipad-market-share-q2-2013-apple-tablets/>. Acesso em: 05 set. 2013. !MARCOTTE, Ethan. Responsive Web Design. A List Apart, 2010. Disponível em: <http://alistapart.com/article/responsive-web-design>. Acesso em: 09 set. 2013. !WALTERS, Tim. Understanding the “Mobile Shift”: Obsession with the Mobile Channel Obscures the Shift to Ubiquitous Computing. Digital Clarity Group, 2012. Disponível em: <http://digitalclaritygroup.com/wordpress/wp-content/uploads/2012/12/DCG-Insight-Understanding-the-Mobile-Shift-Nov-2012.pdf>. Acesso em: 03 set. 2013.
top related