O documento discute o impacto dos dispositivos móveis no acesso à internet e apresenta o conceito de web design responsivo, que permite que sites se adaptem a diferentes telas de forma flexível. Ele explica como grids, imagens e mídia queries podem ser usados para criar sites responsivos e fornece exemplos de sites que utilizam essa abordagem.

1. WEB DESIGN RESPONSIVO
Rodrigo Simoni
CEO da Brandweb
facebook/rodrigosimoni
contato@brandweb.com.br
www.brandweb.com.br
sexta-feira, 28 de setembro de 12

2. O IMPACTO DOS
DISPOSITIVOS MÓVEIS
sexta-feira, 28 de setembro de 12

3. 255 milhões de linhas móveis ativas no Brasil
Fonte: Anatel
sexta-feira, 28 de setembro de 12

4. 69%
dos brasileiros têm celular
Fonte: IBGE
sexta-feira, 28 de setembro de 12

5. 46%
navegam na internet através de celular
Fonte: IBGE
sexta-feira, 28 de setembro de 12

6. 77,7 milhões de pessoas na internet mobile
Fonte: IBGE
sexta-feira, 28 de setembro de 12

7. Tablets
275%
Crescimento de tablets no Brasil em 2012
Fonte: IDC Brasil
sexta-feira, 28 de setembro de 12

8. Estes Números estão crescendo
sexta-feira, 28 de setembro de 12

9. Estes Números estão crescendo
Alguns motivos:
Crescimento da classe C
Xing Ling com internet
Popularização da intenet
Redes sociais
sexta-feira, 28 de setembro de 12

10. O que é Web Design
Responsivo?
sexta-feira, 28 de setembro de 12

11. O que é Web Design Responsivo?
É uma técnica de estruturação HTML e CSS, em que o
site se adapta em qualquer tamanho de tela sem que
precise fazer versões do site para cada dispositivo.
sexta-feira, 28 de setembro de 12

12. Como surgiu?
sexta-feira, 28 de setembro de 12

13. Como surgiu?
Em 2010, Ethan Marcotte publicou um artigo no blog A List
Apart apresentando pela primeira vez o conceito e as
técnicas de Web Design Responsivo.
sexta-feira, 28 de setembro de 12

14. Como surgiu?
Leitura obrigatória:
sexta-feira, 28 de setembro de 12

15. Os ingredientes
sexta-feira, 28 de setembro de 12

16. Os ingredientes
Como fazer de fato um site responsivo?
Em termos de front-end, os ingredientes são:
1. Grid flexível
2. Imagens e mídias flexíveis
3. Media queries
sexta-feira, 28 de setembro de 12

17. 1. Grid flexível
sexta-feira, 28 de setembro de 12

18. 1. Grid flexível
Grid é um conjunto de linhas bases que fornecem uma
estrutura para o seu layout.
sexta-feira, 28 de setembro de 12

19. 1. Grid flexível
Grid é um conjunto de linhas bases que fornecem uma
estrutura para o seu layout.
sexta-feira, 28 de setembro de 12

20. 1. Grid flexível
Site de exemplo:
sexta-feira, 28 de setembro de 12

21. 1. Grid flexível
Site de exemplo:
• Faça seus layouts usando grids.
• Pense em como seu layout se
adaptará nos smartphones e
tablets.
• Exemplo de grids: http://960.gs/
sexta-feira, 28 de setembro de 12

22. 1. Grid flexível
Antes de tudo insira a meta tag viewport.
Serve para desativar a escala original do navegador, definindo uma nova escala,
orientando como o site deve ser exibido, além de controlar de zoom do dispositivo.
<meta name="viewport" content="width=device-width;
initial-scale=1.0">
sexta-feira, 28 de setembro de 12

23. 1. Grid flexível
Divs flexíveis
#geral {
! width: 960px;
! margin: 0 auto;
! background: #fff;
}
.chamadas article {
! width: 300px;
! float: left;
! margin: 10px;
}
sexta-feira, 28 de setembro de 12

