Responsive design

3,271 views

Published on

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

Published in: Design
2 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total views
3,271
On SlideShare
0
From Embeds
0
Number of Embeds
1,991
Actions
Shares
0
Downloads
29
Comments
2
Likes
6
Embeds 0
No embeds

No notes for slide

Responsive design

  1. 1. Responsive Design sem mimimi #CPBR6 @gserrano
  2. 2. Quem? Guilherme Serrano (@gserrano) Web developer Graduado em design (ui ui ui) Pós em gestão empreendedora Wedeveloper e sócio do @eucompraria (eucompraria. com.br) Experiências anteriores - iG - Itau BBA (MM Café) - Avon (MM Café)
  3. 3. O que é responsive?
  4. 4. O que teremos no futuro?
  5. 5. Objetivos do responsive- Web mais acessível?- Usabilidade?- Beleza?- Reduzir custo de desenvolvimento?Por quê?
  6. 6. Objetivos do responsiveEmpresas buscam resultados financeiros.Como?Mais conversão (cadastros, e-mails, ações, etc.)Mais vendasMais visitasBranding - felicidade no uso da marca
  7. 7. Como atingir os objetivos?Melhorar a experiênciaNunca atrapalhe o usuárioMelhorar performanceReduzir custo (código, manutenção)
  8. 8. Como fazer um site responsivo?Sem jQuerySem javascriptSem frameworks
  9. 9. Como fazer um site responsivo? Sem esconder conteúdo.
  10. 10. Como fazer um site responsivo? Sem esconder conteúdo.
  11. 11. Como fazer um site responsivo? Sem esconder conteúdo.
  12. 12. Tecnologias?- HTML- CSS - Media-queries
  13. 13. CSS Media QueriesProvavelmente você já fez isso<link rel="stylesheet" type="text/css" media="screen" href="screen.css"><link rel="stylesheet" type="text/css" media="print" href="serif.css">
  14. 14. CSS Media QueriesProvavelmente você já fez isso<link rel="stylesheet" type="text/css" media="screen" href="screen.css"><link rel="stylesheet" type="text/css" media="print" href="serif.css">
  15. 15. CSS Media Queries E isso? @media screen { * { font-family: sans-serif } }
  16. 16. CSS Media Queries@media (min-width:500px) { … }@media (orientation: portrait) { … }
  17. 17. O que faço com isso?Como assim?Você pode fazer quase tudo!
  18. 18. AppsConteúdoInstitucionalPortfólio
  19. 19. ExemplosInstitucional http://aneventapart.com/App - http://archive.simurai.com/lab/flapps/mail/
  20. 20. Apenas para sites pequenos?Home da Globo.com
  21. 21. Apenas para sites pequenos?Globo.com voltou a usar versão mobile.:(
  22. 22. Dificuldades do Responsive
  23. 23. Responsive x mobile
  24. 24. Responsive vs mobile- Custo- Gerenciamento de conteúdo- Experiência do usuário- Future proof?- Manutenção de código
  25. 25. Boas práticas do responsiveNunca desenvolva para dispositivos.
  26. 26. Boas práticasDesenvolva parapessoasfeaturesresoluções
  27. 27. Feature detectionA melhor experiência possível em qualquerdispositivo.
  28. 28. FerramentasVocê PODE fazer sem frameworks.Mas você quer?
  29. 29. CompassOrganização do códigoSpritesManutenção
  30. 30. CompassIncludes@import "header";@import "cart";@import "checkout";@import "flex-slider";@import "products";@import "account";
  31. 31. CompassSprites (manutenção fácil)@import "sprite/*.png";@include all-sprite-sprites;
  32. 32. BootstrapGridResponsiveFluid
  33. 33. Antes de implementar...QuestionePesquiseTesteValide
  34. 34. Perguntas?@gserranocontato@guilhermeserrano.com.br http://eucompraria.com.br
  35. 35. Obrigado!

×