Por que o web design responsivo ainda decide se as pessoas compram

O design responsivo tem sido uma prática padrão há mais de uma década, e quase todas as empresas dirão que seu site é responsivo. O que eles geralmente querem dizer é que ele não quebra no telefone.

Não quebrar e funcionar bem são padrões diferentes, e a diferença entre eles custa dinheiro de verdade.

O dispositivo foi dividido

Para a maioria das empresas de serviços e de consumo, os dispositivos móveis representam bem mais da metade do tráfego – frequentemente, consideravelmente mais. Mesmo assim, a maioria das equipes ainda projeta em um monitor de desktop grande, revisa em um monitor de desktop grande e assina em um monitor de desktop grande.

Isso produz um site que atende à minoria de visitantes e engana a maioria.

Onde a conversão para celular realmente falha

Toque em alvos muito pequenos

Os dedos são imprecisos. Elementos interativos menores que aproximadamente pixels 44 por 44 produzem toques errados, e toques errados produzem frustração. Isso aparece de forma mais prejudicial nos menus de navegação, campos de formulário e botões de checkout – exatamente os elementos com os quais as pessoas não podem se dar ao luxo de lutar.

Links muito próximos causam um problema relacionado: as pessoas tocam no link errado, voltam e alguns deles simplesmente saem.

Formulários projetados para teclados

Os formulários são o local mais comum em que a conversão em dispositivos móveis é perdida. Cada campo exige mais esforço em um telefone do que em um desktop, e o esforço aumenta.

Correções práticas: remova todos os campos que você realmente não precisa, use tipos de entrada apropriados para que o teclado correto apareça, habilite o preenchimento automático com atributos de preenchimento automático adequados, valide inline em vez de enviar e nunca limpe um formulário em caso de erro.

Se você solicitar um número de telefone, o nome da empresa e o cargo em um formulário de consulta inicial, estará negociando uma taxa de conversão por dados que provavelmente não usará.

Conteúdo oculto para simplificar o layout

Um atalho comum é ocultar conteúdo secundário em telas menores para manter o layout limpo. O problema é que o conteúdo oculto é frequentemente o que um comprador hesitante precisa – preço, informações de entrega, especificações, garantias.

A paridade de conteúdo é importante. Se as informações ajudam alguém a decidir sobre o desktop, também o ajudam a decidir sobre o celular. Reorganize-o, transforme-o em um acordeão, mas não o remova.

Desempenho em redes reais

O desempenho móvel não se trata apenas do tamanho do arquivo. Os telefones têm menos poder de processamento e as redes móveis têm maior latência e largura de banda variável. Uma página que carrega em um segundo no wifi do escritório pode levar oito em uma conexão móvel em um prédio com sinal fraco.

JavaScript é particularmente caro aqui, porque deve ser baixado, analisado e executado – e a análise depende da CPU, que é onde os telefones são mais fracos em relação aos desktops.

Alcance do polegar

As pessoas seguram os telefones de maneiras específicas, e a zona de alcance confortável para o polegar é a parte inferior e intermediária da tela. As ações primárias colocadas no topo de uma página longa ou no canto superior direito são mensuravelmente mais difíceis de alcançar em telefones maiores.

É por isso que as barras inferiores fixas para frases de chamariz primárias funcionam bem em dispositivos móveis. Isto não é uma tendência. Segue-se de como uma mão segura o dispositivo.

Teste em dispositivos reais

Redimensionar uma janela do navegador de desktop é útil para verificar pontos de interrupção de layout e nada mais. Ele não pode mostrar a precisão do toque, o alcance do polegar, como o teclado na tela obscurece o campo em que você está digitando ou como a página se comporta em um telefone Android de médio porte em uma conexão lenta.

Teste em um dispositivo real, de preferência um dispositivo intermediário comum, em vez do carro-chefe mais recente. Isso está mais próximo do que a maioria dos visitantes está usando.

Mobile-first é um método de trabalho

Projetar primeiro o dispositivo móvel não significa melhorar a versão móvel em detrimento do desktop. É uma restrição que força a priorização – com espaço de tela limitado, você tem que decidir o que realmente importa, e essa disciplina tende a melhorar a versão desktop também.

Começar com uma tela pequena e aprimorar para cima produz uma hierarquia mais clara do que começar com uma tela grande e reduzir. Construímos desta forma como padrão em todos projeto de web design, e a diferença de conversão geralmente é visível no primeiro mês após o lançamento.

Layout responsivo é apenas metade do trabalho: veja como um site focado em conversão se paga, ou leia nosso Perguntas frequentes sobre web design para cronogramas e propriedade.