Design Responsivo por uma Web Única

Mobile cresce como nunca. Vende-se mais smartphones e tablets que computadores. A banda larga móvel cresce assustadoramente. Web não é mais sinônimo de desktops e notebooks. Novos meios de acesso, novos usuários, novos hábitos... como oferecer uma boa experiência na nova Web?

A Web mobile surgiu em 2007. Sim, dava pra navegar no celular antes disso, mas o iPhone mudou o jogo. Desde então, temos um browser completo e usável sempre à mão. Mas abrir aquele site Desktop clássico no smartphone não é lá a melhor experiência. Abrir até abre, mas costuma ser lento, com informações demais e difícil de navegar.

E assim nasceram os sites mobile. Criar uma página otimizada pra iPhone é bastante fácil: basta um design de 320px e um truque com viewport.

Mas o mundo mudou desde então. Bastante.

Veio o Android com seus tamanhos e formatos variáveis. Vieram o iPad e os tablets, com resolução de computador e mobilidade de smartphone. Levaram o Android e o iOS pra TV e, agora, até pra óculos. Navegamos em todo tipo de aparelho, a todo momento, em qualquer lugar.

Smartphones, tablets, televisões, celulares, ereaders, video games, netbooks, óculos, relógios... até desktops e notebooks!

Como, então, atacar o mundo móvel de hoje e de amanhã?

Criar um site para smartphones, outro pra tablets, outro pra Desktop, mais um pra TVs, outro pra [insira tecnologia do futuro]...? Impraticável.

Responsive Web Design

Um site. Um design. Um conteúdo. Incontáveis dispositivos.

Design responsivo é oferecer um único site pra todo mundo e, usando técnicas avançadas de CSS3, adaptar a experiência de acordo com o dispositivo.

Há vários bons exemplos. Recentemente, desenvolvi a página do nosso Livro Arquitetura Java com design responsivo. Observe:

Diferente de muitos sites mobile atuais que só pensam nos 320px do iPhone, um site responsivo se adapta a todo tipo de resolução, aproveitando o melhor que cada dispositivo tem a oferecer.

Queremos um site responsivo porque é a melhor experiência para o usuário, não porque seja fácil — não é! — e nem porque está na moda.

Como fazer um design responsivo?

São três ingredientes principais:

  1. Media Queries

    Com as media queries do CSS3, é possível criar regras no CSS que só se aplicam em determinadas situações, como em resoluções de tela específicas e até de acordo com a orientação do dispositivo ou sua densidade de pixels.

    @media (max-width: 500px) {
  body { font-size: 87.5%; }
}
@media (max-width: 390px) {
  body { font-size: 80%; }
}
    (se você não conhece media queries, leia esse meu post e depois volte aqui)

    E que valores usar nas media queries? Há vários frameworks CSS que trazem valores pré-definidos para os breakpoints do layout, como os comuns 320px, 480px, 600px, 768px e 992px. Não à toa, são valores derivados de tamanhos do iPhone, do iPad e tablets de 7".

    Mas um layout responsivo é aquele que se adapta a todo tipo de resolução. Usar valores pensados em dispositivos comuns (device driven breakpoints) pode levar nosso layout a quebrar em certas resoluções intermediárias se não formos cuidadosos.

    Já que queremos suportar todas as resoluções possíveis, porque não criar as media queries a partir das necessidades do nosso layout? (content driven breakpoints). Faça a página e vá redimensionando; no pontos que o layout quebrar, coloque uma media querie pra ajustar.

  2. Layout fluído

    Só media queries não bastam. Seria impraticável criar uma media querie para cada resolução existente — seriam milhares! Devemos usar poucas media queries e fazer o layout fluir entre os breakpoints.

    O segredo é não usar pixels nas medidas, mas priorizar um layout mais fluído e flexível baseado em porcentagens e ems.

    Seria até possível criar um site mobile apenas com essa ideia, sem usar media queries. Se tudo for porcentual, o design se adaptaria a todas as resoluções. Mas, na prática, não seria um design capaz de aproveitar o potencial de cada dispositivo. As media queries permitem ajustar o design pensando em adaptar e melhorar a experiência do usuário.

  3. Imagens flexíveis

    Um layout verdadeiramente fluído precisa de imagens que se adaptem à todo tipo de resolução. E isso merece uma atenção especial, já que imagens são baseadas em pixels e, portanto, não muito fáceis de flexibilizar.

    Podemos usar porcentagens para dimensionar imagens, mas é preciso cuidado. Aumentá-la além do seu tamanho original deixará o layout pixelizado. E carregar uma imagem de alta resolução para depois diminuí-la via código vai deixar a página muito carregada.

    Precisamos de várias imagens em resoluções diferentes, uma para cada contexto. Mas ainda há o problema de como servir a imagem certa pra cada dispositivo. Com media queries, conseguimos ajustar as imagens vindas de CSS via background-image.

    Mas para as <img>, não há solução muito elegante. Há alguns projetos e produtos com soluções razoáveis, geralmente envolvendo algum tipo de código no servidor, mas todas com algum "porém". O W3C também está discutindo o assunto no responsive images workgroup já pensando em incluir algo na especificação pra facilitar.

    Além disso, é importante lembrar que muitas imagens decorativas podem (e devem!) ser substituídas por efeitos CSS3 — sombras, bordas redondas, gradientes etc. E ainda podemos usar SVG para gráficos vetoriais que escalam em todo tipo de resolução.

Responsivo, mas...

