3 desastres de design responsivo - e como evitá-los
Os métodos de design responsivo são muito úteis para os desenvolvedores, pois nos permitem fornecer conteúdo para a maior variedade de dispositivos sem precisar manter versões separadas do site e sem algumas das desvantagens negativas de outros métodos, como dimensionamento e layouts fluidos.
Este artigo destacará os três principais erros que os designers encontram com designs responsivos e fornecerá algumas estratégias para evitar esses erros.
Escala vs. fluido vs. responsivo
Há muita confusão sobre esses termos e os designers geralmente os usam de forma incorreta de forma intercambiável. Na verdade, cada um desses são passos evolutivos distintos na técnica de layout que surgiram ao longo do tempo, de acordo com os avanços da tecnologia.
Os layouts de escala são projetados para dimensionar todos os elementos em relação a todos os outros elementos . Eles são responsivos no sentido de dimensionar o conteúdo dinamicamente em resposta a alterações no tamanho da janela de visualização. O layout em si permanece estático, alterando o tamanho de cada elemento para manter uma aparência consistente.
Acima: exemplo de um layout de escala em diferentes resoluções: o design sacrifica a legibilidade para consistência.
Os layouts fluidos são diferentes porque dimensionam os elementos de contêiner em relação ao tamanho da viewport . Isso é obtido usando unidades relativas, como ems, para superar o problema de redução de texto. O design pode ser quebrado pelo escalonamento do usuário.
Acima: exemplo de layout fluido em diferentes resoluções: o design sacrifica a consistência para legibilidade.
Layouts responsivos não escalam nada. Em vez disso, eles alteram o que é exibido dependendo do tamanho da viewport.
Acima: um exemplo de layout responsivo em diferentes resoluções.
Desastre 1) Envolvendo cardápios
Se você usar uma barra de navegação na parte superior da sua página, um design responsivo deve “encaixá-la” em um formato mais compacto quando a página é exibida em uma tela pequena. Mas isso nem sempre funciona perfeitamente se a área de exibição for maior que o ponto de interrupção, mas muito pequena para exibir todos os itens de menu em uma única linha. O resultado é um menu que envolve.
Existem várias maneiras de resolver esse problema. A primeira é reduzir o número de itens exibidos horizontalmente na barra de navegação classificando-os em categorias e subcategorias. Você pode usar itens suspensos para exibir as subcategorias quando uma categoria é selecionada.
A segunda maneira é mudar o ponto de quebra para um valor menor. O número real a ser usado é a largura na qual sua barra de navegação começa a falhar, não um tamanho de dispositivo específico.
A terceira maneira é usar um menu diferente para dispositivos, como uma gaveta deslizante.
Desastre 2) Usando imagens de largura fixa
As áreas de conteúdo geralmente são definidas para um tamanho relativo à viewport. Portanto, quando uma imagem com largura fixa é maior que o tamanho da área, ocorre o corte de imagem.
Acima: exemplo de uma imagem com largura fixa ruim que é muito grande: agora ela tem barras de rolagem e o conteúdo é empurrado para fora da tela.
Você pode evitar esse problema usando unidades relativas para definir a largura da imagem, ou se você usar uma estrutura que suporte (como Bootstrap) você pode usar uma classe de imagem responsiva (por exemplo: class = ”img-responsive” ).
Acima: O mesmo elemento com uma abordagem de classe de imagem responsiva: agora a barra de rolagem desapareceu.
Desastre 3) Distorção do elemento
Este é um pouco mais obscuro, mas essencialmente o que acontece quando seu layout é exibido em uma pequena viewport é que qualquer coluna não manipulada se comporta como uma linha. Isso é um problema porque a distorção do conteúdo altera a hierarquia de seu design de maneira não intencional.
Acima: a coluna se torna uma linha, distorcendo o conteúdo.
A solução é óbvia, mas é surpreendente como muitas pessoas lutam com isso: basta definir a altura, a largura e o preenchimento do elemento explicitamente. Se ele sair de posição e cobrir outros elementos, você pode forçá-lo a estar onde quiser, colocando-o em uma div e definindo as margens.
Planejamento ajuda a evitar erros
Este artigo discutiu apenas os 3 desastres de design responsivos mais comumente encontrados, mas há muitas outras maneiras de um bom projeto dar errado. Evitar erros não é muito difícil. Os navegadores modernos têm testes de layout responsivo, portanto, planeje bem seu projeto e teste com frequência.