O documento discute o conceito de design responsivo, como criar sites responsivos sem JavaScript ou frameworks, e boas práticas para desenvolvimento responsivo, como focar na experiência do usuário em diferentes dispositivos e resolver problemas de manutenção de código.

1. Responsive Design
sem mimimi
#CPBR6
@gserrano

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. O que é responsive?

5. O que teremos no futuro?

6. Objetivos do responsive
- Web mais acessível?
- Usabilidade?
- Beleza?
- Reduzir custo de desenvolvimento?
Por quê?

7. Objetivos do responsive
Empresas buscam resultados financeiros.
Como?
Mais conversão (cadastros, e-mails, ações, etc.)
Mais vendas
Mais visitas
Branding - felicidade no uso da marca

10. Como atingir os objetivos?
Melhorar a experiência
Nunca atrapalhe o usuário
Melhorar performance
Reduzir custo (código, manutenção)

13. Como fazer um site responsivo?
Sem jQuery
Sem javascript
Sem frameworks

14. Como fazer um site responsivo?
Sem esconder conteúdo.

15. Como fazer um site responsivo?
Sem esconder
conteúdo.

16. Como fazer um site responsivo?
Sem
esconder
conteúdo.

17. Tecnologias?
- HTML
- CSS
- Media-queries

18. CSS Media Queries
Provavelmente 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">

19. CSS Media Queries
Provavelmente 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">

20. CSS Media Queries
E isso?
@media screen {
* { font-family: sans-serif }
}

21. CSS Media Queries
@media (min-width:500px) { … }
@media (orientation: portrait) { … }

22. O que faço com isso?
Como assim?
Você pode fazer quase tudo!

23. Apps
Conteúdo
Institucional
Portfólio

26. Exemplos
Institucional http://aneventapart.com/
App - http://archive.simurai.com/lab/flapps/mail/

27. Apenas para sites pequenos?
Home da Globo.com

28. Apenas para sites pequenos?
Globo.com voltou a usar versão mobile.
:(

29. Dificuldades do Responsive

31. Responsive x mobile

34. Responsive vs mobile
- Custo
- Gerenciamento de conteúdo
- Experiência do usuário
- Future proof?
- Manutenção de código

35. Boas práticas do responsive
Nunca desenvolva para dispositivos.

36. Boas práticas
Desenvolva para
pessoas
features
resoluções

37. Feature detection
A melhor experiência possível em qualquer
dispositivo.

38. Ferramentas
Você PODE fazer sem frameworks.
Mas você quer?

43. Compass
Organização do código
Sprites
Manutenção

44. Compass
Includes
@import "header";
@import "cart";
@import "checkout";
@import "flex-slider";
@import "products";
@import "account";

45. Compass
Sprites (manutenção fácil)
@import "sprite/*.png";
@include all-sprite-sprites;

46. Bootstrap
Grid
Responsive
Fluid

47. Antes de implementar...
Questione
Pesquise
Teste
Valide

48. Perguntas?
@gserrano
contato@guilhermeserrano.com.br
http://eucompraria.com.br

49. Obrigado!