6.6
Padrões de navegação mobile . . . . . . . . . . . . . . . . . . . . . . . 120
6.7
10 princípios de design para interfaces mobile . . . . . . . . . . . . . . 127
7
Continuando seus estudos
133
7.1
Artigos/Tutoriais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
7.2
Bookmarklets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
7.3
Esboço e planejamento . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
7.4
Ferramentas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
7.5
Inspiração . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
7.6
JavaScript puro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
7.7
Plugins jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
7.8
Testes de responsividade . . . . . . . . . . . . . . . . . . . . . . . . . . 140
7.9
Templates e Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . 141
7.10
Palavras finais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Bibliografia
142
iv
Capítulo 1
Introdução
É possível desenvolver uma só apresentação para um site, um só web design. Mais
além: que esse design seja bem apresentado em quaisquer dispositivos e, conforme
se tenha planejado, que se adapte aos diferentes meios em que este site é acessado.
Sim, é possível, mas não é o que vemos por aí.
Repare no site da CNN, em 2012, em um browser:
Casa do Código
E agora o mesmo site, quando visto em um dispositivo que não um computador:
2
Casa do Código
Capítulo 1. Introdução
A página no dispositivo móvel aparece cortada e para ver a parte que está fal-
tando é necessário fazer o scroll horizontal. Já na versão que é aberta em um Desktop, o site abre completo. A página da CNN não se adaptou aos diferentes meios pelos
quais ele é acessado, já que, na versão móvel, nós somos obrigados a entrar em ação para visualizar o conteúdo relevante.
Repare o mesmo efeito no site da Editora Casa do Código:
E o mesmo site, em dispositivo móvel pode ser visualizado da seguinte forma:
3
Casa do Código
Para uma imagem mais impactante, veja o site do livro de arquitetura Java, do
pessoal da Caelum, em diversos dispositivos:
4
Casa do Código
Capítulo 1. Introdução
Veja outros exemplos incríveis de sites com essas características, que a revista
TripWire reuniu:
5
Casa do Código
6
Casa do Código
Capítulo 1. Introdução
7
Casa do Código
8
Casa do Código
Capítulo 1. Introdução
Sites com estas características possuem web design responsivo.
Um site com web design responsivo - ou responsive web design - pode ser aces-
sado de um PC, notebook, smartphone, tablet, TV, geladeira, banheira - sim, real-
mente existem geladeiras e banheiras que acessam a internet! -, em suma, de qual-
quer dispositivo com acesso à rede, independentemente de sua resolução, de sua
capacidade de cores, se é touch ou não. E, mesmo com essas diferenças dos dis-
positivos que podem acessar seu site, ele continua bem apresentado, inclusive com
possibilidade de se alterar
a ordem em que os conteúdos aparecem e, até mesmo, se
determinados conteúdos serão ou não mostrados logo de cara!
9
1.1. Estatísticas do mundo mobile
Casa do Código
Diga não a mais versões específicas para celulares; basta de linguagens próprias
para mobile; chega de subdomínios ou diretórios específicos para atender ao público móvel! Não existe uma web mobile (mobile web). A web é única. Então, na minha opinião - e na de milhares de outros desenvolvedores web pelo mundo -, o web design responsivo é a resposta única para uma web única!
Não se trata de uma moda ou um hype da internet; não se trata de algo que
chegou, vai angariar alguns fãs e sumir na próxima estação. O web design respon-
sivo é uma nova forma de pensar a web e, dentro de pouco tempo, será tão vital e importante aos desenvolvedores e à experiência do usuário quanto o próprio HTML
ou o CSS.
Ao terminar de ler este livro e fixar seus conteúdos, você fará parte do rol de profissionais de web capazes de desenvolver sites responsivos e poderá gritar, a plenos pulmões, que você, também, contribui para uma web e para um mundo melhor!
1.1
Estatísticas do mundo mobile
E não é somente porque usar essa tecnologia é algo divertido de se fazer. Existe uma forte base estatística que justifica por que devemos prestar muito atenção - e atuar! -
no mercado mobile.
Por exemplo, havia uma previsão de que as vendas de celulares ultrapassariam
as vendas combinadas de desktops e notebooks em 2012. Bem, a previsão estava
errada: isso aconteceu em 2010 (http://ow.ly/awhu3), mesmo ano em que o número
de celulares e smartphones bateu a casa dos 200 milhões no Brasil! E mais: caso não aconteça antes, a previsão é de que o acesso mobile à internet ultrapasse o via PCs e notebooks em 2013 (http://ow.ly/awi0c)!
É interessante notar que, conforme é destacado num artigo muito interes-
sante sobre o mercado mobile do Brasil (http://ow.ly/bg7Wp), em 2011, a venda de