Responsive design

  • View
    2.797

  • Download
    0

Embed Size (px)

DESCRIPTION

Palestra sobre design responsivo (responsive design) apresentada no Campus Party Brasil 2013.

Text of Responsive design

  • 1. Responsive Design sem mimimi#CPBR6@gserrano

2. Quem?Guilherme Serrano (@gserrano)Web developerGraduado em design (ui ui ui)Ps em gesto empreendedoraWedeveloper e scio do @eucompraria (eucompraria.com.br)Experincias anteriores- iG- Itau BBA (MM Caf)- Avon (MM Caf) 3. O que responsive? 4. O que teremos no futuro? 5. Objetivos do responsive- Web mais acessvel?- Usabilidade?- Beleza?- Reduzir custo de desenvolvimento?Por qu? 6. Objetivos do responsiveEmpresas buscam resultados financeiros.Como?Mais converso (cadastros, e-mails, aes, etc.)Mais vendasMais visitasBranding - felicidade no uso da marca 7. Como atingir os objetivos?Melhorar a experinciaNunca atrapalhe o usurioMelhorar performanceReduzir custo (cdigo, manuteno) 8. Como fazer um site responsivo?Sem jQuerySem javascriptSem frameworks 9. Como fazer um site responsivo?Sem esconder contedo. 10. Como fazer um site responsivo?Sem escondercontedo. 11. Como fazer um site responsivo?Semescondercontedo. 12. Tecnologias?- HTML- CSS- Media-queries 13. CSS Media QueriesProvavelmente voc j fez isso 14. CSS Media QueriesProvavelmente voc j fez isso 15. CSS Media Queries E isso? @media screen { * { font-family: sans-serif } } 16. CSS Media Queries@media (min-width:500px) { }@media (orientation: portrait) { } 17. O que fao com isso?Como assim?Voc pode fazer quase tudo! 18. AppsContedoInstitucionalPortflio 19. ExemplosInstitucional http://aneventapart.com/App - http://archive.simurai.com/lab/flapps/mail/ 20. Apenas para sites pequenos?Home da Globo.com 21. Apenas para sites pequenos?Globo.com voltou a usar verso mobile.:( 22. Dificuldades do Responsive 23. Responsive x mobile 24. Responsive vs mobile- Custo- Gerenciamento de contedo- Experincia do usurio- Future proof?- Manuteno de cdigo 25. Boas prticas do responsiveNunca desenvolva para dispositivos. 26. Boas prticasDesenvolva parapessoasfeaturesresolues 27. Feature detectionA melhor experincia possvel em qualquerdispositivo. 28. FerramentasVoc PODE fazer sem frameworks.Mas voc quer? 29. CompassOrganizao do cdigoSpritesManuteno 30. CompassIncludes@import "header";@import "cart";@import "checkout";@import "flex-slider";@import "products";@import "account"; 31. CompassSprites (manuteno fcil)@import "sprite/*.png";@include all-sprite-sprites; 32. BootstrapGridResponsiveFluid 33. Antes de implementar...QuestionePesquiseTesteValide 34. Perguntas?@gserranocontato@guilhermeserrano.com.br http://eucompraria.com.br 35. Obrigado!