Você se certificou de que seu site é compatível com dispositivos móveis?
Você sabia que o Google introduziu uma nova política chamada Mobile-First?
Mais e mais usuários da web estão abandonando os computadores de mesa e, em vez disso, navegam e compram usando seus dispositivos móveis.
O web design responsivo tornou possível criar sites que funcionam em todas as plataformas em um nível uniforme. Mas, mesmo assim, o design responsivo é apenas uma fração das estratégias de otimização de UX para dispositivos móveis.
Se você deseja uma verdadeira otimização de desempenho, também terá que considerar outras alternativas.
É por isso que há uma ênfase tão forte na construção de seu site como um experiência móvel em primeiro lugar. Em termos simples, mobile-first significa que seu design e conteúdo são otimizados para usuários móveis primeiro.
Dito isto, este post não é sobre como criar um site totalmente novo. Em vez disso, veremos alguns princípios fundamentais de design para dispositivos móveis. E passe algum tempo concentrando-se em detalhes técnicos para otimizar a experiência do usuário para seus usuários móveis.
últimas postagens
Nº 1: Projetando com dispositivos móveis em mente
A web é construída em grande parte com base no princípio de atender usuários de desktop. A web real, os avanços reais em tecnologias, são melhor exibidos em uma bela exibição em tela cheia. Mas, smartphones e outros dispositivos móveis são uma coisa, e é hora de começar a se adaptar ao conceito de design mobile-first.
Além do design responsivo de bom senso, que outros elementos de design você deve implementar em seus designs da Web para dispositivos móveis?
- Priorização. As telas móveis são limitadas ao espaço de exibição disponível. Além disso, as telas móveis apresentam o conteúdo de maneira vertical, em oposição a uma estrutura muito mais ampla — horizontal — para desktops. Isso significa que você deve projetar usando priorização. Quais elementos são de extrema importância para os usuários verem? Se houver botões CTA, quão fácil é vê-los para o usuário móvel?
- Conteúdo primeiro. Cor em segundo lugar. Você pode fazer algumas coisas interessantes com design móvel, mas certamente não no escopo do design de desktop. Então, dê lugar ao conteúdo primeiro. Torne sua cópia e outras partes do conteúdo facilmente legíveis e acessíveis. Uma tela móvel é muito menos indulgente com os elementos visuais que distraem.
- Fácil navegação. Em um dispositivo móvel, você não pode simplesmente clicar em qualquer lugar e retornar à página inicial. A menos, é claro, que você planeje esse tipo de navegação com antecedência. E você deveria. Experimente widgets Scroll-to-Top, mas também cabeçalhos aderentes sempre que possível.
A melhor maneira de verificar se você está fazendo certo é usar o telefone (eu faço isso o tempo todo!) e visitar seu site. Faça um exame completo de como as coisas se sentem e fluem juntas.
Se você estiver sentado em um café ou esperando um voo em um aeroporto, cutuque alguém no ombro e peça educadamente que verifique seu site para você. Em seguida, sente-se e ouça o feedback deles. Na maioria das vezes, você se surpreenderá com a maneira como as pessoas percebem a experiência do usuário em seu site.
#2: Otimização de recursos; imagens, ícones, etc.
Com que frequência você se vê usando recursos visuais por uma questão de preferência pessoal e não UX? Isso acontece e, se você for criativo, vale a pena entender como funciona a otimização de mídia.
Elementos visuais como fotos, ilustrações, ícones e vídeos são os maiores consumidores de largura de banda nas páginas da web.
O tamanho médio da página da web em 2018. Listado por setores e diferentes países.
Embora não haja um tamanho de página da web definido que todos devam atender, é senso comum que um tamanho de página da web menor é igual a tempos de carregamento mais rápidos.
Então, como você pode cortar alguns KBs extras ou mesmo MBs de seu conteúdo visual?
- Redimensione suas imagens. Parece simples, certo? Bem, não consigo contar quantas vezes naveguei em um site para celular apenas para carregar imagens de 1980 x 1200 em segundo plano. Em vez disso, fotos em tamanho real devem ser fornecidas como links alternativos, quando apropriado. O redimensionamento pode reduzir até 80% do tamanho total da imagem, dependendo das dimensões necessárias. No entanto, para dispositivos móveis, nunca há motivo para ir acima da faixa de 600-700px, no máximo.
- Reduza o tamanho do arquivo com compactação. A compactação/otimização de imagem é o processo de uso de software de terceiros para reduzir o número de cores presentes em uma imagem. Isso pode ser feito de forma que suas fotos não percam sua qualidade inata, mas podem ter seu tamanho de arquivo reduzido drasticamente. Se precisar de ajuda para compactar imagens, não procure mais do que nosso resumo abrangente de ferramentas de compactação de imagens.
- Explore formatos de arquivo alternativos. Todo mundo já ouviu falar dos formatos de arquivo PNG e JPEG. Afinal, eles são os padrões de imagem de fato na web. Mas não por muito. A mais recente e melhor tecnologia em entrega de imagem digital gira em torno de WebP e formatos de arquivo SVG. SVGs, por exemplo, podem automaticamente dimensionar para o tamanho da telareduzindo o número de recursos necessários para carregar componentes visuais específicos.
A otimização da experiência do usuário para mobile-first é apenas uma coisa consciente. Projetar por impulso significa que você não considera os efeitos de longo prazo de suas decisões. Considerando que uma abordagem consciente ajuda você a construir com os usuários móveis em mente desde o início.
Perspicaz: Seguindo o conceito de design móvel intuitivo, você não precisa reutilizar os mesmos componentes visuais em seus designs móveis. Eliminar algumas imagens de fundo e substituí-las por fundos coloridos — no celular — não prejudicará a experiência do usuário. Sempre procure maneiras de economizar até mesmo a menor quantidade de largura de banda.
Nº 3: Pré-carregamento e carregamento lento
É necessário carregar todos os recursos de mídia em páginas que levam muito tempo para serem lidas? E pode ajudar a renderizar páginas externas antes dos usuários que as visitam?
Vejamos primeiro os pré-carregadores, também conhecidos como dicas do navegador.
Os pré-carregadores são maneiras de uma página informar ao navegador sobre possíveis oportunidades de navegação. Por exemplo, um usuário pode visitar a página B da página A.
Com o pré-carregamento, o usuário pode renderizar a Página B antes de clicar no link de navegação na Página A.
Lembre-se de que o pré-carregamento nem sempre funciona e cabe ao navegador tomar a decisão final. Fatores como tipo de dispositivo e largura de banda são ponderados individualmente.
Quais são os tipos de pré-carregadores mais comuns?
- Pré-busca. Esse tipo sugere que um URL específico provavelmente será a próxima opção de navegação. E, se o navegador atender à solicitação, ele armazenará automaticamente em cache os recursos importantes da página, o que, por sua vez, torna o carregamento da próxima página muito mais rápido.
- Pré-render. Enquanto o tipo acima busca apenas determinados recursos, o pré-processamento armazenará em cache a página inteira. Todo o conteúdo renderizado é armazenado na memória do dispositivo do usuário.
- DNS-Prefetch. A pré-busca de DNS resolverá o DNS especificado e nada mais. Como resultado, se um usuário fizer uma ‘virada’ específica em seu site, você estará reduzindo o tempo necessário para navegar.
- Pré-conectar. Igual ao anterior, mas também estabelece conexões e handshakes com conexões TCP e TLS.
Quais são alguns exemplos de código para pré-carregadores?
<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="prefetch" href="folder/script.js" as="script"> <link rel="prerender" href="customURL.com/preview.html">
Como os pré-carregadores usam tags HTML dinâmicas, você pode pré-carregar conteúdo como o Google Fonts ou crie um script personalizado para pré-carregar ativos JavaScript no WordPress.
BTW, se você estiver usando o WordPress, então foguete WP pode ajudá-lo com isso para sobrecarregar seu site.
Agora que você sabe mais sobre pré-carregadores, vamos falar sobre o outro tópico importante: carregamento lento.
O que é Lazy Loading?
Sempre que você visita uma nova página da Web, seja uma postagem de blog ou um site estático, o navegador busca todo o conteúdo da página e, em seguida, oferece esse conteúdo como uma experiência de navegação nativa. Na maioria dos casos, você é forçado a baixar a página inteira sem ver além da dobra.
Já no carregamento lento, o navegador é instruído a carregar (renderizar) o conteúdo que está apenas na janela de visualização do usuário. Portanto, se houver fotos ou vídeos sensíveis ao tamanho adicionados a uma determinada página, esses arquivos serão exibidos apenas quando a tela do navegador chegar a essa parte do site.
E se você está preocupado com possíveis problemas de SEO, não fique. Yoast confirmou que O Google renderiza páginas que usam carregamento lentoe o vê apenas como outro sinal de melhoria de desempenho.
Minha recomendação para uma biblioteca a ser usada é Layzr.js — carregamento lento simples e eficaz para suas imagens! O script também é ativado na página inicial do projeto, para que você possa vê-lo em tempo real. Os usuários do WordPress podem encontrar dezenas de plug-ins de carregamento lento no repositório público de plug-ins.
Nº 4: Cache da Web
O cache da Web é baseado no conceito de copiar uma versão de uma página, que pode ser apresentada ao usuário a qualquer momento. As páginas são armazenadas em cache na primeira visita à página de um site. Quando um novo usuário tenta acessar essa página, em vez de exibir a versão ao vivo, o servidor da web mostra a versão em cache.
O objetivo de qualquer tipo de cache é melhorar o desempenho do site e diminuir os recursos de back-end necessários. Dependendo de sua solução de cache, você pode configurar intervalos personalizados e outros eventos baseados em gatilho.
Alguns dos nomes mais populares em cache da web são Varnish, Squid e Memcached. Mas tenha certeza de que existem muitas outras soluções no mercado, especialmente se você for um usuário do WordPress.
Você também pode considerar se inscrever em um CDN.
O que é uma CDN (rede de distribuição de conteúdo)?
Uma rede de entrega de conteúdo usa um cluster global de servidores distribuídos para fornecer entrega de conteúdo incrivelmente rápida. UMA CDN pode transferir rapidamente todos os tipos de conteúdo populares na web: vídeo, foto, JavaScript, etc. Atualmente, a maior parte do tráfego da web passa por alguma forma de CDN.
A única coisa a lembrar sobre as redes de entrega de conteúdo é que elas funcionam melhor quando usadas em um site de alta demanda. Portanto, se você atende apenas alguns milhares de visitantes por mês, pode ser difícil ver melhorias perceptíveis. No entanto, um CDN é uma ótima solução para melhorar o tempo de carregamento do seu site, reduzir o custo da largura de banda, aumentar a disponibilidade de conteúdo e fortalecer a segurança geral.
Se você não tem experiência anterior com CDNs, recomendamos experimentar Cloudflare – eles fornecem um plano gratuito para sempre e é uma ótima plataforma para começar a aprender. E se o Cloudflare não atender às suas expectativas, confira nosso post sobre os melhores provedores de CDN gratuitos do mercado.
Nº 5: AMP (páginas móveis aceleradas)
do Google projeto AMP é a otimização móvel com esteróides! Essencialmente, o AMP reduz suas páginas ao essencial para fornecer uma experiência de carregamento super-rápida, mas também para tornar a legibilidade do conteúdo uma prioridade. Dada a importância da velocidade da página, você consegue reunir coragem para dizer não aos tempos de carregamento quase instantâneos?
Ok, todas essas palavras da moda parecem ótimas, mas como o AMP funciona?
AMP é uma página HTML simples com certas limitações para o tipo de conteúdo que pode ser exibido. Isso leva a tempos de carregamento muito mais rápidos e desempenho geral devido à limitação de execução de scripts e outros.
JavaScript, por exemplo, não funciona com AMP. A menos, é claro, que você use o Biblioteca AMP JS disponível no GitHub. O uso da biblioteca JS permite que você alcance certos resultados, como evitar bloqueadores de anúncios, mas se você deseja um desempenho real, o AMP bruto é o caminho a seguir.
Estudos de caso interessantes para AMP:
#6: Teste antes de confirmar
Hoje em dia, não há desculpa para não ter um ambiente de preparação separado para o seu projeto. A maioria das plataformas de hospedagem em nuvem oferece ambientes de preparação por padrão, portanto, verifique com seu provedor se você tem acesso a um.
O que é um ambiente de preparação?
Bem, a maneira mais rápida de explicar isso é olhando para o seu site ativo atual.
Este site é o que você chama de site de produção — uma versão em tempo real de todo o código, scripts e conteúdo em que seu site se baseia. Um ambiente de preparação neste contexto é uma cópia do seu site de produção. Um site fictício, se você quiser. E nesse ambiente de preparação, você pode fazer alterações ou adicionar novos recursos sem interromper seu site ativo.
Eu sempre penso no post de Ashley Harpp, Não perca tempo – teste as alterações antes de confirmar.
Sua opinião sobre como nos ‘enganamos’ para evitar certas coisas é um excelente exemplo de como não queremos assumir a responsabilidade quando cometemos um erro. No entanto, a postagem de Ashley também inclui links para ferramentas úteis para configurar um ambiente de preparação local.
O teste não é tão assustador quanto parece. Mas com certeza é assustador quando você exclui acidentalmente todo o banco de dados em um servidor de produção!
Declaração de encerramento
Otimizar seu site para uma experiência móvel suave não é tão difícil. Tudo o que você precisa é de um pouco de determinação e aplicar de bom grado os métodos descritos neste post. É provável que você já esteja familiarizado com coisas como cache de conteúdo e carregamento lento, mas e os ambientes de preparação ou pré-carregadores?
Espero que este post tenha lançado alguma luz sobre o estado atual da otimização de sites para dispositivos móveis.