Quando o design responsivo falha (e como corrigi-lo)

A maioria dos sites que usam design responsivo está usando isso incorretamente, o que leva a problemas. A abordagem geral do design responsivo é preguiçosa e, se você adotar essa abordagem, alguns de seus sites responsivos funcionarão com perfeição e muitos deles não funcionarão. Para aqueles que trabalham perfeitamente, provavelmente será uma questão de sorte.

O conceito de design responsivo é simples, mas sua simplicidade é o que leva as pessoas a cometer erros com tanta facilidade. Designers com anos de experiência se acostumaram a projetar para a área de trabalho e, por isso, normalmente planejam um projeto baseado em um layout de área de trabalho.

Os layouts de desktop diferem dos layouts de tablets e de dispositivos móveis porque normalmente são multi-colunas, normalmente incluem grandes quantidades de espaço em branco, e tudo é apenas “grande”, por falta de uma palavra melhor. Se técnicas de design responsivo forem usadas, esse layout de várias colunas deve se dividir em uma única coluna.

Se isso é tudo que seu design responsivo realmente faz quando é visualizado em um dispositivo móvel, você pode ter um problema. Quanto de um problema depende da sua atitude, mas bons designers se preocupam com a boa experiência de usuário. Eles se importam ainda mais com a má experiência do usuário. Se o seu site tiver um UX ruim e você quiser ser um bom designer, será necessário corrigi-lo.

Esse problema com o recolhimento de um layout de várias colunas em uma única coluna é que ele não funciona proporcionalmente. Se você tiver que reduzir algo horizontalmente e não fizer nenhuma outra alteração, ela obviamente será expandida verticalmente.

Despeje a água de um copo baixo e gordo em um copo alto e fino, e a água toma a forma do copo alto e fino, enquanto o volume de água permanece exatamente o mesmo. O que os designers precisam entender é que, com um site, precisamos que o volume seja alterado. Normalmente, não é uma boa ideia alterar a forma, mas manter o conteúdo exatamente o mesmo. Alguém Tem que Ceder.

Alguém que realmente conquistou o título de designer entenderá que isso representa um problema a ser resolvido e o que os designers realmente fazem é encontrar soluções para os problemas. Portanto, é o trabalho perfeito para você encontrar a melhor maneira de fornecer o conteúdo principal do site sem transformar a experiência do usuário em uma festiva de rolagem frustrante. Aqui estão algumas das coisas que vale a pena considerar ao dividir um design de desktop em um design móvel:

1. "Mobile First" é imbecil

Desculpe, mas é. Todos estão repetindo isso, mas como um conceito não é muito útil, porque se você realmente projetar “mobile first”, será um pesadelo tentar redimensioná-lo para um design de desktop, a menos que você esteja com um layout de coluna totalmente simples até o fim acima.

A melhor abordagem é projetar fisicamente pelo menos três (e até 11) layouts diferentes. Os mínimos que você pode considerar incluem:

  • Desktop
  • Paisagem Móvel
  • Portrait Mobile

Se você quiser ser um pouco mais completo, considere também:

  • Tablet Paisagem
  • Tablet de retrato

E a lista completa, se você quer ser absolutamente completo, seria:

  • Enorme área de trabalho
  • Área de trabalho comum
  • Tablet de paisagem grande
  • Tablet de retrato grande
  • Tablet de paisagem pequena
  • Tablet Pequeno Retrato
  • Grande paisagem móvel
  • Grande retrato móvel
  • Pequena paisagem móvel
  • Pequeno retrato móvel
  • Minúsculo / Wearable

Com tantas possibilidades diferentes, é óbvio por que uma abordagem preguiçosa de “tamanho único” é tão tentadora, mas também é óbvio por que existem tantas maneiras de arruiná-la.

2. Domar esse rodapé alastrando de página

O design da área de trabalho inclui um desses rodapés de grandes páginas com muitos links internos? Ótimo, isso provavelmente será muito útil em um desktop. Em um celular, parece ridículo e é mais do que apenas um toque irritante. Você pode criar rodapés de página completamente diferentes para cada ponto de interrupção do dispositivo. Apenas disponibilize esses links de rodapé em um diálogo modal e todos ganham.

3. Aceite algumas pequenas peculiaridades em dispositivos obscuros

Se um dispositivo em particular não é comum, então não é tão ruim se existem algumas peculiaridades no desenho que aparecem apenas quando visualizadas no dispositivo. Quanto mais popular for um dispositivo, mais você terá que trabalhar para se livrar de quaisquer peculiaridades que apareçam nele.

4. Você pode ocultar conteúdo que não contribui para a mensagem principal

