O documento descreve o conceito de design responsivo, que torna o conteúdo de um site adaptável a diferentes dispositivos e telas. Isso é feito através de técnicas como layouts flexíveis, media queries e plugins que ajustam imagens, vídeos e fontes. O design responsivo garante que a informação seja entregue da melhor maneira possível para o usuário, independente do dispositivo usado.

1. Responsive Web
Design
Entregando a informação da melhor maneira possível
Sérgio Santana
Twitter: @sergiosdlima

2. Ethan Marcotte
● Web Design e Developer
● Introduziu o conceito e
publicou o livro Responsive
Web Design

3. O que é Responsive Web Design?
Tornar o conteúdo adaptável a cada tipo de
dispositivo e tamanho de tela, para que a
informação seja entregue da melhor maneiro
possível.

4. Motivação
"Segundo pesquisa da consultoria britânica
Canalys, o mercado de smartphones cresceu
63% em 2011, para 488 milhões de unidades,
enquanto o de PCs teve expansão de 15%,
para 415 milhões de equipamentos."
Fonte: http://economia.estadao.com.br/noticias/economia,vendas-de-smartphones-tem-forte-alta-e-ja-superam-as-de-pcs-no-
mundo,102001,0.htm

5. The Boston Globe
Fonte: http://mediaqueri.es/bg/

6. Seminal Responsive Web Design Example
Fonte: http://mediaqueri.es/rwd/

7. Como fazer um site responsivo
1. Design flexível
2. Media Queries
3. Ajustes + plugins

8. Design flexível
Tamanho das colunas, imagens e textos
adaptam-se ao tamanho da tela.
Sinônimo de layout flúido.

9. Regra básica
Fórmula para transformar tamanho fixo em
flexível:
alvo ÷ contexto = dimensão

10. Tipografia
Utilizar tamanho de fontes em `em` ao invés de
`px`.

11. Fonte: http://tvbrasil.ebc.com.br/observatorio/episodio/rio20-andre-trigueiro

12. Tipografia fixa
body {
font: normal normal 16px/24px Verdana, sans-serif;
}
.episodio h1 {
font: normal normal 26px/32px Arial, Helvetica;
}
.episodio p {
font-size: 14px;
line-height: 16px;
}

13. Tipografia flexível
body {
font: normal normal 100%/1.5em Verdana, sans-serif;
}
body com font-size: 100%, é renderizado como 16px de tamanho de fonte na
maioria dos browsers.

14. Usando a fórmula mágica
alvo ÷ contexto = dimensão
26px ÷ 16px = 1.625em
32px ÷ 26px = 1.230769231em
14px ÷ 16px = .875em
16px ÷ 16px = 1em

15. Tipografia flexível
body {
font: normal normal 100%/1.5em Verdana, sans-serif;
}
.episodio h1 {
/* 26px ÷ 16px & 32px ÷ 26px */
font: normal normal 1.625em/1.230769231em Arial, Helvetica;
}
.episodio p {
font-size: .875em; /* 14px ÷ 16px */
line-height: 1em; /* 16px ÷ 16px */
}

16. Blocos do site
Utilizar tamanhos em %

17. Fonte: http://tvbrasil.ebc.com.br/observatorio/episodio/rio20-andre-trigueiro

18. Blocos com tamanho fixo
#content {
width: 960px;
}
.main-content {
float: left;
widht: 650px;
margin-right: 18px;
}
.side-content {
float: left;
widht: 292px;
}

19. Usando a fórmula mágica
alvo ÷ contexto = dimensão
960px = 100%
650px ÷ 960px = 67.7083333%
18px ÷ 960px = 1.875%
292px ÷ 960px = 30.4166667%

20. Bloos com tamanho flexível
#content {
width: 100%;
}
.main-content {
float: left;
widht: 67.7083333%; /* 650px ÷ 960px */
margin-right: 1.875%; /* 18px ÷ 960px */
}
.side-content {
float: left;
widht: 30.4166667%; /* 292px ÷ 960px */
}

21. Conteúdo
Utilizar width: 100%?

22. Media queries
Comentários condicionais no CSS que serve
para detectar o tipo de mídia que o dispositivo
está usando e quais propriedades esta mídia
possui.

23. Tipos e características
Tipos
all, braille, embossed, handheld, print, projection, screen, speech, tty, tv
Características
color (min | max-)width
color-index grid
(min | max-)aspect-ratio monochrome
(min | max-)device-aspect-ratio orientation
(min | max-)device-height (min | max-)resolution
(min | max-)device-width scan
(min | max-)height -webkit-(min | max-)device-pixel-ratio

24. Sintaxe e uso
[only | not]? {tipo} and ({característica}[:{valor}]?) [and ({característica}[:{valor}]?)]*
[, [only | not]? {tipo} and ({característica}[:{valor}]?) [and ({característica}[:{valor}]?)]*]
<link rel="stylesheet" href="wide.css" media="screen and (min-width: 1200px)" />
ou
@media screen and (max-width: 1200px) {
/* seu estilo aqui */
}

25. Exemplos mais complexos
@media print and (max-width: 21cm) {}
@media all and (max-width: 1024px) {}
@media only screen and (orientation: landscape)
and (min-device-width: 768px)
and (max-device-width: 1024px),
only screen and (-webkit-device-aspect-ratio: 1.5) {}

26. Tome cuidado!
Nenhum Media Query funciona no IE6-8 sem
plugin.

27. Ajustes + plugins
Ajustes finos com plugins para redimensionar
imagens, vídeos e fonte de texto.

28. Imagem responsiva
HiSRC
Adaptive Images
Picturefill

29. Título e manchete flexíveis
FitText
slabText

30. Media Queries IE6-8
Respond.js
css3-mediaqueries-js

31. Vídeo flexível
FITVIDS.JS

32. Alguns exemplos
bostonglobe.com
clearairchallenge.com
barackobama.com

33. Referências
http://www.alistapart.com/articles/responsive-web-design/
http://www.ilearn.com.br/artigos/design-responsivo/
http://sergiolopes.org/responsive-web-design/
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
http://arquiteturadeinformacao.com/2011/12/13/o-que-e-responsive-web-design/
http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design
http://css-tricks.com/which-responsive-images-solution-should-you-use/
http://unstoppablerobotninja.com/entry/fluid-images
http://www.w3.org/TR/css3-mediaqueries/
http://tableless.com.br
http://www.eshiota.com
http://ethanmarcotte.com/
http://mediaqueri.es/
http://fitvidsjs.com/
http://fittextjs.com/