Carregado porRodrigo Muniz
Responsive Web Design no E-commerce. É fácil!
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.
Responsive Web Design no E-commerce. É fácil!
- 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.
- 5.
- 6.
- 7.
- 8.
- 10.
- 11.
- 12.
- 13. “The measure ofintelligence is the ability to change.” ― ALBERT EINSTEIN
- 14.
- 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 Acessosem Nov 2013 - Abril 2014 84% 16% Tablet + Smartphone Desktop VTEX
- 18. E-commerce mobile no Brasil Fechamentosde compra em Nov 2013 - Abril 2014 94% 6% Tablet + Smartphone Desktop VTEX
- 19.
- 20.
- 22. EVITE CRIAR VERSÃOWEB EXCLUSIVA PARA MOBILE
- 23. - Dois sitespara manter - Mais código de marcação - Links "não-compartilháveis"
- 24.
- 25. O SMART CHECKOUT JÁÉ RESPONSIVO. :)
- 26.
- 27.
- 28. O layout ainda existe,porém o olhar do designer muda
- 29. A página dá lugaraos MÓDULOSArtigo: http://daverupert.com/2013/04/responsive-deliverables/
- 30. Header Profile ShippingPayment Mini cart
- 31. Header Profile ShippingPayment Mini cart
- 32. Header Profile ShippingPayment Mini cart
- 33.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. AS BASES DORESPONSIVE WEB DESIGN 4
- 42.
- 44.
- 45.
- 46.
- 48. A imagem émaior que a div GIF animado: http://i.imgur.com/YcYkl9K.gif
- 49.
- 50.
- 52.
- 53.
- 54.
- 55.
- 56.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63. Adicione um containerpara suas divs com largura em porcentagem.
- 64.
- 65. AS BASES DORWD Layout em porcentagem Imagens escaláveis Meta tag viewport Breakpoints & Media Queries 1 2 3 4
- 66.
- 67.
- 68. GRID RESPONSIVO DOBOOTSTRAP 3 http://getbootstrap.com/css/#grid GIF animado: http://i.imgur.com/sKC17ud.gif
- 69.
- 70. ESPAÇO EM MOBILEÉ PRECIOSO
- 71. OCULTE AQUILO QUE NÃOÉ ESSENCIAL PARA O FECHAMENTO DA COMPRA
- 73. CUIDADO COM OTAMANHO DE CALL TO ACTIONS
- 74.
- 75.
- 76.
- 77.
- 80.
- 81.
- 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/>