O documento discute o conceito de design responsivo, que permite que sites se ajustem automaticamente a diferentes tamanhos de tela. Ele explica como CSS, HTML e JavaScript tornam isso possível através de recursos flexíveis, viewports e queries de mídia. Também aborda por que o design responsivo é importante devido ao crescimento do uso de dispositivos móveis.

1. Responsive Web Design
conteúdo em todos os dispositivos

2. CSS
Javascript
HTML

3. CSS
Javascript
HTML Linguagem de marcação
Folha de estilos
Linguagem de programação
interpretada

4. Internetcomo usamos?

6. Sites que se reajustam
conforme o tamanho da
tela do aparelho
CONCEITO

8. O problemado css fixo.

10. #wrapper {
margin: 0 auto;
text-align: left;
width: 1024px;
}

12. Análise:
● Funciona bem com algumas telas maiores ou iguais
tamanho definido (960px, 1000px)
● Não se importa com mobile
● Não se importa com acessibilidade

13. “m ponto”
técnica

14. www.globo.com m.globo.com
VS

16. Análise:
● Funciona bem com algumas telas se tem layout fluido
● Resolve problema do mobile com versão exclusiva
● Ruim para técnicas SEO (Search Engine Optimization)
● Usuário fica confuso com os dois endereços
● Redirecionamentos de mobile/desktop e inverso

17. Responsivos

22. Análise:
● Funciona bem em todos dispositivos
● Bom para SEO (Search Engine Optimization)
● Tratamento de imagens caminhando

23. O que torna possível design responsivo?

24. Imagens & Recursos flexíveis
img {
max-width: 100%;
}
Representa 100% de largura no espaço em que estão contidas.

25. Imagens & Recursos flexíveis
Peso vs Tamanho
530kb
700px / 894px

26. Tag viewport
<meta name="viewport" content="width=device-width, initial-scale=1">

27. @media queries
@media screen and (min-width: 768px) and (max-width: 992px){
ul, p{
line-height: 1.72em;
font-size: 1.0em;
}
}

28. Developer tools

31. www.browserstack.com/responsive

32. Twitter Bootstrap

35. Suporte
Nos diversos tipos de navegadores

37. Hoje, não precisamos se preocupar
tanto com IE porque até minha mãe
sabe o que é navegador

39. www.caniuse.com

40. É possível dar suporte a
navegadores sem suporte?

41. Porque
Nem todos os sites são responsivos hoje?

42. Estrutura muito grande
O custo não vale o esforço
Falta de profissionais qualificados
Padrões ainda inconsistentes

43. Porque
Responsive design é tão importante?

44. US$ 10 milhões de pagamentos mobile via Paypal
Vendas no Ebay mobile = US$ 2 bilhões
Vendas de aparelhos móveis ultrapassam a taxa de
natalidade no mundo
Aplicativos híbridos (HTML5 + CSS3)
Webviews

47. Boas referências
http://sergiolopes.org/
http://mediaqueri.es
http://tableless.com.br/
http://www.maujor.com

48. Obrigado!diogo@diogomachado.com