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

612 visualizações

Publicada em

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

Publicada em: Celular
0 comentários
9 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
612
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
9
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

  1. 1. Responsive 
 Web Design 
 no E-commerce. 
 É fácil! VTEX Day - Developers
  2. 2. Rodrigo Muniz Designer - User Experience Team fb.com/rodrigomuniz br.linkedin.com/in/rodrigomuniz/
  3. 3. THE 
 PAGE 
 IS A LIE
  4. 4. https://www.flickr.com/photos/dmgatlanta/8367355013/
  5. 5. RESPONSIVE Responsivo Ajustável Adaptável Reativo https://www.flickr.com/photos/dmgatlanta/8367355013/
  6. 6. http://goo.gl/gdyPYQ
  7. 7. http://goo.gl/gdyPYQ
  8. 8. lab.vtex.com
  9. 9. lab.vtex.com
  10. 10. lab.vtex.com lab.vtex.com
  11. 11. “The measure 
 of intelligence is 
 the ability to change.” ― ALBERT EINSTEIN
  12. 12. ADAPTE-SE
 PARA PODER SOBREVIVER http://goo.gl/KFqIAo
  13. 13. QUE AMBIENTE 
 É ESSE?
  14. 14. Tráfego Web 
 E-commerce 
 no Mundo
 Setembro - Dezembro 201373% 27% Tablet + Smartphone Desktop Smart Insights
  15. 15. E-commerce mobile no Brasil
 Acessos em 
 Nov 2013 - Abril 2014 84% 16% Tablet + Smartphone Desktop VTEX
  16. 16. E-commerce mobile no Brasil
 Fechamentos de compra em 
 Nov 2013 - Abril 2014 94% 6% Tablet + Smartphone Desktop VTEX
  17. 17. m.minhaloja.com.br
 minhaloja.com.br/mobile
  18. 18. m.minhaloja.com.br
 minhaloja.com.br/mobile
  19. 19. EVITE CRIAR VERSÃO WEB 
 EXCLUSIVA PARA MOBILE
  20. 20. - Dois sites para manter - Mais código de marcação - Links "não-compartilháveis"
  21. 21. ENTÃO 
 COMO 
 FAREMOS?
  22. 22. O SMART CHECKOUT JÁ É RESPONSIVO. 
 :)
  23. 23. THE 
 PAGE 
 IS A LIE
  24. 24. CALMA O LAYOUT NÃO MORREU
  25. 25. O layout ainda existe, porém o olhar do designer muda
  26. 26. A página dá lugar aos MÓDULOSArtigo: http://daverupert.com/2013/04/responsive-deliverables/
  27. 27. Header Profile Shipping Payment Mini cart
  28. 28. Header Profile Shipping Payment Mini cart
  29. 29. Header Profile Shipping Payment Mini cart
  30. 30. Header Profile Shipping Payment Mini cart
  31. 31. Header Nav Asides Prateleiras Banner
  32. 32. Header Nav Prateleiras Banner Asides
  33. 33. Header Nav Asides Prateleiras Banner
  34. 34. GIF animado: http://i.imgur.com/kYv0brQ.gif
  35. 35. Comece devagar lab.vtex.com lab.vtex.com
  36. 36. Comece devagar lab.vtex.com
  37. 37. AS BASES 
 DO RESPONSIVE
 WEB DESIGN 4
  38. 38. LAYOUT EM PORCENTAGEM 1
  39. 39. GIF animado: http://i.imgur.com/RWPdoNg.gif
  40. 40. IMAGENS ESCALÁVEIS 2
  41. 41. berry.jpg
  42. 42. A imagem é maior que a div GIF animado: http://i.imgur.com/YcYkl9K.gif
  43. 43. GIF animado: http://i.imgur.com/7ohV3am.gif
  44. 44. META TAG
 VIEWPORT 3
  45. 45. window viewport
  46. 46. window viewport
  47. 47. window viewport
  48. 48. window viewport
  49. 49. window viewport
  50. 50. depoisantes lab.vtex.com lab.vtex.com
  51. 51. BREAKPOINTS & MEDIA QUERIES 4
  52. 52. CSS2
  53. 53. CSS3
  54. 54. Nasceram os BREAKPOINTS
  55. 55. Adicione um container para suas divs com largura em porcentagem.
  56. 56. GIF animado: http://i.imgur.com/ZuKok3D.gif
  57. 57. AS BASES DO RWD Layout em porcentagem Imagens escaláveis Meta tag viewport Breakpoints & Media Queries 1 2 3 4
  58. 58. BOAS PRÁTICAS
  59. 59. escolha um grid system
  60. 60. GRID RESPONSIVO 
 DO BOOTSTRAP 3 http://getbootstrap.com/css/#grid GIF animado: http://i.imgur.com/sKC17ud.gif
  61. 61. mobile first
  62. 62. ESPAÇO EM MOBILE É PRECIOSO
  63. 63. OCULTE AQUILO QUE NÃO É ESSENCIAL PARA O FECHAMENTO DA COMPRA
  64. 64. CUIDADO COM O TAMANHO 
 DE CALL TO ACTIONS
  65. 65. MÍNIMO DE 
 44PX
  66. 66. TESTANDO 
 1, 2, 3…
  67. 67. http://www.dimensionstoolkit.com/a/
  68. 68. http://goo.gl/2PmGih
  69. 69. DÚVIDAS?
  70. 70. OBRIGADO rodrigo.muniz@vtex.com.br pela atenção. lab.vtex.com
 @vtexlab fb.com/vtexlab
  71. 71. 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/>

×