Design responsivo: por que você está fazendo errado

O design responsivo não é uma moda que surgiu por causa de uma técnica legal de CSS, é uma resposta para um problema. Lembre-se sempre disso e pergunte a si mesmo constantemente se você está realmente lidando adequadamente com esse problema. Se você estiver usando copiar e colar para inserir seus pontos de interrupção de consulta de mídia, sua solução poderá ser falha.

Vamos discutir por que existem consultas de mídia e como podemos aproveitá-las para realmente resolver o dilema da web onipresente. Vamos falar sobre por que você deve deixar seu conteúdo determinar os pontos de interrupção de um layout, e não os tamanhos de tela hipotéticos.

Este artigo faz parte de nossa série sobre “olhando além do design de desktop”, apresentada em parceria com o Heart Internet VPS.

A idéia por trás das consultas de mídia

Para iniciar esse debate corretamente, é necessário discutir por que as consultas da mídia se tornaram tão populares de repente. A resposta é obviamente que “Design Responsivo”, termo cunhado por Ethan Marcotte, é uma maneira fantástica de abordar um problema cada vez maior para web designers.

Enquanto todos discutiam sobre como a “rede móvel” ultrapassaria a tradicional, a revolução que ocorreu foi muito mais drástica: a web tornou-se onipresente.

Esse "problema" é ótimo para o mundo como um todo, mas é uma verdadeira dor de cabeça para nós. Na última década, a web mundial se transformou em algo novo. Não está mais limitado pelos muros que havíamos estabelecido anteriormente. Eu já disse isso antes, mas vale a pena repetir. Enquanto todos discutiam sobre como a “web móvel” ultrapassaria a tradicional, a revolução que ocorreu foi muito mais drástica: a web tornou-se onipresente.

No momento, não acessamos a web a partir de um único ponto. Não desistimos de nossos laptops em favor dos smartphones, como previam os "especialistas". Em vez disso, a web está em todo lugar que estamos. Não está apenas em nossos telefones e computadores, está em nossos tablets, iPods, sistemas de jogos, televisões e até carros.

Essa tendência só continuará com o passar do tempo. O design responsivo nos leva a uma época de criação de sites móveis separados e a uma era em que desenvolvemos um site que evolui e se adapta ao dispositivo em que está sendo visualizado. Usando consultas de mídia, podemos apresentar CSS específico para vários tamanhos de viewport diferentes e garantir que todos tenham a melhor experiência possível.

O problema com o design responsivo

A seção acima não é um discurso semi-histórico destinado a preencher o espaço, é uma visão importante dos objetivos que o design responsivo deve atingir. A questão então se torna: ela atende a esses objetivos? O design responsivo aborda adequadamente o problema da onipresença?

A resposta é complicada, na melhor das hipóteses, posso dizer: "depende de como você faz". Essa é uma afirmação confusa, não é? O design responsivo é direto: use consultas de mídia para exibir CSS personalizado em diferentes tamanhos de viewport. É assim que todos abordam isso, certo? Então, como pode haver um caminho certo e errado?

A complexidade surge quando começamos a discutir uma parte crucial dessa técnica: quais consultas de mídia devo usar? Ou, de uma maneira diferente, quais "pontos de interrupção" devo direcionar para CSS personalizado? A atual resposta popular começa previsivelmente com os melhores dispositivos "móveis": o iPhone e o iPad (sugerem comentários irritados dos usuários do Android). A partir desses arquétipos, estabelecemos os chamados tamanhos "genéricos" de smartphones e tablets. Em seguida, subimos e abordamos laptops e desktops pequenos e, finalmente, telas grandes. Um conjunto padrão de consultas de mídia, como este do CSS-Tricks, normalmente possui nove ou dez pontos de interrupção pré-estabelecidos.

E se focássemos nas necessidades de um design específico em vez de um caso de uso de dispositivo hipotético? E se construíssemos layouts que simplesmente funcionassem em todos os lugares?

Para ser justo, esse sistema funciona até certo ponto. Todos nós já vimos muitos sites responsivos construídos usando um conjunto semelhante ao de Coyier acima. No entanto, não posso deixar de pensar que isso está de alguma forma repetindo o mesmo erro que cometemos ao projetar “sites para celular” alguns anos atrás. Todo o foco aqui está no dispositivo que está visualizando o site. Antes mesmo de construir o site, temos esses pontos de interrupção em mente.

