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

A maioria dos sites que usam design responsivo está usando-o 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 perfeitamente, e muitos deles não. Para aqueles que funcionam perfeitamente, provavelmente será uma questão de sorte.

O conceito de design responsivo é simples, mas sua própria 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, portanto, geralmente planejam um projeto baseado em um layout de área de trabalho.

Os layouts de desktop diferem de layouts de tablet e layouts de celular porque são normalmente com várias colunas, normalmente incluem grandes quantidades de espaço em branco e tudo é apenas “grande”, na falta de uma palavra melhor. Se forem usadas técnicas de design responsivo, esse layout de várias colunas deve ser dividido em uma única coluna.

Se isso é tudo que o seu design responsivo realmente faz quando é visualizado em um dispositivo móvel, você pode ter um problema. O grau de problema depende da sua atitude, mas bons designers se preocupam com uma boa UX. Eles se preocupam ainda mais com a experiência do usuário ruim. Se o seu site tem UX ruim e você quer ser um bom designer, você precisa consertar isso.

O problema de recolher um layout de várias colunas em uma única coluna é que ele não funciona em uma base proporcional. Se você tiver que encolher algo horizontalmente e não fizer nenhuma outra alteração, obviamente vai expandir verticalmente.

Despeje a água de um copo baixo e gordo em um copo alto e fino, e a água toma a forma de um 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 mude. Normalmente não é uma boa ideia mudar a forma, mas manter o conteúdo exatamente o mesmo. Alguém Tem que Ceder.

Alguém que realmente ganhou o título de designer vai 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 um festival de rolagem frustrante. Aqui estão algumas coisas que vale a pena considerar ao dividir um design de desktop em um design móvel:

1. “Mobile First” é idiota

Desculpe, mas é. Todo mundo está repetindo isso, mas como um conceito não é muito útil porque se você realmente projetar "primeiro para dispositivos móveis", será um pesadelo tentar redimensioná-lo para um design de desktop, a menos que você esteja usando um layout de coluna puramente única 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 do tipo "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 do desktop inclui um daqueles rodapés de página enormes e cheios de links internos? Ótimo, 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. Basta disponibilizar esses links de rodapé em um diálogo modal e todos ganham.

3. Aceite algumas pequenas peculiaridades em dispositivos obscuros

Se um determinado dispositivo não é comum, então não é tão ruim se houver algumas peculiaridades no design que aparecem apenas quando visualizado nesse 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 central. Sim, em alguns sites, o mais importante é a publicidade e eles existem apenas para veicular essa publicidade, mas se você tiver que escolher entre mostrar a mensagem central ou mostrar a publicidade, escolha a mensagem. É mais provável que o Google considere você como pessoa non grata se você ocultar o conteúdo principal e, em seguida, exibir um monte de anúncios. É porque esse conteúdo central é o que o Google indexou você com base, e quando esse conteúdo não é mostrado, 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 ocultar conteúdo é “punir” os usuários de celular, mas essa é uma noção um pouco absurda. A realidade é que você está escondendo o conteúdo porque está lá para aprimorar a experiência da área de trabalho, mas não contribui suficientemente para a mensagem central 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 de fundo específico e queria que todo o conteúdo fosse adaptado para caber nesse plano de fundo. Os itens dos marcadores devem ter um número exato de caracteres, o número total de linhas deve ser exato e assim por diante.

Esta é definitivamente uma má prática em web design, porque você deveria Nunca projetar conteúdo para caber em um layout. O layout deve sempre ser projetado para conter o conteúdo. Se por algum motivo o layout não pode conter o conteúdo, então o layout deve ser redesenhado, não o conteúdo. É bem possível usar fundos diferentes para dispositivos diferentes. 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 de que o layout foi mal projetado no primeiro Lugar, colocar. Mantenha seus princípios, porque esse cliente vai 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 se afirmar como um web designer que sabe 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 diferentes tamanhos de fonte e até diferentes faces de fonte (se elas parecerem melhores) para tamanhos específicos de exibição. Você pode encontrar o tamanho de exibição com consultas de mídia CSS e, em seguida, modificar o tamanho da fonte ou a face da fonte para valores que exibam o conteúdo com vantagem máxima no tipo de dispositivo que você está almejando.

8. É melhor usar imagens responsivas

Todas as imagens devem ser responsivas sempre que possível. Isso acarreta que às vezes os detalhes de uma imagem podem ser perdidos se ela for reduzida demais. Uma solução para esse problema é tornar a imagem clicável para que o usuário possa ver uma versão ampliada da imagem separada do conteúdo. A maneira normal de fazer isso é por meio 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á.