Quer dizer, não importa, tanto, em que área dentro da linha de produção de
desenvolvimento web você se encontre no momento. O que deve ficar claro é que
você precisa conhecer a marcação e sintaxe do HTML, sabendo quando aplicar e
para que servem as diferentes tags da linguagem; deve conhecer CSS, seus seletores e as respectivas propriedades e possíveis valores e; por último (e, no caso, menos importante), um pouco de JavaScript, caso queira se aprofundar um pouco mais em
design responsivo e aprender algumas técnicas interessantes, também mostradas e
explicadas no livro.
16
Capítulo 2
Princípios de um web design
responsivo
Já chegamos a comentar na Introdução o que é um web design responsivo, que é
aquele web design que responde a quaisquer dispositivos/resoluções e, devido a uma série de características técnicas bem específicas, é bem apresentado em qualquer um deles.
Vamos nos aprofundar um pouco mais em suas origens, raízes e inspirações, e
em como aplicá-lo.
2.1
Como surgiu o web design responsivo
Existe um site muito, muito bom e tradicional na web, que é o A List Apart: http:
//www.alistapart.com/
Ele existe desde 1998 e, com o passar dos anos, nunca deixou de brindar seus
leitores com artigos e livros de excelente qualidade.
2.2. A trinca tecnológica do web design responsivo
Casa do Código
Um dos escritores do A List Apart é Ethan Marcotte que, em meados de 2010,
publicou um artigo intitulado Responsive Web Design que mudaria, para sempre, a
forma como se faz design para web.
http://www.alistapart.com/articles/responsive-web-design/
Numa tradução livre, este artigo começa assim:
"O controle que os designers têm no meio impresso e, muitas vezes, desejam ter no meio web, é simplesmente um reflexo da limitação da página impressa. Devemos
aceitar o fato de que a web não tem as mesmas restrições e projetar (o web design) para essa flexibilidade
E, no decorrer do artigo, Ethan explica seus conceitos e sugestões (usando tecno-
logia que já era existente à época de sua publicação) para que as páginas fossem projetadas usando o que ele chamou de web design responsivo. Até um site de exemplo foi mostrado no artigo (http://ow.ly/ate9K), o que deixou a comunidade de desenvolvedores em polvorosa!
Inspirado por conceitos de arquitetura e filosofia, a proposta de Ethan com a
publicação daquele artigo foi mostrar um conjunto de técnicas que garantem res-
ponsividade a um web design.
Devido ao enorme feedback positivo e à ânsia da comunidade por maiores ex-
plicações e pormenores sobre o assunto, no ano seguinte, foi lançado o livro que,
por razões óbvias, levou o mesmo nome do artigo que revolucionara a maneira de
se fazer design na web: o Responsive Web Design.
E, como não poderia deixar de ser, muito da inspiração deste livro veio do
que foi compartilhado por Ethan em seus escritos. Portanto, nada mais natural do
que prestar nossa homenagem ao homem que liberou para o mundo energias de
conhecimento web profundo, baseando vários dos conteúdos que aqui constam em
seus ensinamentos.
Thank you, Ethan!
2.2
A trinca tecnológica do web design responsivo
Para conseguir desenvolver um design responsivo para a web, 3 tecnologias princi-
pais (ou modos de aplicar essas tecnologias, se preferir) estão envolvidas:
1) Layout fluído;
2) Imagens e recursos flexíveis; e
18
Casa do Código
Capítulo 2. Princípios de um web design responsivo
3) Media Queries.
Desenvolver sites com layouts fluidos (fluent layout, também chamados de grids flexíveis), ou seja, desde a concepção do projeto, primar pela não especificação de medidas fixas no layout do projeto, torna possível que haja uma adaptação natural
e automática do que se apresenta na tela. Portanto, seja qual for a resolução do dispositivo que fez o acesso, evitamos barras de rolagem inconvenientes e/ou conteúdos
cortados, não exibidos em sua completude.
Mas de nada adiantaria se o conteúdo se adaptasse às mais diferentes resoluções
se as imagens
(e outros recursos) do site também não se adaptassem e não fossem
flexíveis, não é verdade? Então, através de técnicas variadas, é possível fazer com que os assets (recursos como imagens, vídeos, etc) do site também sejam flexíveis para garantir que a experiência do visitante prime pela excelência, independentemente
do dispositivo que esteja usando.
Para as mais diferentes resoluções dos aparelhos, as necessidades e desejos de
uso do site podem se alterar. Afinal, uma pessoa não estaria errada ao imaginar que alguém que acessa um site através de um celular, cuja tela não tenha uma boa resolu-
ção, não precisa de uma sidebar (menu na lateral). O que esse usuário provavelmente está procurando são os conteúdos principais; então, nada mais justo que não onerar a visita com a exibição de uma barra lateral. As opções presentes na sidebar poderiam, por exemplo, serem apresentadas no fim de todo o conteúdo.
É com as Media Queries que é possível ocultar, fazer aparecer e reposicionar elementos e interações conforme a resolução atual que esteja sendo usada no momento