24. 1. Grid flexível
Divs flexíveis
#geral {
! width: 960px;
! margin: 0 auto;
! background: #fff;
}
.chamadas article {
! width: 300px;
! float: left;
! margin: 10px;
}
sexta-feira, 28 de setembro de 12

25. 1. Grid flexível
Decore a fórmula mágica:
objeto ÷ contexto = resultado
sexta-feira, 28 de setembro de 12

26. 1. Grid flexível
Fórmula mágica:
objeto ÷ contexto = resultado
300px ÷ 960px = 0.3125
Coloque o ponto duas casas para a direita e acrescente o sinal de %.
sexta-feira, 28 de setembro de 12

27. 1. Grid flexível
Divs flexíveis
#geral {
! width: 90%; /* 960px */
! margin: 0 auto;
! background: #fff;
}
.chamadas article {
! width: 31.25%; /* 300px / 960px */
! float: left;
! margin: 1%;
}
sexta-feira, 28 de setembro de 12

28. 1. Grid flexível
Fontes flexíveis - trocar px por em
Os valores de tamanho das fontes devem ser substituídos de px para em.
O Valor padrão das fontes considerada pelas browsers é de 16px, exemplo:
.chamadas h1 {
! font: 30px arial;
! color: #666;
! margin: 1%;
}
Fórmula: 30 ÷ 16 = 1.87500
No caso de fontes, não é necessário posicionar o ponto para direita.
sexta-feira, 28 de setembro de 12

29. 1. Grid flexível
Fontes flexíveis - trocar px por em
.chamadas h1 {
! font: 1.87500em arial; /* 30px / 16px */
! color: #666;
! margin: 1%;
}
sexta-feira, 28 de setembro de 12

30. 2. Imagens flexíveis
sexta-feira, 28 de setembro de 12

31. 2. Imagens flexíveis
As imagens também precisam se adaptar conforme o tamanho da tela, para não “sair
fora” do layout. Então faça o seguinte:
img {
max-width: 100%;
}
A mesma regra serve para outros elementos do html:
img, embed, object, video {
max-width: 100%;
}
sexta-feira, 28 de setembro de 12

32. 2. Imagens flexíveis
Adapte isso para o IE...
img, embed, object, video {
width: 100%;
}
sexta-feira, 28 de setembro de 12

33. 3. Media queries
sexta-feira, 28 de setembro de 12

34. 3. Media Queries
São novos seletores de CSS3 adicionados pela W3C. Eles servem como uma consulta
de mídia que o navegador faz quando o seu site for acessado.
Media queries interna no CSS:
@media screen and (max-width: 1024px) { /* Layout para desktops */
Estilos aqui...
}
@media screen and (max-width: 380px) { /* Layout para Smartphones */
Estilos aqui...
}
@media screen and (max-width: 780px) { /* Layout para Tablets */
Estilos aqui...
}
sexta-feira, 28 de setembro de 12

35. 3. Media Queries
Chamando as Media Querie externamente:
<link rel="stylesheet" href="smartphones.css" media="screen and (max-
width:320px)" />
<link rel="stylesheet" href="tablets.css" media="screen and (max-width:
320px)" />
Outros tipos de especificações para Media Queries estão no site da W3C..
sexta-feira, 28 de setembro de 12

36. 3. Media Queries
Media queries não são suportadas pelo IE8 e inferiores. Por isso, devemos usar uma
biblioteca como o css3-mediaqueries-js que faz o trabalho sujo.
Para chamá-la:
<header>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/
css3-mediaqueries.js"></script>
<![endif]-->
</header>
sexta-feira, 28 de setembro de 12

37. Alguns exemplos
http://www.globo.com
http://bostonglobe.com
http://html.adobe.com/edge
http://mediaqueri.es/
sexta-feira, 28 de setembro de 12

38. Obrigado!
Rodrigo Simoni
facebook/rodrigosimoni
contato@brandweb.com.br
www.brandweb.com.br
sexta-feira, 28 de setembro de 12