Responsive Web Design no E-commerce. É fácil!

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

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%


VTEX

E-commerce mobile no Brasil

Fechamentos de compra em Nov 2013 - Abril 201494%

6%


VTEX

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

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

depoisantes

lab.vtex.com lab.vtex.com

BREAKPOINTS & MEDIA QUERIES

4

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?

[email protected]

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

Responsive Web Design no E-commerce. É fácil!

Documents

Transcript of Responsive Web Design no E-commerce. É fácil!