Este documento discute os princípios básicos do design responsivo, incluindo dividir o layout em blocos verticais para telas menores, usar imagens e medidas flexíveis, e media queries para adaptar o estilo às diferentes resoluções.

1. WEB PARA TODOS
Melhor visualizado com os olhos

2. Responsive Design
Design = Forma + Conteúdo
Responsive Design = Consiste na noção de perspectiva da
arquitetura do design, onde um cômodo ou espaço se ajusta
automaticamente ao número e fluxo de pessoas dentro dele.
Responsive Web Design não se trata apenas de ajustar elementos
e imagens ao tamanho da tela ou resolução do dispositivo.
Consiste em uma nova maneira de pensar sobre o design.

3. Primórdios
Tableless
Uso maciço de CSS
Aplicação do Box Model
Acessibilidade
Usabilidade
UX/UI

4. Requisitos Básicos
Blocos em float
Todas as medidas (eu disse todas) devem ser proporcionais (%) e
não fixas (px)
Compreender o fluxo da informação
Entender que dedos são maiores que mouse
Conhecer as resoluções mais pouplares

5. Resoluções

6. Resoluções

7. Resoluções

8. Primeiros Passos
Viewport
Media Queries
Tudo Flexível
Prepare as Imagens
Divida o Layout
Redimensione e Teste

9. Viewport
A fim de acomodar sites que não estão preparados para
disposivitos móveis, muitos navegadores mobile definem um
viewport maior que o próprio browser, permitindo uma
melhor visualização dos sites não preparados para mobile.
Os usuários podem então focar o zoom nos elementos que
eles preferem. Isso funciona legal para experiência “não-
móvel” mas uma vez que estamos otimizando nossa
experiência para dispositivos móveis vamos usar uma meta
tag que define o viewpoint do mesmo tamanho da tela do
dispositivo.

10. Viewport

11. Viewport

12. Media Queries
Desde o CSS 2.1 nossas folhas de estilo desfrutam da noção de dispositivos
através das Media Types. Se você já escreveu uma folha de estilo para
impressão deve estar acostumado com isso:
No CSS3 a W3C implementou o conceito de Media Queries, melhorias
aguardadas dos Media Types. Uma media query nos permite focar não só
no tipo do dispositivo, mas também examinar as características do
dispositivo que renderiza sua aplicação. Por exemplo, seguindo o recente
crescimento do WebKit, media queries se tornaram técnicas client-side
populares para desenvolvimento de apps para iPhone, Android e sua gang.
Para fazer isso podemos incorporar uma query junto a uma folha de estilo.

13. Media Queries

14. Media Queries
A query contém dois componentes:
1. media type: screen
2. a query entre parênteses contendo um comando
particular (max-device-width) para inspecionar, seguido do
valor (480px)
Em bom português estamos perguntando ao dispositivo se
sua resolução horizontal é igual ou menor que 480 pixels. Se
o teste passar estamos lidando com uma tela muito
pequena , um iPhone por exemplo.

15. Tudo Flexível
Todos os elementos do meu design devem ser
mensurados com larguras em porcentagem, assim será
mais fácil adaptar o tamanho dos blocos no seu design.
Não esqueça de deixas as imagens flexíveis também.

16. Tudo Flexível

17. Tudo Flexível
A folha de estilo principal deve conter:
Reset nos padrões dos browsers
Estrutura flexível - Visualizar CSS
principal.
Estilos gerais - Analisar CSS de
cada resolução para
entender como cada
bloco se quebra ao
Clearfix explícito redimensionar a tela.

18. Prepare as Imagens
Background size
Imagens do contexto flexíveis
Thumbnails fixos

19. Prepare as Imagens

20. Prepare as Imagens

21. Background Size
Background size é uma nova regra do CSS3 que permite
escalar a imagem de fundo do nosso site. Além da largura
e altura podemos definir dois tipos de background size,
cover e container.
Cover: Redimensiona a imagem para o seu menor
tamanho, de modo que o background se encaixe no
container principal do site.
Contain: Mantém as proporções da imagem de maneira a
cobrir toda a área de background.

22. Divida o Layout
Lembre-se de dividir o layout
do seu site de maneira a
enfileirar verticalmente os
elementos, em caso de menor
resolução.
Use as media queries para
cuidar dos floats na hora de
redimensionar o navegador.

23. Voilà!

24. Frameworks
Zurb Foundation
Less Framework 4
Twitter Bootstrap

25. Perguntas
Fiquem à vontade para fazer perguntas

26. Obrigado
Cicero Monteiro
cicerogeorge@gmail.com