Ou Quase
Priscila Mayumi Sato
5 anos como
desenvolvedora
@mayogax
http://dev.ayogax.me/

Jucinei Pereira dos
Santos
3 anos...
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 ...
“O número total de pessoas acessando a
web através de dispositivos móveis irá
superar o acesso via desktop em 2015.”
Inter...
X 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
V Layout Responsivo
Grids Fluidos
Design Adaptativo
Conteúdo Flexível

Otimização de desempenho
O Google recomenda,
e também te recompensa.
“Sites que usam Web Design Responsivo, isto é, sites
que funcionam em todos os...
Arquitetura de informação

★ Estabelecer uma escala hierárquica de importância das
informações textuais e gráficas do site...
Arquitetura de informação
Criando uma
Estrutura 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 deve...
Estrutura Fluida: Fontes
h1 { font-size: 24px; }
h1 span { font-size: 18px; }
___________________________________________
...
Estrutura Fluida: Grid
Estrutura Fluida: Grid
Estrutura Fluida: Margin & Padding
Estrutura Fluida: Imagens
Criando um
Design Adaptável
Design Adaptável: Media
Queries
★ Expressões condicionais para aplicar diferentes regras CSS dependendo
da largura do view...
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...
Design Adaptável: Viewport
Uma coleção de diferentes recursos e ferramentas
para se trabalhar com Web Design Responsivo:
★...
Obrigada
Priscila Sato e Jucinei Santos
(slides feitos por Thiago Chaves)
Campus Party: Desing Responsivos
Campus Party: Desing Responsivos
Campus Party: Desing Responsivos
Campus Party: Desing Responsivos
Campus Party: Desing Responsivos
Campus Party: Desing Responsivos
Campus Party: Desing Responsivos
Campus Party: Desing Responsivos
Campus Party: Desing Responsivos
Campus Party: Desing Responsivos
Campus Party: Desing Responsivos
Campus Party: Desing Responsivos
Campus Party: Desing Responsivos
Upcoming SlideShare
Loading in...5
×

Campus Party: Desing Responsivos

1,604

Published on

O Thiago Chaves fez slides tão lindos... e aí eu e o Jucinei apresentamos na Campus Party! Foi muito legal.

Published in: Technology
3 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,604
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
53
Comments
3
Likes
8
Embeds 0
No embeds

No notes for slide

Campus Party: Desing Responsivos

  1. 1. Ou Quase Priscila Mayumi Sato 5 anos como desenvolvedora @mayogax http://dev.ayogax.me/ Jucinei Pereira dos Santos 3 anos como desenvolvedor @jucinei http://jucineisantos.co m/
  2. 2. Como acessávamos a web a alguns anos?
  3. 3. Como acessamos a web hoje?
  4. 4. O que nos aguarda no futuro?
  5. 5. O que é Responsive Design?
  6. 6. 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.
  7. 7. “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)
  8. 8. X Layout Fixo Estrutura definida com medidas absolutas, não possui qualquer flexibilidade
  9. 9. X Layout Fluido Estrutura definida com medidas relativas, possui uma flexibilidade sem critérios
  10. 10. X Layout Adaptativo Capaz de se reconfigurar de acordo com a resolução da tela ou tamanho da janela
  11. 11. V Layout Responsivo Grids Fluidos Design Adaptativo Conteúdo Flexível Otimização de desempenho
  12. 12. 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
  13. 13. 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
  14. 14. Arquitetura de informação
  15. 15. Criando uma Estrutura Fluída
  16. 16. Tamanho ÷ contexto = resultado
  17. 17. 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
  18. 18. 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 */
  19. 19. Estrutura Fluida: Grid
  20. 20. Estrutura Fluida: Grid
  21. 21. Estrutura Fluida: Margin & Padding
  22. 22. Estrutura Fluida: Imagens
  23. 23. Criando um Design Adaptável
  24. 24. 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
  25. 25. Design Adaptável: Breakpoints
  26. 26. 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, initialscale, userscalable e minimum/maximum-scale <name="viewport" content=“width=devicewidth,initial-scale=1, maximum-scale=1.5">
  27. 27. 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
  28. 28. Obrigada Priscila Sato e Jucinei Santos (slides feitos por Thiago Chaves)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×