Mas os dispositivos mudam. Já estabelecemos que a Web está sendo conectada a praticamente tudo com um botão liga / desliga. Por que, mais uma vez, colocamos tanta ênfase nos tamanhos de tela comuns atualmente? Existe uma alternativa melhor? E se focássemos nas necessidades de um design específico em vez de um caso de uso de dispositivo hipotético? E se construíssemos layouts que simplesmente funcionassem em todos os lugares?

Design Responsivo Focado em Conteúdo

Os problemas acima mencionados com consultas de mídia pré-estabelecidas ocorreram apenas quando eu descobri e realmente comecei a produzir um trabalho responsivo por conta própria. Em teoria, as sugestões padrão são ótimas, mas depois de aplicá-las a um design complexo, você descobrirá que esses pontos de interrupção nem sempre o cobrem. O problema, como os designers do Boston Globe descobriram rapidamente quando o site foi lançado, é que surgem problemas "no meio" (para registro, esse projeto é fantástico e qualquer problema de layout foi amplamente abordado). As coisas ficam confusas quando o design está em um tamanho que você não considerou e você precisa corrigir os buracos após o fato.

Digo isso como um ávido fanboy da Apple: pare de criar sites para o iPhone.

Minha pergunta é: por que não começamos por aí? Em vez de entrar em um projeto com um conjunto de dispositivos e, consequentemente, com consultas à mídia, por que não deixamos o design decidir? Todo layout de página da web tem um ponto em que o tamanho do navegador diminui sua integridade. Nosso trabalho como projetistas, à luz do problema da onipresença, deve ser descobrir esse tamanho e explicar isso, ensaboar, enxaguar e repetir até que todos os pontos fracos sejam esclarecidos.

Digo isso como um ávido fanboy da Apple: pare de criar sites para o iPhone. Em vez disso, crie um site que mantenha sua integridade, pois o tamanho da janela de visualização é reduzido para qualquer estado possível. Lembre-se de dispositivos específicos como guia para o seu design (exemplo: dispositivos menores tendem a ser baseados no toque, então amplie os links), mas não coloque as persianas e deixe de olhar para a foto maior: que o seu design deve ficar bem em qualquer tela.

Um novo fluxo de trabalho

Então, como é um fluxo de trabalho de design responsivo focado em conteúdo? É mais simples do que você pensa. Obviamente, você precisa de um ponto de partida de algum tipo. Se você deseja iniciar o celular e subir, ótimo. Se você quer começar grande e descer, também é ótimo. Pessoalmente, acho muito difícil cavar um design e fazê-lo corretamente se estou começando no nível móvel, mas há muitos argumentos sólidos para fazê-lo dessa maneira.

Algo mágico acontece quando você segue esse fluxo de trabalho.

Hipoteticamente, digamos que você começou com um site grande e com 1020 px de largura. Confira na tela maior que você pode colocar em suas mãos e verifique se está ótimo. Agora arraste a janela e diminua até que o design fique feio. Esse é seu primeiro ponto de interrupção. Defina uma consulta de mídia para esse ponto e corrija tudo o que você precisa resolver. Quando terminar, pegue a janela e encontre o próximo ponto de feiura. Repita essas etapas até estar satisfeito com o intervalo que considerou.

Mas e o iPad? E o Kindle Fire ou a mais recente tentativa da Samsung de ser relevante? Algo mágico acontece quando você segue esse fluxo de trabalho. Você acabou de fazer isso para que o layout pareça bom em praticamente qualquer tamanho. Se você fez certo, quando você o usa no telefone ou tablet, ficará ótimo.

Somente layout
Lembre-se de que esta discussão se refere apenas às taxas de layout. Você absolutamente não sai da funcionalidade de teste em diferentes navegadores e dispositivos. O design responsivo não contribui para o fato de que diferentes mecanismos do navegador interpretam HTML, CSS e JavaScript de maneira diferente.

Conclusão

Para resumir, as consultas de mídia e o design responsivo nos fornecem uma ferramenta incrivelmente poderosa para explicar o fato de que os sites estão sendo visualizados por todos os tipos de telas e tamanhos de viewport. No entanto, quando começamos a vincular nossos projetos a vários dispositivos, estamos de volta ao ponto em que começamos. Seu objetivo deve ser criar um layout que seja tão versátil que possa lidar com praticamente qualquer tamanho de viewport.

Tudo isso é legal na teoria, mas onde está o exemplo? O ponto de partida dessa discussão veio de uma recente tentativa minha de construir uma galeria de imagens responsivas. Confira esse artigo para ver como um fluxo de trabalho de design responsivo focado em conteúdo pode parecer selvagem.