Em 2020, o número de usuários globais de smartphones deve totalizar 3,5 bilhões, marcando um aumento de 9,3% em relação a 2019.
87% dos brasileiros agora possuem um celular de algum tipo, sendo 81% desses celulares smartphones.
Cada vez mais, as pessoas estão navegando na web em seus telefones por conveniência, em vez de sentar em seu computador desktop ou laptop — e há dados para fazer backup.
No terceiro trimestre de 2019, os dispositivos móveis (excluindo tablets) geraram 51,5% do tráfego global de sites. Isto é enorme.
A maioria de nós já está otimizando nossos sites para dispositivos móveis, mas isso não significa necessariamente que o que você tem é atender às necessidades de seus usuários.
Para garantir que seu site esteja de acordo com os padrões, aqui estão as sete práticas recomendadas de design responsivo que ajudarão você a garantir que seus sites ofereçam experiências de alto nível em todos os dispositivos em 2020!
7 práticas recomendadas de design responsivo que você precisa conhecer
1. Minimizar e priorizar
Limitados pelo tamanho, os dispositivos móveis simplesmente não oferecem o maior número de imóveis para trabalhar quando se trata de conteúdo e imagens.
Quando você pensa em uma página de site de desktop, há um desejo natural de dividir as informações que precisamos para exibir em ‘seções’. Pense nessas seções como parágrafos em um artigo de notícias. Desta forma, você é facilmente capaz de quebrar e ler cada parte da página sem confusão.
Usando o Slack como exemplo, esbocei as diferentes seções de sua página inicial que eles têm para ilustrar como isso se parece.
Essas seções realmente permitem que o conteúdo respire bem no desktop, mas no celular, você precisa ter certeza de que essas seções são reorganizadas de uma maneira que não aumente excessivamente o comprimento da página.
Em situações em que você tem seções menores próximas umas das outras, como na página inicial de Wistia abaixo, você pode deslocar os quatro blocos empilhados em cima um do outro.
Source: Wista
Esta técnica funciona bem para seções menos interativas ou detalhadas como esta. Mas e se esta seção tiver 15 blocos, ou interações específicas que só acontecem quando você paira?
Se você tentou dimensioná-lo como o exemplo anterior, a página será significativamente mais longa e esses efeitos ‘hover’ não funcionarão mais (já que você não está exatamente usando um mouse para navegar no seu telefone).
São situações como essas que têm levado as pessoas a se aproximarem de seu site com uma mentalidade móvel. Isso significa que você coloca as necessidades de seus usuários móveis em primeiro lugar..
Você não está criando um site de desktop e removendo funcionalidades que tornam o site menos intuitivo no celular. Você primeiro elabora quais são as melhores experiências no celular, depois adapta-a a um layout de desktop onde você pode descobrir se você quer melhorar a experiência porque você tem vantagens com o espaço.
Embora este seja o cenário ideal, você pode não estar em posição de fazer um redesenho completo do site e seguir essa abordagem. Enquanto isso, tente oferecer a melhor experiência possível otimizando como é o desktop para o mobile.
Revise algumas de suas páginas mais importantes ou com melhor desempenho — esta pode ser sua página inicial, páginas de serviço ou páginas de produtos. Em seguida, compare seu desempenho em dispositivos móveis e desktop (usando ferramentas como o Google Analytics); olhar para o tempo na página, mapas de calor para rolagem e toques, taxas de conversão, etc. Isso ajudará a dar alguns dados de benchmark sobre como eles se apresentam atualmente.
Em seguida, tire algum tempo para revisar as páginas selecionadas e tente responder sim ou não para ajudar a avaliar se pode haver ou não um pouco de TLC necessário:
- Algumas seções estão ocupando mais de quatro vezes o espaço que tinham na área de trabalho?
- Certas interações não funcionam tão bem no celular como no desktop?
- Os tamanhos das fontes são difíceis de ler no celular? Você se vê apertando os olhos?
- De acordo com seus mapas de calor, os usuários estão rolando as mesmas distâncias ou distâncias semelhantes quando comparados com a área de trabalho?
- Os usuários estão ficando presos em algum lugar, fazendo com que seu tempo na página seja significativamente menor?
Uma vez que você identifique suas áreas problemáticas, você pode então começar a chegar a soluções. Você deve esconder certas seções? As seções precisam ser encurtadas para se encaixarmelhor nas telas móveis? Há outras maneiras de organizar seções para que elas ainda alcancem o mesmo objetivo?
Para criar soluções específicas, trabalhe com seu designer para investigar essas perguntas para ajudar a definir o caminho certo para renovar o layout móvel do seu site.
Uma vez que você planeja o que você precisa fazer, você pode desenvolver essas soluções em algumas das seções mais populares do seu site. Isso lhe dá a oportunidade de testar se eles melhoram ou não suas métricas.
Uma vez que você sente que tem dados suficientes, você pode implementar essas soluções em todas as áreas do seu site que puder.
Quem está fazendo isso bem: ESPN
Como a ESPN é um site de notícias esportivas, o site tem uma tonelada de informações para oferecer na página inicial.
No site da área de trabalho, há espaço para esse enfeite, mas no site móvel, nem tanto.
No celular(à direita, acima),você notará que a seção de desktop central é a primeira coisa que você verá. Os quatro vídeos abaixo da manchete principal são agora uma parte de um controle deslizante, em vez de ser empilhado em cima um do outro.
Esses “links rápidos” para outras partes do site que estão na coluna esquerda não são mais visíveis. E eles escolheram consolidar certas seções para tornar a página mais curta.
À medida que você rola para baixo, você notará que eles começam a organizar informações em uma ordem mais específica com base no que os usuários provavelmente desejam. Por exemplo, abaixo os vídeos eles inserem a lista das principais matérias, em vez de ir direto para os blocos maiores de artigos em destaque.
São táticas como esta que ajudarão você a organizar sua hierarquia móvel estrategicamente para que você dê aos seus usuários as informações mais valiosas primeiro.
2. Torne seu fundo do funil call-to-action (CTA) fácil de encontrar
Seu site de negócios provavelmente tem uma chamada principal específica que você deseja que seus usuários completem. Talvez seja para comprar um software, agendar uma consulta ou se inscrever no seu aplicativo.
Para levar as pessoas a completar esse objetivo, você provavelmente tem um call-to-action principal em sua navegação e em todo o seu site, especialmente no desktop.
Se você estiver rastreando seus CTAs, provavelmente notará que seu botão de navegação é uma das principais maneiras pelas quais as pessoas chegam à página do gateway onde se converteriam. Então, naturalmente, é muito importante ter esse botão lá o tempo todo.
Uma das oportunidades que as pessoas ignoram é ter certeza de que seu CTA principal é claro e fácil de encontrar no celular. Vamos dar uma olhada em Brightedge, por exemplo..
Brightedge tem um site realmente incrível que articula muito claramente o que seu produto faz e o valor que oferece aos seus usuários. Em uma inspeção mais minuciosa de seu site no celular, porém, observe como sua grande ‘demonstração de solicitação’ CTA não está mais na navegação.
Recomendo ter cuidado em remover seu CTA de navegação no celular. Fazer isso naturalmente torna muito mais difícil para seus visitantes móveis encontrar essa página.
Recomendo mantê-lo consistente no celular e abrir espaço para ele. Se você absolutamente não pode, então você deve pelo menos tentar colocar esse botão na navegação do hambúrguer e torná-lo o mais visível dentro da tela possível sem a necessidade de rolar.
Dessa forma, o botão ainda é uma área visitada com frequência do seu site.
Quem está fazendo isso bem: Salesforce
A Salesforce mantém seu botão “tente de graça” na barra de navegação em todos os dispositivos, mas apenas muda sua posição e cor.
Eles também têm dois CTAs adicionais na parte inferior da tela para chamá-los ou conversar com eles.
Mas se você é uma empresa que não precisa desses CTAs ‘chat’ e ‘call’, mas precisa de uma maneira de promover o CTA principal do seu site (porque você não pode encaixá-lo na área de navegação), você poderia implementar um layout de barra inferior semelhante onde você em vez de colocar esse CTA principal.
Eu também tenho que dar pontos de bônus salesforce para a interação do CTA. Em vez de levar os visitantes para uma página separada com um formulário (o que faz no desktop), o formulário desliza para fora do lado direito da tela no celular, semelhante a uma barra de olá, mantendo os visitantes na página.
Isso é benéfico porque o usuário não é forçado a esperar por uma página totalmente separada para carregar, o que no celular pode ser problemático devido à largura de banda ou velocidade da internet. Ele simplesmente ajuda o usuário a completar a ação desejada mais rapidamente.
3. Use gráficos vetoriais escaláveis (SVGs)
SVGs ou Scalable Vector Graphics são imperdíveis para qualquer design responsivo que esteja utilizando ilustrações ou ícones. Ao contrário dos arquivos de imagem (JPG/PNG), os SVGs são infinitamente escaláveis.
Você pode ficar tranquilo sabendo que qualquer ícone ou gráfico permanecerá ultra-afiado em todas as experiências sem ter que se preocupar com resolução ou pixelação.
Isso resulta em um visual consistentemente polido, não importa como o site está sendo visto.
Além disso, os SVGs geralmente têm um tamanho de arquivo menor, o que ajuda o site a carregar mais rápido. Ninguém quer sentar no telefone e assistir a um buffer de imagem por causa do tamanho.
(SVG on the left, PNG on the right)
Para esclarecer, este tipo de arquivo não é uma opção para fotografia normal, ele está disponível apenas para gráficos gerados por computador.
Quem está fazendo isso bem: HubSpot
O site da HubSpot conta com ilustrações complexas em quase todas as páginas.
Se estes foram salvos como PNGs, eles poderiam facilmente ser cinco vezes o tamanho devido à quantidade de detalhes, o número de cores sendo usadas e as grandes dimensões necessárias.
O melhor de tudo, essas imagens parecem nítidas, independentemente se você as estiver vendo no desktop ou no celular.
4. Padroelepadrie áreas e botões clicáveis
No celular, botões e links serão tocados por um dedo humano, não por um clique preciso do mouse — então áreas interativas precisam ter uma área maior para acomodar essa diferença.
Quão grandes eles precisam ser? Bem, isso depende do usuário, mas em média, recomenda-se que qualquer elemento clicável em um dispositivo móvel tenha pelo menos 48 pixels dealtura.
Isso significa que você precisa otimizar para botões, formulário sinções, links inline em blogs, layouts de cartão, links de navegação e muito mais.
Você provavelmente vai achar que é mais difícil cumprir essa regra em links inline, como aqueles em artigos de blog. Se você encontrar seus usuários lutando para tocar em links, você pode tentar essa técnica que aumenta a área clicável ao seu redor (Nota: Esta solução precisa de um desenvolvedor para ajudar).
Isso ajudará a garantir que haja menos erros na navegação através do seu site, minimizando a frustração potencial e mantendo o espectador engajado.
Quem está fazendo isso bem: Vidyard
Vidyard faz um excelente trabalho mantendo quaisquer áreas clicáveis importantes o suficiente para que seus polegares não estejam atrapalhando.
Nas imagens, você notará que Vidyard realmente aumenta o tamanho de seus dois botões na seção de heróis, em vez de mantê-los do mesmo tamanho. Os três blocos logo abaixo do herói também são totalmente clicáveis, em vez de apenas fazer o texto de cores diferentes com a seta clicável.
Elementos propositais semelhantes como este são aplicados em toda a maioria do site, facilitando a navegação.
5. Imagens responsivas
Diferentes dispositivos têm diferentes necessidades de tamanho de imagem.
Uma página de desktop pode precisar de uma imagem de 1200px de largura em resolução total, enquanto a versão móvel dessa página pode precisar apenas dessa imagem a 400px de largura.
Isso é efetivamente um terço do tamanho físico, o que se traduz aproximadamente em um terço do tamanho do arquivo também. Isso é uma coisa importante a se ter em mente.
A maneira antiga de fazer as coisas era carregar a imagem de grande resolução (1200px) e, em seguida, apenas usar esse mesmo arquivo em todas as plataformas do dispositivo – mas esses arquivos grandes podem diminuir drasticamente o tempo de carregamento do seu site.
Para uma ótima experiência responsiva, é melhor usar duas versões diferentes da mesma imagem para celular e desktop.
Por exemplo, no celular, estamos usando apenas (ou “chamando”) a imagem de 400px que precisamos, em vez da grande imagem de 1200px, que seria reduzida para 400px uma vez carregada.
Compor isso em uma página com várias imagens e você pode acabar com uma experiência de carregamento visivelmente mais rápida, especialmente se o site móvel estiver sendo carregado no serviço de celular e não wi-fi.
Existem alguns artigos bastante aprofundados que analisam como realizar isso para que você possa designar a imagem que deseja mostrar em tamanhos de tela específicos.
Se você está usando páginas de sites com a HubSpot para construir seu site, você está com sorte! Na verdade, o HubSpot permite o redimensionamento automático da imagem no conteúdo por padrão.
Quem está fazendo isso bem: Adobe
Ao contrário de outros exemplos, o visual para este será um pouco mais focado em código para que você possa ver um exemplo de como essa técnica se parece.
Abaixo está o código usado para produzir uma imagem no site da Adobe. Você notará que existem vários arquivos ‘.jpg’ separados em diferentes linhas.
Cada um desses JPGs representa uma imagem de dois espetáculos em tamanhos de tela diferentes; você pode dizer pela tag ‘mídia’ que está associado a cada objeto ‘fonte’.
O resultado é que imagens de tamanho sumido serão exibidas em diferentes dimensões especificadas do dispositivo. Dependendo da sua página web, você pode descobrir que precisa de mais ou menos variações de imagem.
6. Pense em tipografia
É importante considerar a legibilidade do seu site em todas as plataformas e dispositivos, mas no celular, você precisa estar muito mais atento às necessidades de legibilidade de seus usuários.
Se as pessoas não podem ler sua proposta de valor ou qualquer um de seu conteúdo, para esse assunto, eles provavelmente não vão ficar por perto.
Você quer ter certeza de que o conteúdo é fácil de ler e verdadeiramente otimizado para o tamanho do dispositivo para que os visitantes não fiquem de olho.
Isso também significa tomar nota das tipografias que você gostaria de usar em seu site, e se elas fariam para legibilidade boa ou ruim em telas pequenas.
Lembre-se de equilibrar os títulos e tamanhos de fonte do corpo para o tamanho do dispositivo também. Você não quer que seus tamanhos de fonte se sintam drasticamente diferentes um do outro ao ponto em que parece estranho e antinatural ler.
Eu também escrevi um artigo inteiro no blog sobre como descobrir os tamanhos de fonte certos para desktop e mobile que eu recomendo mergulhar para ajudar a obter mais específico para regras de dimensionamento de fontes.
Quem está fazendo isso bem: IMPACTO
Eu sei, eu sei… um pouco pouco ortodoxo para incluir-nos aqui como um exemplo, mas estamos constantemente testando e ajustando nossos tamanhos de fonte com base no que estamos ouvindo de nossos visitantes, então eu simplesmente não poderia ajudá-lo!
Os títulos criam uma grande hierarquia nas páginas onde o texto reina. Na página de listagem do blog, a hierarquia de nível superior é dada aos títulos do blog para que os visitantes possam desmantelá-los rapidamente à medida que procuram o que ler.
Os artigos internos também têm tamanhos de fonte que são grandes o suficiente para caber uma quantidade decente de conteúdo à vista enquanto ainda são legíveis.
Embora pudéssemos ter feito o tamanho da fonte 14px para caber mais conteúdo à vista, uma grande parcela dos leitores simplesmente não será capaz de ler os artigos tão claramente. A fonte maior e a altura da linha espaçosa também significam que você não está lutando para encontrar qual linha vem a seguir.
7. Aproveite os recursos do dispositivo
Nos smartphones, você tem a capacidade de fazer uma variedade de tarefas diversas. Você pode fazer chamadas, enviar mensagens e abrir aplicativos — tudo isso diretamente do navegador.
Aproveite esses recursos em seu site para não apenas melhorar sua experiência móvel para os usuários, mas até mesmo aumentar as conversões e incentivar a ação.
Por exemplo, enquanto estiver em um site de desktop, você pode listar o número de telefone. Na versão móvel desse site, você pode querer listar o número de telefone dentro de um botão ou área clicável que ele solicitará automaticamente uma chamada quando clicado.
Essa ideia também pode ser aplicada a endereços de e-mail, abrindo uma nova mensagem em um aplicativo de e-mail com um destinatário preenchido automaticamente quando clicado.
Os ícones das mídias sociais também podem ser codificados de tal forma que, quando clicados, eles abrirão diretamente no aplicativo em vez de um navegador móvel.
Tudo isso pode tornar tremendamente mais fácil para seus visitantes se conectarem e se comunicarem com você.
Quem está fazendo isso bem: Casas Metodistas Unidas
Às vezes é bom ligar e falar com alguém logo de cara quando você quer obter informações. A UMH (um cliente nosso) reconheceu isso e utilizou recursos de dispositivos móveis para trazer essa conveniência ao seu site móvel.
O que eles fizeram foi pegar seu número de telefone, colocá-lo dentro de um botão clicável, e colocá-lo bem sua navegação no celular.
Com a adição de uma pequena quantidade de código simples, agora quando ele é grampeado em um dispositivo móvel, ele perguntará ao usuário se está tudo bem para chamar esse número. Uma vez aceito, o dispositivo inicia uma chamada automaticamente. Nada de mexer com uma caneta e papel, ou tentar lembrar o número para discar.
Design responsivo hoje
Em 2020, tudo isso é obrigatório se você quiser ter um site bem otimizado para seus usuários. É possível que metade do tráfego do seu site esteja vindo do celular; não é uma opção para aliená-los, dando-lhes uma experiência móvel sub-par.
Ao auditar seu site com essas práticas recomendadas de design responsivas em mente, você será capaz de determinar se o seu site é realmente adequado para a idade moderna e móvel em que vivemos, ou se você precisa fazer algumas mudanças.
Talvez um redesenho completo seja para tornar seu site uma superestrela responsiva. Ainda não tem certeza? Vamos conversar! Estamos felizes em ajudá-lo a descobrir as coisas para este ano e além. Entre em contato com a GSP Sites e veja como podemos lhe ajudar.