A parte mais importante de um site é a mensagem principal. Sim, em alguns sites, a parte mais importante é a publicidade e eles existem apenas para exibir essa publicidade, mas se você tiver que escolher entre exibir a mensagem principal ou exibir a publicidade, escolha a mensagem. O Google é mais propenso a considerá-lo como pessoa non grata se você ocultar o conteúdo principal e, em seguida, exibir vários anúncios. É porque o conteúdo principal é o que o Google indexou com base em você e, quando esse conteúdo não é exibido, o Google considera isso enganoso.

Além disso, coisas como imagens que são puramente decorativas ou estéticas, mas que não contribuem significativamente para a mensagem principal, são candidatas a redução ou ocultação.

Algumas pessoas propuseram que a ocultação de conteúdo está "punindo" os usuários de dispositivos móveis, mas isso é uma noção absurda. A realidade é que você está escondendo o conteúdo porque ele está lá para melhorar a experiência da área de trabalho, mas não contribui suficientemente para a mensagem principal do site para que seja necessário

5. Você pode usar fundos alternativos

Recentemente, recebi uma tarefa ridícula em que o proprietário do site pagou por um plano específico e queria que todo o conteúdo fosse adaptado para se adequar a esse histórico. Os itens de ponto de bala precisavam ser um número muito exato de caracteres, o número total de linhas tinha que ser exato e assim por diante.

Esta é definitivamente uma má prática em web design, porque você deveria Nunca design de conteúdo para ajustar um layout. O layout deve sempre ser projetado para manter o conteúdo. Se, por algum motivo, o layout não puder conter o conteúdo, o layout deverá ser reprojetado, não o conteúdo. É bem possível usar fundos diferentes para diferentes dispositivos. Você é um designer. Use sua imaginação.

O conteúdo é o sangue vital de um site, e modificá-lo ou restringi-lo com base nas restrições de um layout é um sinal claro de amadorismo por parte do proprietário do site e um sinal de que o layout foi mal projetado no primeiro. Lugar, colocar. Defenda seus princípios, porque esse cliente será um problema se você concordar.

O cliente tem sempre razão, exceto quando esse cliente é um cliente de web design. Os clientes raramente sabem o que é melhor para eles, e é importante afirmar-se como um web designer que sabe como entregar o resultado certo para o cliente. Caso contrário, você corre o risco de criar outro site abominação.

6. Controlar manualmente a ordem de recolhimento (ou evitar referências espaciais no conteúdo)

Este é um problema complexo. A ordem de recolhimento de um site depende da ordem em que os divs são empilhados. Você precisa empilhar seus divs na ordem correta para que eles sejam recolhidos na ordem correta.

Um dos problemas que vem dos construtores de sites WYSIWYG drag-n-drop é que você normalmente não pode ditar em que ordem os divs são empilhados, e nos casos muito raros em que você pode fazer isso, seu trabalho duro é desfeito sempre você faz a menor edição, e você terá que voltar e hackear o código-fonte novamente.

Se você não controlar a ordem de recolhimento, esta imagem explica claramente o que pode dar errado. Além disso, você deve evitar fazer referências espaciais (como "na coluna à esquerda") como em um celular, o que quer que esteja à esquerda ou à direita pode ser deslocado para cima ou para baixo, mais Se você fizer o leitor achar importante o suficiente para rolar para ver, então eles terão que rolar novamente, e isso não é legal.

7. Você pode precisar de diferentes tamanhos de fonte para diferentes layouts

É fácil controlar o tamanho da fonte com CSS e você pode definir tamanhos de fonte diferentes e até mesmo fontes diferentes (se parecerem melhores) para tamanhos específicos de exibição. Você pode encontrar o tamanho de exibição com consultas de mídia CSS e modificar o tamanho da fonte ou a fonte a ser em valores que exibem o conteúdo para o máximo de vantagem no tipo de dispositivo que você está segmentando.

8. É melhor usar imagens responsivas

Todas as imagens devem responder sempre que possível. Isso traz consigo que, às vezes, o detalhe de uma imagem pode ser perdido se ela for reduzida demais. Uma solução para esse problema é tornar a imagem clicável para que o usuário possa visualizar uma versão ampliada da imagem separada do conteúdo. A maneira normal de fazer isso é através de uma caixa de diálogo modal.

imagem de cabeçalho cortesia de

Bogdan Rancea

Bogdan é um membro fundador da Inspired Mag, acumulando quase 6 anos de experiência neste período. Em seu tempo livre, ele gosta de estudar música clássica e explorar artes visuais. Ele é muito obcecado com fixies também. Ele é dono do 5 já.