5 erros simples e responsivos (e como evitá-los)

Quase 49% de todo o tráfego da web em todo o mundo é originário de dispositivos móveis (excluindo tablets). Se você não criar sites compatíveis com dispositivos móveis, provavelmente perderá essa parte enorme do seu público-alvo. Além disso, se você deseja melhorar seu SEO, não pode ignorar smartphones; O Google prioriza celulares com a indexação em dispositivos móveis.

Tudo isso exige um design responsivo da web, através do qual os elementos do seu site podem ser ajustados de acordo com as dimensões da tela. Ao criar seu design responsivo, você pode acabar cometendo alguns erros comuns. Para ajudá-lo a evitá-los, reunimos abaixo algumas possíveis armadilhas de design responsivas e suas soluções.

1. Usando tamanhos de dispositivo como pontos de interrupção

Segundo o OpenSignal, havia mais de 24.000 dispositivos Android diferentes em 2015; esse número aumentou nos últimos cinco anos. Como existem tantas variedades de dispositivos, as dimensões da tela também diferem bastante. Para garantir que seu site ofereça uma experiência de navegação perfeita em todos os dispositivos, você precisa acertar seus pontos de interrupção.

Se você se concentrar apenas em pontos de interrupção do tamanho do dispositivo em seu design responsivo, seu site poderá não aparecer corretamente em dispositivos mais novos. Não se limite às dimensões dos dispositivos atuais para pontos de interrupção. Em vez disso, escolha designs realmente responsivos que possam se ajustar bem a qualquer tamanho de tela.

Uma ótima idéia é adotar a abordagem mobile-first, na qual você cria seu site para as telas menores e, em seguida, dimensiona-o lentamente para tamanhos de tela maiores. Se os dispositivos portáteis são importantes para o seu site, você deve começar a projetar com eles.

À medida que você aumenta, o design do site pode começar a se sentir tenso. Em tal situação, você pode adicionar consultas de mídia para fazer as alterações necessárias. Isso ajudará seu design a permanecer confortável em cada etapa. Você precisa continuar esse processo até atingir os maiores tamanhos de tela. Idealmente, isso seria de até 2800 pixels, pois a maioria dos usuários tem resoluções inferiores a isso.

Usando esse método, seus pontos de interrupção serão introduzidos apenas quando forem necessários e não de acordo com o tamanho do dispositivo. Isso pode ajudá-lo a oferecer uma experiência de navegação perfeita para seus visitantes em todos os dispositivos. Você pode usar ferramentas como LambdaTest ou BrowserStack para verificar se o seu site é bom em novos dispositivos.

2. Não considerando os tamanhos dos arquivos

Elementos visuais podem tornar seu site mais atraente para os usuários. No entanto, você deve ter cuidado ao adicioná-los ao seu site. Eles geralmente são maiores que arquivos de texto e podem diminuir a velocidade de carregamento da página. À medida que o tempo de carregamento da página aumenta, aumentam as taxas de rejeição. De fato, de acordo com a Akamai, as taxas de rejeição aumentaram 6% quando as páginas levaram 1,5 segundos a mais para carregar durante a temporada de férias de 2017.

Portanto, é necessário otimizar suas imagens e vídeos para reduzir seus tamanhos. Você pode usar ferramentas como TinyPNG ou Compactar JPEG para conseguir isso. Se você é um usuário do WordPress, pode instalar o plug-in Smush para realizar esse trabalho.

Minimizar seus arquivos CSS, HTML e JavaScript também pode ajudar. Você também deve considerar o cache do navegador, o que pode aumentar a velocidade de carregamento da página para visitantes que retornam. Por fim, remova todas as ferramentas de terceiros e dependências JavaScript desnecessárias. Para verificar a velocidade de carregamento da página atual e encontrar possíveis soluções, você pode usar o Google PageSpeed ​​Insights. Você também pode usar a Ferramenta de velocidade de site para celular do Google para ver a rapidez com que seu site é carregado nos celulares.

3. Não usando o gerenciamento adaptável de imagens

Embora o tamanho do arquivo de uma imagem seja importante, suas dimensões também são. Você pode não se preocupar em usar imagens de diferentes dimensões no design convencional de sites. No entanto, quando se trata de design responsivo, perder o gerenciamento de imagens pode ser catastrófico para a sua experiência do usuário. A última coisa que você deseja que seus visitantes visualizem é imagens enormes em uma tela pequena.

Para evitar essa armadilha, você deve usar técnicas de gerenciamento de imagem adaptável. Você pode seguir os seguintes métodos para conseguir isso:

• Seleção baseada em resolução: forneça a mesma imagem com diferentes resoluções;
• Seleção baseada na proporção de pixel de dispositivo: faça as imagens parecerem nítidas e reduza artefatos perceptíveis com base nos tamanhos de tela;
• Seleção baseada em viewport: varie imagens com base nos dispositivos usados ​​e sua orientação;
• Direção de arte: altere ou corte a imagem com base na tela para melhorar sua experiência de visualização.

4. Ocultando Conteúdo

Um dos maiores erros que você pode cometer ao criar um design responsivo para o seu site é ocultar o conteúdo. Você pode fazer isso para ajustar seu site em uma tela menor ou aumentar a velocidade de carregamento da página. No entanto, você deve evitá-lo a todo custo. Lembre-se de que as pessoas não estão acessando seu site apenas para procurar uma pequena amostra. Eles querem a mesma experiência de navegação que recebem nos desktops.

Seu objetivo deve ser proporcionar a eles essa experiência omnichannel. Isso é necessário porque muitos deles podem acessar o site a partir de vários dispositivos durante um dia. É por isso que você deve garantir a consistência do conteúdo no design responsivo. Obviamente, você pode priorizar o conteúdo de maneira diferente nos dispositivos por meio de aprimoramento progressivo.

5. Mantendo a navegação consistente

Proporcionar uma experiência de navegação consistente aos visitantes em todos os dispositivos é da maior importância. No entanto, a consistência absoluta também não é boa. Um dos maiores erros que você pode cometer enquanto tenta fazer isso é manter uma navegação consistente em todos os tamanhos de tela.

Quando o tamanho da tela diminui, uma barra de navegação consistente pode acabar ocupando metade da tela e estragar a experiência de navegação. Considere reduzir a navegação com o tamanho da tela e alterá-la para um menu de hambúrguer.

Juntamente com a sua navegação, os tamanhos dos botões e os layouts visuais também não devem permanecer consistentes. No entanto, tipos de letra, links e tratamentos de cores devem ser consistentes.

Pensamentos finais

Se você deseja atingir todo o seu público-alvo, não pode evitar o design responsivo. No entanto, você deve ter cuidado ao implementá-lo e evitar todos os erros possíveis. Ofereça aos seus visitantes uma experiência de navegação consistente em todos os dispositivos e não oculte nenhuma informação deles. Otimize o tamanho dos arquivos para melhorar a velocidade de carregamento da página. Além disso, use técnicas de gerenciamento de imagem adaptável para reduzir ou aumentar as dimensões da imagem de acordo com os tamanhos da tela.

Não mantenha sua navegação consistente, pois isso pode prejudicar a experiência de navegação. A mesma regra também se aplica a botões e layouts visuais. Por fim, escolha designs realmente responsivos e não se limite a criar pontos de interrupção com base nos dispositivos atuais. A chave é ir para o celular primeiro quando você cria seu site.

Imagem em destaque via Unsplash.