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

Palestra no VTEX Day 2014, sala Developers, sobre o básico do Responsive Web Design.

Transcript

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 2013 73% 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ÓDULOS Artigo: 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. depois antes 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/>