1. Web design responsivo
Dyego Costa
dyego.costa@lambda3.com.br
@dyegoScosta
Victor Cavalcante
vcavalcante@lambda3.com.br
@vcavalcante

2. @dyegoScosta
@vcavalcante

4. Uma empresa democrática
•
•
•
•
Sem gerentes ou estrutura hierárquica
Livros abertos
Decisões por consenso
100% ágil
http://bit.ly/lambda3democracia

8. Números
http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011

9. Números

11. Por que não usar o “m ponto”?

URLs

Sharing

SEO

Performance

12. BUSTED!

13. Ingredientes
Layout fluido Imagens flexíveis Media queries

14. Nosso paciente
http://dyegocosta.com

15. LAYOUT FLUIDO

16. Layout fixo
.pagina {
width: 960px;
margin: 0 auto;
}

17. Fórmula mágica
Target / Context = Result

18. Layout fixo

19. Layout fluido

20. IMAGENS FLEXÍVEIS

21. IMAGENS FLEXIVEIS
img {
max-width: 100%;
}

22. Cross-browser 
.img-bonita {
width: 100%;
}
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

23. Imagens flexíveis

24. MEDIA QUERIES

25. Media types
all braille
embossed screen
print handheld
projection tv
speech tty

26. Media types
<link rel="stylesheet" type="text/css“ media=“screen” href=“site.css" />
<link rel="stylesheet" type="text/css“ media=“print” href=“print.css" />
@media screen {
* { font-family: Segoe UI Light; }
}

27. Media queries
@media screen and (min-width: 1024px) {
* { font-family: Segoe UI Light; }
}
@import url(“wide.css”) screen and (min-width: 1024px);

28. Planejamento

29. Planejamento
http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

30. Mudanças são necessárias

31. Mudanças são necessárias

32. Media queries

33. Frameworks
•
•
•
•
Twitter Bootstrap
Skeleton
Foundation
Gumby

34. Dicas
• Preocupe-se com performance
• Não redimensione imagens com CSS
• Siga os padrões sugeridos pela W3C (web
standards)
• Design responsivo nem sempre é a resposta

35. Indicações

36. Links úteis
http://bit.ly/webresp

37. Obrigado!
Victor Cavalcante
vcavalcante@lambda3.com.br
@vcavalcante
Dyego Costa
dyego.costa@lambda3.com.br
@dyegoScosta

38. www.lambda3.com.br