O documento apresenta princípios e boas práticas para o design responsivo no e-commerce, incluindo usar layouts em porcentagem, imagens escaláveis e meta tag viewport para diferentes telas, além de grid systems e abordagem mobile-first.

1. Responsive
Web Design
no E-commerce.
É fácil! VTEX Day - Developers

2. Rodrigo Muniz
Designer - User Experience Team
fb.com/rodrigomuniz
br.linkedin.com/in/rodrigomuniz/

4. THE
PAGE
IS A LIE

5. https://www.flickr.com/photos/dmgatlanta/8367355013/

6. RESPONSIVE
Responsivo
Ajustável
Adaptável
Reativo
https://www.flickr.com/photos/dmgatlanta/8367355013/

7. http://goo.gl/gdyPYQ

8. http://goo.gl/gdyPYQ

10. lab.vtex.com

11. lab.vtex.com

12. lab.vtex.com
lab.vtex.com

13. “The measure
of intelligence is
the ability to change.”
― ALBERT EINSTEIN

14. ADAPTE-SE
PARA PODER SOBREVIVER
http://goo.gl/KFqIAo

15. QUE AMBIENTE
É ESSE?

16. Tráfego Web
E-commerce
no Mundo
Setembro - Dezembro 201373%
27%
Tablet + Smartphone
Desktop
Smart Insights

17. E-commerce
mobile no Brasil
Acessos em
Nov 2013 - Abril 2014
84%
16%
Tablet + Smartphone
Desktop
VTEX

18. E-commerce mobile
no Brasil
Fechamentos de compra em
Nov 2013 - Abril 2014
94%
6%
Tablet + Smartphone
Desktop
VTEX

19. m.minhaloja.com.br
minhaloja.com.br/mobile

20. m.minhaloja.com.br
minhaloja.com.br/mobile

22. EVITE CRIAR VERSÃO WEB
EXCLUSIVA PARA MOBILE

23. - Dois sites para manter
- Mais código de marcação
- Links "não-compartilháveis"

24. ENTÃO
COMO
FAREMOS?

25. O SMART CHECKOUT
JÁ É RESPONSIVO.
:)

26. THE
PAGE
IS A LIE

27. CALMA
O LAYOUT NÃO
MORREU

28. O layout ainda
existe, porém o olhar
do designer muda

29. A página dá
lugar aos
MÓDULOSArtigo: http://daverupert.com/2013/04/responsive-deliverables/

30. Header Profile Shipping Payment Mini cart

31. Header Profile Shipping Payment Mini cart

32. Header Profile Shipping Payment Mini cart

33. Header
Profile
Shipping
Payment
Mini cart

35. Header
Nav
Asides
Prateleiras
Banner

36. Header
Nav
Prateleiras
Banner
Asides

37. Header
Nav
Asides
Prateleiras
Banner

38. GIF animado: http://i.imgur.com/kYv0brQ.gif

39. Comece devagar
lab.vtex.com
lab.vtex.com

40. Comece devagar
lab.vtex.com

41. AS BASES
DO RESPONSIVE
WEB DESIGN
4

42. LAYOUT EM
PORCENTAGEM
1

44. GIF animado: http://i.imgur.com/RWPdoNg.gif

45. IMAGENS
ESCALÁVEIS
2

46. berry.jpg

48. A imagem é maior que a div
GIF animado: http://i.imgur.com/YcYkl9K.gif

49. GIF animado: http://i.imgur.com/7ohV3am.gif

50. META TAG
VIEWPORT
3

52. window
viewport

53. window
viewport

54. window
viewport

55. window
viewport

56. window
viewport

58. depoisantes
lab.vtex.com lab.vtex.com

59. BREAKPOINTS
& MEDIA QUERIES
4

60. CSS2

61. CSS3

62. Nasceram os
BREAKPOINTS

63. Adicione um container para suas divs com
largura em porcentagem.

64. GIF animado: http://i.imgur.com/ZuKok3D.gif

65. AS BASES DO RWD
Layout em porcentagem
Imagens escaláveis
Meta tag viewport
Breakpoints & Media Queries
1
2
3
4

66. BOAS PRÁTICAS

67. escolha
um grid system

68. GRID RESPONSIVO
DO BOOTSTRAP 3
http://getbootstrap.com/css/#grid
GIF animado: http://i.imgur.com/sKC17ud.gif

69. mobile first

70. ESPAÇO EM MOBILE É
PRECIOSO

71. OCULTE AQUILO QUE
NÃO É ESSENCIAL PARA
O FECHAMENTO DA
COMPRA

73. CUIDADO COM O TAMANHO
DE CALL TO ACTIONS

74. MÍNIMO DE
44PX

75. TESTANDO
1, 2, 3…

76. http://www.dimensionstoolkit.com/a/

77. http://goo.gl/2PmGih

80. DÚVIDAS?

81. OBRIGADO
rodrigo.muniz@vtex.com.br
pela atenção.
lab.vtex.com
@vtexlab
fb.com/vtexlab

82. REFERÊNCIAS
- 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/>