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.
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.
14.
15.
16.
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)
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
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
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
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
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