O documento discute o conceito de design responsivo e como criar sites adaptáveis para diferentes dispositivos. Ele explica que o design responsivo usa grids fluidos, layout adaptativo e conteúdo flexível para se ajustar a telas de diferentes tamanhos. Também fornece dicas sobre como criar estruturas fluidas usando fontes, grids e imagens relativas, além de explicar o uso de media queries e breakpoints para personalizar o design em diferentes resoluções.

3. Como acessávamos a
web a alguns anos?

6. Como acessamos a
web hoje?

9. O que nos aguarda no
futuro?

12. O que é Responsive
Design?

13. Responsive Web Design é um nome bonito para um conceito
antigo. Hoje seus usuários utilizam diversos dispositivos e
meios de acesso para encontrar informação.

17. “O número total de pessoas acessando a
web através de dispositivos móveis irá
superar o acesso via desktop em 2015.”
International Data Corporation (IDC)

18. X Layout Fixo
Estrutura definida com
medidas absolutas, não
possui qualquer flexibilidade

19. X Layout Fluido
Estrutura definida com
medidas relativas, possui uma
flexibilidade sem critérios

20. X Layout Adaptativo
Capaz de se reconfigurar de
acordo com a resolução da tela
ou tamanho da janela

21. V Layout Responsivo
Grids Fluidos
Design Adaptativo
Conteúdo Flexível
Otimização de desempenho

22. O Google recomenda,
e também te recompensa.
“Sites que usam Web Design Responsivo, isto é, sites
que funcionam em todos os dispositivos com o mesmo
conjunto de URLs, com cada URL fornecendo o mesmo
HTML a todos os dispositivos e usando apenas CSS
para alterar como a página é processada no dispositivo.
Essa é a configuração recomendada pelo Google.”
https://developers.google.com/webmasters/smartphone-sites/details

26. Arquitetura de informação

27. Arquitetura de informação
★ Estabelecer uma escala hierárquica de importância
das informações textuais e gráficas do site
★ Repensar a pertinência de apresentação dessas
informações em diferentes contextos e dispositivos

28. Criando uma
Estrutura Fluída

29. Tamanho ÷ contexto = resultado

30. Estrutura Fluida: Fontes
★ O tamanho padrão da fonte na maioria em
praticamente todos os sites é de 16px
★ As medidas devem ser convertidas de
medidas
absolutas (px) para medidas relativas (em)
★ Utilizamos para essa conversão a formula
tamanho ÷ contexto = resultado

31. Estrutura Fluida: Fontes
h1 { font-size: 24px; }
h1 span { font-size: 18px; }
___________________________________________
h1 { font-size: 1.5em; }
/* 24
16 = 1.5 */
h1 span { font-size: 0.75em; }
/* 18
24 = 0.75 */

32. Estrutura Fluida: Grid

33. Estrutura Fluida: Grid

34. Estrutura Fluida: Margin & Padding

35. Estrutura Fluida: Imagens

36. Criando um
Design Adaptável

37. Design Adaptável: Media
Queries
★ Expressões condicionais para aplicar diferentes regras CSS dependendo
da largura do viewport, orientação da tela e/ou aspect ratio:
★ @media screen and (max-width:480px)
(resolução máxima no viewport de 480px)
★ @media all and (orientation:landscape)
Orientação “paisagem”
★ @media screen and (device-aspect-ratio: 16/9)
Monitores 16:9 (ex.: resolução de 1280 x 720px)
★ @media screen and (min-width: 400px) and (max-width: 700px)
Tela com resolução mínima de 400px e máxima de 700px

38. Design Adaptável: Breakpoints

39. Design Adaptável: Viewport
★ Viewport é a aréa de visualização do dispositivo
aonde o site deve aparecer
★ A customização do viewport serve para definir a
resolução inicial de visualização do site, e evitar a
miniaturização do mesmo
★ Seus parâmetros são: width/height, initial-scale,
userscalable e minimum/maximum-scale
<name="viewport" content=“width=devicewidth,initial-scale=1, maximum-scale=1.5">

40. Design Adaptável: Viewport
Uma coleção de diferentes recursos e ferramentas
para se trabalhar com Web Design Responsivo:
★ http://bradfrost.github.io/this-is-responsive/
resources.html