Responsive

Web Design
no E-commerce.
fcil!
VTEX Day - Developers
Rodrigo Muniz
Designer - User Experience Team
f.com/rodrigomuniz
br.linkedin.com/in/rodrigomuniz/
THE
PAGE
IS A LIE
h
t
t
p
s
:
/
/
w
w
w
.

i
c
k
r
.
c
o
m
/
p
h
o
t
o
s
/
d
m
g
a
t
l
a
n
t
a
/
8
3
6
7
3
5
5
0
1
3
/
RESPONSIVE
Responsivo
Ajustvel
Adaptvel
Reativo
h
t
t
p
s
:
/
/
w
w
w
.

i
c
k
r
.
c
o
m
/
p
h
o
t
o
s
/
d
m
g
a
t
l
a
n
t
a
/
8
3
6
7
3
5
5
0
1
3
/
http://goo.gl/gdyPYQ
http://goo.gl/gdyPYQ
lab.vtex.com
lab.vtex.com
lab.vtex.com
lab.vtex.com
The measure
of intelligence is
the ability to change.
ALBERT EINSTEIN
ADAPTE-SE
PARA PODER SOBREVIVER
http://goo.gl/KFqIAo
QUE AMBIENTE
ESSE?
Trfego Web
E-commerce
no Mundo
Setembro - Dezembro 2013
73%
27%
Tablet + Smartphone
Desktop
Smart Insights
E-commerce
mobile no Brasil
Acessos em
Nov 2013 - Abril 2014
84%
16%
Tablet + Smartphone
Desktop
VTEX
E-commerce mobile
no Brasil
Fechamentos de compra em
Nov 2013 - Abril 2014
94%
6%
Tablet + Smartphone
Desktop
VTEX
m.minhaloja.com.br
minhaloja.com.br/mobile
m.minhaloja.com.br
minhaloja.com.br/mobile
EVITE CRIAR VERSO WEB
EXCLUSIVA PARA MOBILE
- Dois sites para manter
- Mais cdigo de marcao
- Links "no-compartilhveis"
ENTO
COMO
FAREMOS?
O SMART CHECKOUT
J RESPONSIVO.
:)
THE
PAGE
IS A LIE
CALMA
O LAYOUT NO
MORREU
O layout ainda
existe, porm o olhar
do designer muda
A pgina d
lugar aos
MDULOS
Artigo: http://daverupert.com/2013/04/responsive-deliverables/
Header Prole Shipping Payment Mini cart
Header Prole Shipping Payment Mini cart
Header Prole Shipping Payment Mini cart
Header
Prole
Shipping
Payment
Mini cart
Header
Nav
Asides
Prateleiras
Banner
Header
Nav
Prateleiras
Banner
Asides
Header
Nav
Asides
Prateleiras
Banner
GIF animado: http://i.imgur.com/kYv0brQ.gif
Comece devagar
lab.vtex.com
lab.vtex.com
Comece devagar
lab.vtex.com
AS BASES
DO RESPONSIVE
WEB DESIGN
4
LAYOUT EM
PORCENTAGEM
1
GIF animado: http://i.imgur.com/RWPdoNg.gif
IMAGENS
ESCALVEIS
2
berry.jpg
A imagem maior que a div
GIF animado: http://i.imgur.com/YcYkl9K.gif
GIF animado: http://i.imgur.com/7ohV3am.gif
META TAG
VIEWPORT
3
window
viewport
window
viewport
window
viewport
window
viewport
window
viewport
depois antes
lab.vtex.com lab.vtex.com
BREAKPOINTS
& MEDIA QUERIES
4
CSS2
CSS3
Nasceram os
BREAKPOINTS
Adicione um container para suas divs com
largura em porcentagem.
GIF animado: http://i.imgur.com/ZuKok3D.gif
AS BASES DO RWD
Layout em porcentagem
Imagens escalveis
Meta tag viewport
Breakpoints & Media Queries
1
2
3
4
BOAS PRTICAS
escolha
um grid system
GRID RESPONSIVO
DO BOOTSTRAP 3
http://getbootstrap.com/css/#grid
GIF animado: http://i.imgur.com/sKC17ud.gif
mobile rst
ESPAO EM MOBILE
PRECIOSO
OCULTE AQUILO QUE
NO ESSENCIAL PARA
O FECHAMENTO DA
COMPRA
CUIDADO COM O TAMANHO
DE CALL TO ACTIONS
MNIMO DE
44PX
TESTANDO
1, 2, 3
http://www.dimensionstoolkit.com/a/
http://goo.gl/2PmGih
DVIDAS?
OBRIGADO
rodrigo.muniz@vtex.com.br
pela ateno.
lab.vtex.com
@vtexlab
f.com/vtexlab
REFERNCIAS
- MARCOTTE, Ethan. Responsive Web Design, 2011.
- Mobile Marketing Statistics 2014. Acessado em maior de 2014 em <http://
www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-
statistics/>
- Reponsive Deliverables. Acessado em maior de 2014 em <http://daverupert.com/2013/04/
responsive-deliverables/>
- Resources - Apple Developers. Acessado em maio de 2014 em <https://developer.apple.com/
resources/>