Agora, mais do que nunca, é essencial garantir que o seu processo de desenvolvimento de sites inclua as melhores práticas e técnicas para obter uma performance móvel eficaz da sua presença on-line.
Independente do seu negócio ser da área jurídica, saúde, restaurantes, técnico ou em outros setores, uma configuração de alta qualidade de seu website para dispositivos móveis é um passo fundamental na era do mobile first.
É recomendado avaliar vários aspectos das práticas indicadas para o desenvolvimento visando dispositivos móveis.
Isso inclui SEO técnico, desenvolvimento de websites e princípios de design para dispositivos móveis. Isso ajuda a criar uma presença on-line relevante que resistirá à mudança para a era de dispositivos móveis do Google.
Sem mais delongas, aqui estão 12 melhores práticas nas quais você deve se concentrar para obter um website para dispositivos móveis de alta qualidade.
1. O conteúdo acima da dobra ainda é relevante
É importante lembrar que, em um ambiente mobile, onde as coisas rolam infinitamente, o conteúdo acima da dobra , ou seja, antes do “scroll” (rolagem da tela), faz sim a diferença.
É recomendado ter pelo menos parte do conteúdo do texto antes do “scroll”. Isso mostra aos usuários que há um motivo para rolar a tela.
Isso faz com que o desejo em continuar querendo ver o que você tem a oferecer permaneça. Por isso, é importante otimizar o topo do seu site para atender à maior quantidade dispositivos móveis diferentes.
2. Não se concentre sempre no consumidor de dispositivos móveis
Na medida em que os usuários alternam os acessos entre celular e desktop, existem objetivos e desejos que precisam ser atendidos em cada uma das plataformas.
Quando você se concentra no que o usuário de cada plataforma deseja, você cria uma abordagem mais completa, que alcança os clientes do seu website com mais eficiência.
Independente de um usuário estar comprando um produto, ou realizando pesquisas sobre os serviços que você fornece, a combinação de metas do usuário e aquisições de clientes da empresa continuará.
Dessa forma, focar apenas nesses ideais e valores se tornará menos necessário. Mas lembre-se, apenas menos necessário, pois essa alternância entre mobile e desktop continuará.
Baixar E-book: Geração de Leads com Google Ads
Gere mais negócios para sua empresa. Fale com as pessoas que querem mesmo o seu produto ou serviço!
3. Use técnicas de layout responsivo
Os dias de sites “m-ponto” (m.exemplo.com), ou seja, sites exclusivos para dispositivos móveis, acabaram.
Não existem mais motivos para usar essa implementação na era mobile first.
A estrutura pode ser muito confusa, com várias URLs, criando problemas de conteúdo duplicado – se não estiverem otimizados adequadamente.
Existem muitas técnicas disponíveis para garantir que uma transição efetiva seja concluída. Mas, por outro lado, as implementações de “m-pontos” seguem pelo caminho da extinção com o surgimento de novas tecnologias.
Hoje, a implementação ideal envolve um layout responsivo. Esses layouts usam o que chamamos de “media queries” para definir as resoluções de exibição que o layout suportará.
Assim, o benefício de usar esse tipo de estrutura, é que você não se depara com os problemas de conteúdo duplicado que você teria em uma implementação “m-ponto”.
Além disso, sua implementação mobile contará com uma tecnologia mais recente.
4. Pense em “Código” em vez de “Imagens em todo lugar” para aumentar a velocidade do site
Você realmente precisa usar essa imagem de fundo de duas cores, com 2 pixels de largura por 1200 pixels de altura, se repetindo no site inteiro?
Se não precisa, e tem a possibilidade de substituir por um código CSS, então o use o código.
Embora algo tão pequeno não aumente significativamente a velocidade do site, este tipo de otimização, se feita em todo o site, pode sim fazer muita diferença.
Da próxima vez que você for fazer uma auditoria, ou criar um site, pense: “Eu realmente preciso dessa imagem aqui, ou posso simplesmente transformá-la em código?”
Se a imagem não for realmente necessária, codificar o objeto pode ajudar a aumentar a velocidade do site. Especialmente em sites que utilizam uma grande quantidade de gráficos.
5. Personalize o WordPress para dispositivos móveis
Existem muitos plug-ins disponíveis para o WordPress.
Inclusive, alguns que fornecem a funcionalidade de otimizar a compatibilidade com dispositivos móveis.
Os plug-ins mais úteis para esse fim são Duda Mobile, W3 Total Cache, bem como plug-ins para minificar HTML e CSS.
6. Certifique-se de que todo o conteúdo é o mesmo em computadores e dispositivos móveis
A ideia por trás dessa prática recomendada é evitar conteúdo duplicado e acusações de cloaking.
Por segurança, certifique-se sempre de que todo o conteúdo é o mesmo na versão desktop e no celular.
Uma das melhores técnicas para garantir isso é um layout responsivo.
O layout responsivo, para quem não sabe, envolve a criação de um site capaz de se adaptar, de forma automática, para uma ampla variedade de plataformas e dispositivos.
Se você quiser deixar seu site o mais rápido possível, e tornar o seu layout enxuto e simples, considere refatorar os códigos CSS com sprites de imagem, para reduzir as requisições ao servidor.
7. Use uma abordagem de desenvolvimento “De cima para baixo”
Uma abordagem de desenvolvimento “de cima para baixo” é uma metodologia onde você considera todas as possíveis consequências de cada decisão feita em um projeto, do início ao fim.
O ideal, é desenvolver pensando em dispositivos móveis primeiro, em vez de desktops. Essa abordagem de desenvolvimento é ideal porque você não vai ter problemas no layout final.
Veja um exemplo: você cria um website para desktop. Após mais da metade do processo, decide criar um site para dispositivos móveis em cima dele.
Você cria o modelo. Mas depois de codificá-lo, você encontra um erro aqui. Um bug lá. E outro bug ali. Isso ocorre porque a abordagem “de baixo para cima” não funciona, e causa distorção de escopo.
Esse é o fenômeno em que problemas invisíveis surgem no último minuto, causando bugs imprevistos. Isso aumenta as horas de trabalho, pois traz a necessidade de dados que não foram fornecidos quando o projeto foi original foi concebido.
A verdade é que se a abordagem “top-down” para layout responsivo para mobile first fosse considerada desde o início, esses bugs e coisas que precisam ser trabalhadas não apareceriam no final.
8. Não use pop-ups invasivos para vender seu produto
Sim. Nós sabemos. Seu produto é a coisa mais incrível deste planeta. É por isso que provavelmente estamos visitando seu website e pesquisando antes de comprar.
Porém, os usuários não gostam de pop-ups invasivos, que bloqueiam a navegação no site, e incomodam tentando forçar uma venda.
Sempre que possível, mantenha esses pop-ups, também conhecidos como interstitials, ao mínimo e mantenha-os na parte inferior ou lateral, com a opção de clicar para fechá-lo.
É importante ressaltar que o Google penaliza interstitials invasivos. Vale a pena ler os guias do desenvolvedor, juntamente com as diretrizes para webmasters sobre esse problema. Bem como a postagem no blog do Google sobre esse tópico.
9. Identifique os pontos fracos em sua implementação e verifique se há erros
Fraquezas nem sempre significam velocidade do site.
É possível identificar problemas com a implementação em diferentes dispositivos ou plataformas (pense em um celular Windows versus iPhone).
Uma ferramenta que pode ajudar nessa questão é o BrowserStack.com, por exemplo.
Nada é pior do que chegar ao estágio final da implementação em dispositivos móveis e ver seu cliente descobrindo problemas. E o pior, coisas que você mesmo deveria ter descoberto durante o processo de desenvolvimento.
10. Não use vídeo em Flash
Esta já é uma prática incomum hoje em dia, mas ainda vejo sites usando.
O vídeo em Flash tornou-se obsoleto assim que a Adobe comprou a Macromedia e descontinuou este programa, abrindo caminho para o vídeo em HTML 5.
Se você não estiver usando o vídeo HTML 5 no seu website, é possível que seus usuários estejam sofrendo.
11. Use os dados estruturados do Schema.org
Os dados estruturados do Schema.org são importantes para identificar páginas em seu site que tenham informações especiais e estruturadas, que os mecanismos de pesquisa precisam ver. E quando a busca é realizada em dispositivos móveis, o Schema se mostra ainda mais relevante.
Esse é um método fácil e conciso de compreender informações que podem ser traduzidas para rich snippets nos resultados da pesquisa para dispositivos móveis.
Mas, de qualquer forma, é importante que os dados estruturados do Schema também sejam utilizados em implementações de desktop.
Eles pode ajudar seu site a aparecer em resultados de rich snippet, com base em sua palavra-chave segmentada.
Isso pode ajudar a melhorar a visibilidade do seu site quando implementado corretamente.
12. Não bloqueie os scripts de suporte como JavaScript, CSS ou coisas como imagens
Isso deve ser senso comum ao desenvolver sites para qualquer plataforma, seja desktop ou celular, mas algumas pessoas ainda fazem.
É importante garantir que os scripts de suporte para seu design para dispositivos móveis não sejam bloqueados.
Esse bloqueio pode resultar em problemas como erros 404, tanto em dispositivos móveis, quanto em desktops.
No entanto, se você impedir que esses arquivos sejam rastreados pelo Google, eles não poderão verificá-los para ver se seu site funciona corretamente.
Quando eles não podem fazer isso, isso pode resultar em classificações mais baixas. Porque eles não podem entender totalmente o seu website.
A era mobile first chegou: e a necessidade de otimização agora é inevitável
Com a chegada da indexação para mobile first do Google, a implementação do seu website para compatibilidade entre várias plataformas e dispositivos agora é prioridade.
Isso significa que quanto mais você demorar, mais do que não ter uma implementação mobile, não terá uma adaptação correta para celular. Isso vai te causar vários problemas.
E não apenas nos rankings.
Se você ainda não deu o salto para o mobile, por que não começar?
_
Esta é uma tradução livre, de interpretação pessoal da autora deste post. Para ler o texto original, acesse: Mobile Optimization: 12 Best Practices for the Mobile-First Era
