View
29
Download
0
Category
Preview:
DESCRIPTION
Palestra no VTEX Day 2014, sala Developers, sobre o básico do Responsive Web Design.
Citation preview
Responsive Web Design no E-commerce. fcil! VTEX Day - Developers
Rodrigo MunizDesigner - User Experience Team
fb.com/rodrigomunizbr.linkedin.com/in/rodrigomuniz/
THEPAGE
IS A LIE
http
s://w
ww
.flic
kr.c
om/p
hoto
s/dm
gatla
nta/
8367
3550
13/
RESPONSIVE Responsivo
Ajustvel Adaptvel
Reativo https://w
ww
.flic
kr.c
om/p
hoto
s/dm
gatla
nta/
8367
3550
13/
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-SEPARA PODER SOBREVIVER
http://goo.gl/KFqIAo
QUE AMBIENTE ESSE?
Trfego Web E-commerce
no MundoSetembro - Dezembro 201373%
27%
Tablet + SmartphoneDesktop
Smart Insights
E-commerce mobile no Brasil
Acessos em Nov 2013 - Abril 2014
84%
16%
Tablet + SmartphoneDesktop
VTEX
E-commerce mobile no Brasil
Fechamentos de compra em Nov 2013 - Abril 201494%
6%
Tablet + SmartphoneDesktop
VTEX
m.minhaloja.com.brminhaloja.com.br/mobile
m.minhaloja.com.brminhaloja.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.
:)
THEPAGE
IS A LIE
CALMA O LAYOUT NO
MORREU
O layout ainda existe, porm o olhar do designer muda
A pgina d lugar aos
MDULOSArtigo: http://daverupert.com/2013/04/responsive-deliverables/
Header Profile Shipping Payment Mini cart
Header Profile Shipping Payment Mini cart
Header Profile Shipping Payment Mini cart
Header
Profile
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 devagarlab.vtex.com
AS BASES DO RESPONSIVEWEB DESIGN
4
LAYOUT EM PORCENTAGEM
1
GIF animado: http://i.imgur.com/RWPdoNg.gif
IMAGENS ESCALVEIS
2
berry.jpg
A imagem maior que a divGIF animado: http://i.imgur.com/YcYkl9K.gif
GIF animado: http://i.imgur.com/7ohV3am.gif
META TAGVIEWPORT
3
windowviewport
window
viewport
window
viewport
window
viewport
window
viewport
depoisantes
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/#gridGIF animado: http://i.imgur.com/sKC17ud.gif
mobile first
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?
OBRIGADOrodrigo.muniz@vtex.com.br
pela ateno.
lab.vtex.com@vtexlab
fb.com/vtexlab
REFERNCIAS
- MARCOTTE, Ethan. Responsive Web Design, 2011.
- Mobile Marketing Statistics 2014. Acessado em maior de 2014 em
- Reponsive Deliverables. Acessado em maior de 2014 em
- Resources - Apple Developers. Acessado em maio de 2014 em
Recommended