da visitação. Afinal, o site não precisa (e, na verdade, não deve) ter, exatamente, a mesma aparência e disposição de seus elementos em qualquer resolução. Um iPad,
um celular Nokia e um monitor de 27 polegadas possuem espaços, resoluções e ne-
cessidades bem diferentes.
Sabendo usar essa trinca tecnológica é possível criar designs responsivos para a
web. É objeto deste livro fazer a apresentação e respectivas explicações (e integra-
ções) de cada uma dessas principais tecnologias. Mas, antes, é interessante ter uma noção de alguns problemas comuns que trouxeram os desenvolvedores web até este
ponto e conhecer alguns fatos notáveis sobre dispositivos, a web, a relação entre estes.
2.3
Resoluções de tela
Como se pôde ver quando apresentamos alguma estatísticas do mundo mobile na
seção 1.1, os números envolvendo esse novo marco tecnológico são surpreendentes!
19
2.3. Resoluções de tela
Casa do Código
E estes números mostram, também, que a tendência é que mais e mais dispositivos
surjam, muitos a cada ano. Então, juntando os já existentes com os que são lançados a cada período programado de tempo, temos um bocado de devices para prestar
atenção... Ou nem tanto?
De maneira óbvia, é humanamente impossível prestar atenção e dar suporte a
todo e qualquer dispositivo mobile existente e que esteja por existir. Na verdade, nem é preciso que isso seja feito.
O atual (e não eficiente) paradigma de acesso multidispositivo
Sem essa ideia em mente para o desenvolvimento, mesmo antes de se começar
a escrever o primeiro caractere de código, o que se faz é o seguinte: escolhe-se uma técnica, qualquer, para identificar qual é a resolução do dispositivo (ou o dispositivo, em si) e, a partir do resultado, carrega-se recursos condizentes (CSS, JavaScript, imagens, etc) à realidade daquele device. Algo que também não é difícil de acontecer: a pessoa é redirecionada para um site à parte, feito para uma resolução ou dispositivo específico - se preferir: um site compatível... Não é preciso escrever parágrafos infindáveis sobre os custos de produção e retrabalho envolvidos ao se usar esta abordagem, não é verdade? Sem contar que, muitas vezes, queríamos uma experiência
parecida, e não algo completamente diferente do site normal.
O equívoco comum é ainda não ter entendido que, na verdade, o que importa
não é o tamanho físico da tela ou o dispositivo, em si, mas sua resolução! Tendo a atenção voltada às resoluções, é possível, com facilidade muito maior, desenvolver para uma gama incrível de dispositivos, sem se preocupar com, necessariamente,
que dispositivos são esses ou o tamanho físico de suas telas.
Ou você quer ter que atualizar seus scripts de identificação de devices sempre que o mais novo smartphone do momento for lançado no próximo mês? Claro que não!
E, certamente, qualquer profissional da área de desenvolvimento web, passando pelo estagiário de HTML ao gestor do negócio, também não.
Para se ter uma ideia, peguemos uma pesquisa feita com aparelhos vendidos
entre 2005 e 2008, que contemplou análise de 400 devices diferentes (http://ow.ly/
b72At), com intenção de levantar as principais resoluções de dispositivos usados para acesso à web, também levando
em considerações as orientações desses dispositivos:
portrait (retrato) e landscape (paisagem).
Constatações interessantes foram feitas, como, por exemplo, a diferença de ta-
manho entre o menor e o maior dispositivo que participaram da amostra, que chega
20
Casa do Código
Capítulo 2. Princípios de um web design responsivo
a ser de mais de 23 vezes e o aumento considerável de ppi (Pixels per inch, densidade de pixels) conforme o avanço das tecnologias.
Para ficar mais claro e trazer o entendimento com exemplos mais concretos, to-
memos o exemplo de alguns dispositivos, especificamente, para se ter noção das di-
ferenças de resolução que podem existir. Vejamos quais as resoluções específicas de alguns dos aparelhos comuns, que podem ser encontrados em qualquer lugar. Para
facilitar, o gráfico disponibilizado no blog WebDev-il (http://ow.ly/bazAV), faz uma separação lógica dos devices por Sistema Operacional.
21
2.3. Resoluções de tela
Casa do Código
Perceba que, neste gráfico, existem 2 indicações para iPhone: uma é o retângulo
que representa a resolução de 320x480 e o maior de todos, 640x960, também! A
diferença é que a o iPhone 4 tem uma resolução bem superior. E o iPhone 5 aumentou ainda mais essa diversidade, com seus 640x1136 pixels.
O que importa não é o tamanho físico da tela ou o dispositivo em si, mas sim sua
resolução. Fixou?
22
Capítulo 3
layout fluído
Um layout fluído ou, como originalmente chamado por Ethan Marcotte, grid flexí-
vel, é o primeiro passo para desvendar os mistérios do web design responsivo. Para se conseguir um layout fluído num projeto web, a principal medida a ser tomada é:
não usar medidas absolutas no CSS!
Aliás, você mesmo, ao começar a codificar seus primeiros exemplos de HTML,
já notou isso, mas aposto que esqueceu! Ou não se lembra de como aquele parágrafo