Só jogar umas media queries e trocar tudo pra porcentagem no CSS não vai fazer do seu site responsivo o com a melhor experiência para o usuário.

Desenvolver para mobile têm vários outros desafios, ainda mais se queremos que o mesmo site sirva todo mundo.

O conteúdo que importa

Há quem diga que é impraticável oferecer o mesmo site para todo mundo porque, quando navegamos em telas pequenas, queremos conteúdo mais focado e páginas mais simples e diretas. É absolutamente verdade que usuários mobile têm menos paciência pra páginas grandes e carregadas, mas isso não inviabiliza um design responsivo.

A chave é a priorização de conteúdo. É preciso repensar todo o conteúdo para descobrir o que realmente importa, e remover todo o excesso. Uma página mobile não deve ser apenas um design menor, mas uma completa reestruturação de conteúdo. Por isso que só adaptar o design de um site Desktop já existente dificilmente funciona.

E, se você já gastou um bom tempo cortando coisas secundárias e priorizando o importante, porque oferecer essa versão mais simples e funcional apenas para usuários mobile? Porque temos mania de pensar que usuários Desktop devem receber páginas cheias de informações inúteis?

Responsive design é entregar a mesma informação — útil e priorizada — para todo mundo!

Mais: mesmo que, após a priorização, você perceba que o conteúdo está grande, jamais corte conteúdo dos usuários mobile. Se faz parte do conteúdo principal, deixe lá para todos. Usuários mobile não gostam de experiência capada. Otimizar para mobile não significa diminuir funcionalidades, significa focar.

Otimizar é essencial

Sou grande militante de otimizações web. Acredito que cada segundo importa, e que otimizar o carregamento traz resultados fantásticos de satisfação do usuário e conversões. E isso é mais verdade ainda no mundo mobile.

Mesmo smartphones modernos são dispositivos bastante limitados. Baixo poder de processamento, pouca memória, imensa latência da redes 3G etc. Otimizar o carregamento do seu site é imprescindível.

E, repito a pergunta de antes: se você gastar um tempo otimizando seu site para mobile, porquê não servi-lo também aos usuários Desktop? Porque a versão Desktop tem que ser mais lenta que a versão mobile? Responsive design é entregar um site otimizado para todo mundo!

Aliás, se você só tiver tempo para seguir uma dica mobile desse artigo, esqueça media queries, responsividade e etc. Otimize o carregamento do seu site, é a funcionalidade mobile mais importante. O melhor que você pode fazer pelos usuários mobile é deixar seu site mais rápido.

Mobile first

Antes de criar um site responsivo você precisa escolher: começa pelo Desktop e vai ajustando até chegar no mobile ou o contrário? No site do Livro de Arquitetura Java, eu escrevi o CSS todo 2x, uma em cada abordagem. E digo, começar pelo mobile é muito melhor.

Essa estratégia, chamada de Mobile First, tem muitas vantagens. Como o mobile vai te forçar a priorizar o conteúdo, quando chegar a parte do Desktop você não precisará mexer em conteúdo. No caso contrário, é fácil o site Desktop ter conteúdo demais e, quando chega a parte mobile, você descobre que precisava ter focado mais e priorizado melhor.

No layout é a mesma coisa. Comece pelo layout mobile simples e incremente e ajuste as coisas para resoluções maiores. Começar com um layout complexo, cheio de colunas, e simplificar para mobile é bem mais complicado.

Programar mobile first é seguir o princípio do progressive enhancement — melhoria progressiva. Você cria uma base de conteúdo e marcação semântica ultra portável e vai incrementando-a conforme o dispositivo permitir. Com media queries, você vai ajustando o layout e, com JavaScript, pode ir adicionando capacidades novas avançadas. Mas sua base é simples e sólida, conteúdo puro e simples, que abre até nos dumbphones de 5 anos atrás.

Por fim

Criar um site responsivo não é fácil. Trabalhar com flexibilidade e adaptação é bem mais complicado que um site fixo em pixels. As ferramentas de desenho ainda não estão preparadas e os designer gráficos costumam ter dificuldades para criar com responsividade em mente.

O código fica mais complexo também. Há dificuldades para se trabalhar com imagens e vídeos responsivos. É bastante complicado adaptar um site Desktop já existente para ser responsivo.

Apesar de tudo isso, designs resposivos são o futuro. Pelo simples motivo de que a Web é única e criar sites separados para cada categoria de dispositivos é impossível.

Mas, claro que nenhuma solução é bala de prata. Aplicações web complexas que exijam experiências diferentes em mobile e Desktop podem ser fortes candidatas a terem páginas completamente diferentes. Se você têm recursos e tempo, criar diversos sites separados e otimizados certamente é o que trará a melhor experiência pro usuário. Mas não faça um site Desktop e outro para iPhones e ache que acabou.

Faça um site responsivo sempre disponível para qualquer dispositivo de hoje e do futuro. E, se for o caso, crie mais versões separadas otimizadas para dispositivos específicos.

Quer aprender mais sobre design reponsivo? Conheça meu novo livro A Web Mobile: programe para um mundo de muitos dispositivos.Veja também um post com um zilhão de links para posts, palestras, livros, cursos e exemplos de sites responsivos; tudo brasilieiro, em português.

E você, o que acha? Gosta de acessar sites em mobile com a experiência completa? Tem adotado qual prática em seus projetos móveis? Comente! Tem exemplos de designs responsivos brasileiros? Comente também!