© 2012, Casa do Código
Todos os direitos reservados e protegidos pela Lei nº9.610, de 10/02/1998.
Nenhuma parte deste livro poderá ser reproduzida, nem transmitida, sem auto-
rização prévia por escrito da editora, sejam quais forem os meios: fotográficos,
eletrônicos, mecânicos, gravação ou quaisquer outros.
Casa do Código
Livros para o programador
Rua Vergueiro, 3185 - 8º andar
04101-300 Vila Mariana São Paulo SP Brasil
Casa do Código
Prefácio
A era pós-PC da computação pessoal chegou com tudo. Nos tablets e smartphones,
a Web, finalmente, tem a chance de se tornar verdadeiramente ubíqua e onipresente.
Ainda estamos no começo dessa nova fase da tecnologia, mas o futuro é inegavel-
mente da Web móvel e dos mais diversos aparelhos de navegação.
Essa nova perspectiva traz desafios importantes. Até ontem, Web significava um
navegador instalado num Desktop controlado por mouse e teclado numa tela de ta-
manho confortável. Nossos sites foram construídos pensando nesse cenário. Mas,
agora, temos telas pequenas, touch screen, redes móveis e muitas outras diferenças.
Precisamos de uma nova Web. Uma Web que suporte essa explosão de dispositivos
e, mais ainda, esteja preparada para o futuro de dispositivos que ainda nem conse-
guimos antever.
O Web Design Responsivo é a chave para essa nova Web. É pensar em páginas
que se adaptem a todo tipo de dispositivo e contexto de uso. É sair das limitações de um browser Desktop e seu tamanho previsível, e pensar em páginas com flexibilidade que suportem todo tamanho de tela, qualquer tipo de resolução, interfaces com touch ou mouse. Pensar responsivamente é repensar a Web para o futuro.
E este livro é a ferramenta que você precisa pra entender os desafios do Web De-
sign Responsivo. O Tárcio mostra os pilares de uma interface responsiva, explora os aspectos técnicos do HTML e CSS, e mostra ideias para uma interface móvel usá-
vel. É um livro que recomendo para todo desenvolvedor Web que queira participar
ativamente da nova Web. Espero que você aproveite a leitura como eu aproveitei.
Sérgio Lopes - @sergio_caelum
Instrutor e desenvolvedor na Caelum
i
Casa do Código
Sumário
Sumário
1
Introdução
1
1.1
Estatísticas do mundo mobile . . . . . . . . . . . . . . . . . . . . . . .
10
1.2
Uma questão de conceito . . . . . . . . . . . . . . . . . . . . . . . . . .
13
1.3
Mas meu site já está bom para Android e iPhone! . . . . . . . . . . . .
14
1.4
Para quem é este livro? . . . . . . . . . . . . . . . . . . . . . . . . . . .
15
1.5
Para aproveitar melhor este livro . . . . . . . . . . . . . . . . . . . . . .
15
2
Princípios de um web design responsivo
17
2.1
Como surgiu o web design responsivo . . . . . . . . . . . . . . . . . .
17
2.2
A trinca tecnológica do web design responsivo . . . . . . . . . . . . .
18
2.3
Resoluções de tela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
3
layout fluído
23
3.1
Tipos de medida em CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.2
A fórmula mágica do web design responsivo . . . . . . . . . . . . . . . 26
3.3
Exemplo de um layout fixo . . . . . . . . . . . . . . . . . . . . . . . . .
27
3.4
Metatag viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
37
3.5
Convertendo um layout fixo em layout fluído . . . . . . . . . . . . . .
45
4
Imagens e recursos flexíveis
55
4.1
CSS para imagens flexíveis . . . . . . . . . . . . . . . . . . . . . . . . .
55
4.2
CSS para outros recursos flexíveis . . . . . . . . . . . . . . . . . . . . .
59
4.3
O problema de imagens em layouts fluídos . . . . . . . . . . . . . . . . 66
4.4
Técnicas para imagens flexíveis em web designs responsivos
. . . . . 67
4.5
Imagens em alta resolução . . . . . . . . . . . . . . . . . . . . . . . . .
72
4.6
Tipos de imagem para web . . . . . . . . . . . . . . . . . . . . . . . . .
73
iii
Sumário
Casa do Código
5
Media Queries
81
5.1
Primeiro, os Media Types . . . . . . . . . . . . . . . . . . . . . . . . . .
81
5.2
Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
85
5.3
Parâmetros para trabalhar com Media Queries . . . . . . . . . . . . .
85
5.4
Operadores Lógicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
93
5.5
Vá quebrando seu design em breakpoints bem pensados . . . . . . . . 94
5.6
Gerenciamento de erros . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
5.7
Uso consciente de Media Queries . . . . . . . . . . . . . . . . . . . . . 100
5.8
Media Queries na prática . . . . . . . . . . . . . . . . . . . . . . . . . . 106
6
Tópicos de Web Mobile
111
6.1
O que é Mobile First? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
6.2
Por que Mobile First? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
6.3
Notas gerais sobre Mobile First
. . . . . . . . . . . . . . . . . . . . . . 113
6.4
Como as pessoas usam dispositivos móveis? . . . . . . . . . . . . . . . 115
6.5
O conteúdo é o rei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119