Post on 12-Jun-2015
description
Ou Quase
Priscila Mayumi Sato5 anos como desenvolvedora@mayogaxhttp://dev.ayogax.me/
Jucinei Pereira dos Santos3 anos como desenvolvedor@jucineihttp://jucineisantos.com/
Como acessávamos a web a alguns anos?
Como acessamos a web hoje?
O que nos aguarda no futuro?
O que é Responsive Design?
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 e por isso o conteúdo precisa se adaptar.
“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)
Layout Fixo
Estrutura definida com
medidas absolutas, não
possui qualquer flexibilidade
X
Layout Fluido
Estrutura definida com
medidas relativas, possui uma
flexibilidade sem critérios
X
Layout Adaptativo
Capaz de se reconfigurar de
acordo com a resolução da tela
ou tamanho da janela
X
Layout Responsivo
Grids FluidosDesign AdaptativoConteúdo FlexívelOtimização de desempenho
V
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
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
Arquitetura de informação
Criando umaEstrutura Fluída
Tamanho ÷ contexto = resultado
Estrutura Fluida: Fontes
★ O tamanho padrão da fonte na maioria em praticamente todos os sites é de 16px
★ As medidas devem ser convertidas de medidasabsolutas (px) para medidas relativas (em)
★ Utilizamos para essa conversão a formulatamanho ÷ contexto = resultado
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 */
Estrutura Fluida: Grid
Estrutura Fluida: Grid
Estrutura Fluida: Margin & Padding
Estrutura Fluida: Imagens
Criando umDesign Adaptável
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
Design Adaptável: Breakpoints
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 aresolução inicial de visualização do site, e evitar aminiaturização do mesmo
★ Seus parâmetros são: width/height, initial-scale, userscalable e minimum/maximum-scale
<name="viewport" content=“width=device-width,initial-scale=1, maximum-scale=1.5">
Design Adaptável: ViewportUma coleção de diferentes recursos e ferramentas para se trabalhar com Web Design Responsivo:
★ http://bradfrost.github.io/this-is-responsive/resources.html
ObrigadaPriscila Sato e Jucinei Santos
(slides feitos por Thiago Chaves)