Como tornar seu site compatível com dispositivos móveis

No verão de 2015, foram realizadas mais pesquisas no Google por celular do que por computador pela primeira vez – e você’d melhor acreditar que eles’só subi desde então!


Se vocês’Ao ler este artigo, é provável que você’você já está ciente da importância de ter um site compatível com dispositivos móveis e deseja garantir que o seu esteja oferecendo uma ótima experiência para os usuários móveis. Nós podemos te ensinar como fazer isso!

Para tornar seu site otimizado para celular, você’precisará:

  1. Escolha um tema ou modelo responsivo para celular
  2. Retire seu conteúdo
  3. Torne imagens e CSS o mais leve possível
  4. Evite o Flash
  5. Alterar tamanho e posicionamento do botão
  6. Espaço seus links
  7. Use uma fonte grande e legível
  8. Eliminar pop-ups
  9. Teste regularmente

Mas primeiro, o que significa otimização para dispositivos móveis?

Quando falamos sobre um ‘otimizado para celular’ site, nós’estamos falando sobre a exibição de um diferente ‘versão’ do seu site para visitantes que visualizam seu site a partir do celular, a fim de proporcionar uma melhor experiência.

Existem várias maneiras de conseguir isso:

  • Design responsivo – seu site’O design do s é ajustado para se adaptar ao tamanho da tela, independentemente de você’apenas alterando o tamanho da guia da área de trabalho ou navegando de um celular ou tablet.
  • Publicação dinâmica – os visitantes receberão uma versão diferente do site criada para esse fim, dependendo do dispositivo que’re vendo de.
  • Um aplicativo para celular – em alguns casos, ter um aplicativo completamente separado para seu público-alvo móvel faz mais sentido (embora, se for esse o caso, você também deve garantir que seu site esteja preparado para aqueles que não’não quer fazer o download).

O design responsivo é o mínimo que você deve ter como objetivo, e’s que o Google recomenda. Dito isto, pensamos que’vale a pena editar ainda mais seu site para celular gerado automaticamente – afinal, você deseja ter uma experiência fantástica para o usuário móvel, em vez de uma ‘aceitável’ 1.

Se você acha que um aplicativo móvel funcionaria no seu site, recomendamos entrar em contato com um desenvolvedor que possa ajudá-lo com isso.

Aqui estão alguns outros artigos que você pode gostar:

Como criar um site – Se vocês’Quando começar a criar (ou reprojetar!) seu site, confira este artigo para obter um guia passo a passo e os principais pontos a serem considerados.

Como criar um site – Refúgio’ainda não começou no seu site? Não se preocupe, este guia o guiará por todo o processo!

5 melhores construtores de sites para SEO – Qualquer construtor de sites com SEO forte é compatível com dispositivos móveis, incorporando seus modelos. Aqui estão cinco dos melhores.

1

Escolha um tema ou modelo responsivo para celular

Ok, então este é o primeiro passo, e’é importante: escolha um tema ou modelo responsivo para celular!
Como ter um design responsivo para dispositivos móveis é tão importante,’s algo que praticamente todos os principais criadores de sites cobriram em cada um de seus modelos. Por exemplo:

Squarespace – possui capacidade de resposta móvel à prova d’água e seria a nossa melhor escolha se você’re-construindo um site a partir do zero e veja a experiência móvel como a principal prioridade.

Wix – todos os modelos são compatíveis com dispositivos móveis, mas sempre verifique a visualização móvel à medida que avança. Como os sites Wix são muito personalizáveis, às vezes grandes mudanças não acontecem.’não traduzir tão perfeitamente, e você’vou ter que fazer alguns ajustes.

Se vocês’Ao criar um site usando um sistema CMS, como o WordPress, verifique se o tema de sua escolha é responsivo a dispositivos móveis – ou se você’já construiu um site, mude para um que seja!

Basta pesquisar ‘tema responsivo’ no WordPress’ própria biblioteca de temas ou em um site de terceiros como o Themeforest. Leia as resenhas e, se possível, consulte os sites que usam esse tema no seu celular para avaliar a experiência por si mesmo.

Socorro! E se eu’m sobre um tema não responsivo e posso’t mudar?

Se seu site foi criado usando um tema ou modelo antigo e não responsivo, e você’não for possível alternar, tente adicionar esta linha de código em cada página’s tag:

Isso significa que suas páginas devem reformatar automaticamente para se ajustar à largura do dispositivo, alternando de um estilo paisagem para retrato.

2

Retire seu conteúdo

Vocês’você escolheu um lindo tema ou modelo responsivo, então agora você’está tudo pronto, certo? Errado!

Mudar para o modelo ou tema certo é um grande passo, mas é’é apenas um dos vários que você deve adotar para aperfeiçoar essa experiência móvel.

Agora’É hora de dar uma olhada na visualização móvel automatizada do seu site e retirá-la:

Destile sua oferta

Elabore o objetivo principal da página que você’continuar e não’hesite em tornar isso muito mais proeminente na sua versão para celular.

Dê uma olhada neste exemplo da Trainline:

Exemplo amigável para dispositivos móveis da Trainline

A página inicial foi projetada para incentivar os usuários a procurar bilhetes de trem, e este formulário é o centro das atenções na versão móvel. Na versão desktop, isso pareceria muito insistente, mas em uma versão móvel, ele funciona.

Evite grandes pedaços de texto

A cópia do seu site deve ser curta e agradável na melhor das hipóteses (com exceção das postagens do blog, como esta!), Mas no celular isso se torna ainda mais importante. Leia nossas dicas para escrever para a Web e leve sua tesoura virtual a qualquer pedaço longo de texto.

Encurtar formulários

Preencher formulários longos é uma tarefa difícil, mas no celular? Em movimento? Esqueça! Formulários longos perderão seus leitores mais rapidamente do que você pode dizer ‘Este é um campo obrigatório’. Verifique se todos os formulários que você’exibir no celular está apenas pedindo informações que’é absolutamente essencial.

Melhor dica! A correção automática traquina é uma maneira infalível de transformar o preenchimento de formulários em uma grande perda de tempo. Salve o estresse de seus leitores desligando-o. Se você tiver acesso ao código do formulário, verifique se o campo de correção automática está definido como correção automática = desativado. 3

Torne as imagens e CSS o mais leve possível

Tornar o seu site o mais leve possível é sempre uma boa ideia – mas o que exatamente isso significa? Bem, cada elemento do seu site carrega um virtual ‘peso’ – se isso’s um vídeo ou uma imagem com tamanho de arquivo ou código que precisa ser carregado toda vez que o site é clicado.

O Google tem sido muito claro sobre o fato de a velocidade do site ser um fator crucial de classificação, o que significa lento (também conhecido como. ‘pesado’) perderão a concorrência nas páginas de resultados dos mecanismos de pesquisa (SERPs).

Quando se trata de dispositivos móveis, isso é ainda mais importante. Se vocês’você já tentou carregar uma página da Web em algum lugar remoto, apenas para ver cada elemento se encaixar dolorosamente lentamente, você’vou entender porque.

Então, o que você pode fazer sobre isso?

Comprima suas imagens

Quando você’reenviar qualquer imagem para o seu site (versão móvel ou para computador)’É vital que você comprima suas imagens usando uma ferramenta on-line gratuita, como o kraken.io. Isso reduz bastante o tamanho do arquivo de suas imagens, sem comprometer a qualidade da imagem..

Hospede seus vídeos com terceiros

Ao enviar seus vídeos para terceiros e incorporá-los ao seu site, significa o virtual ‘peso’ desses vídeos é amplamente mantido no site escolhido, e não no seu.

O Wistia é uma plataforma popular para isso, mas o YouTube também funciona – você’só quero ter certeza de que você’desativando a reprodução automática, para que um vídeo não relacionado não’Não jogue atrás do seu. Para fazer isso, basta:

  • Vá para a sua página do WordPress ou poste
  • Encontre o código incorporado e clique no ‘texto’ aba
  • Encontre a parte que diz src =”youtubeurlhere”
  • Adicionar ?reprodução automática = 0&rel = 0 depois de youtubeurlhere
  • O código agora deve ler src =”youtubeurlhere? autoplay = 0&rel = 0 ″
  • Acertar ‘Atualizar’ e você’bom ir

Melhor dica! Se você não’acho que seu conteúdo seria muito bom no YouTube (alguns vídeos não’(faça muito sentido sem o contexto de uma página inteira), certifique-se de definir a visibilidade como ‘não-listado’. Dessa forma, ninguém o encontrará em outro lugar, exceto no seu site. 4

Evite o Flash

O Flash é frequentemente usado para criar animações, mas geralmente não é’t suportado por dispositivos móveis, por isso é melhor evitar completamente.

5

Alterar tamanho e posicionamento do botão

Praticamente todos os sites usam botões para criar links para outras seções ou formulários. Mas um ‘Boa’ botão pode rapidamente se tornar um ‘ruim’ botão no celular se’s no lugar errado ou o tamanho está errado.

Pense em como você segura e usa o telefone. Provavelmente você’re usando os polegares para praticamente tudo, ou seja, qualquer coisa que você puder’t chegar com o polegar se torna uma dor total.

Aqui’s onde você deve colocar CTAs em um site para celular:

Criando um site otimizado para celular: onde adicionar CTAs

Então agora você’os botões estão no lugar certo,’É hora de torná-los o tamanho certo. Isso geralmente significa que você’precisará aumentá-los um pouco – é’é muito mais difícil clicar com precisão com o polegar do que com o mouse, afinal.

6

Espaço seus links

Falando em como é difícil clicar com precisão com o polegar, em vez de com o mouse, isso nos leva ao nosso próximo ponto: veja seus links!

Mais especificamente, você’Você deseja verificar se há hiperlinks no seu site para celular:

  • Aren’t muito perto um do outro, para evitar que as pessoas cliquem no errado por acidente.
  • Link para páginas que também são otimizadas para celular para uma jornada contínua do usuário.

7

Use uma fonte grande e legível

isto’É recomendável que você use um tamanho de fonte de pelo menos 14 px na área de trabalho, mas não deixe de testar a aparência de sua versão para celular – é provável que você descubra que ela é um pouco pequena e você’vou querer aumentar um pouco.

Verifique também a legibilidade da sua fonte. isto’Uma coisa é tentar uma fonte mais experimental em um desktop, mas é improvável que esse movimento seja recompensado no celular. Dito isto, você’Quero manter as fontes como ‘na marca’ possível em todas as plataformas.

Ao trabalhar em uma visualização móvel do seu site, você’tenho uma área muito menor para brincar. Em uma área de trabalho, você pode espaçar o texto com quebras de linha e imagens. No celular, tente colocar em negrito ou em maiúscula linhas de texto diferentes para impedir que elas se mesclem.

8

Eliminar pop-ups

Quando usados ​​com cuidado, os pop-ups podem funcionar muito bem na versão para desktop de um site. Você deve ter notado que eles’re algo que usamos em algumas páginas aqui no WBE.

Mas quando se trata de dispositivos móveis, é melhor evitar os pop-ups. Você não apenas tem uma tela menor, mas também pode’• adapte o pop-up para acionar em momentos importantes, como quando o usuário sai da tela.

9

Teste regularmente

A melhor maneira de descobrir como seu site para celular é compatível com dispositivos móveis é testá-lo! Vocês’Quero fazer isso de três maneiras diferentes:

Execute URLs pelo Google’ferramenta otimizada para celular

O Google possui uma ferramenta de teste gratuita para dispositivos móveis, que qualquer pessoa pode usar para testar a compatibilidade de qualquer URL específico, seja esse’s uma página inicial (como abaixo) ou uma página em seu site.

Teste de compatibilidade com dispositivos móveis do Google

Experimente diferentes tamanhos de dispositivo na área de trabalho

Uma ótima maneira de verificar a capacidade de resposta do seu site é brincar com o formato da guia do seu site que você abriu. Ao reduzir a largura da sua guia, você deve observar que o site começa a ‘contrato’ e se transformar na versão mais otimizada para celular.

Para testar rapidamente a aparência de qualquer coisa no celular, você também pode clicar com o botão direito do mouse na sua página da Web, selecionar ‘Inspecionar’, e clique no ícone de duas telas que aparece na barra de ferramentas na parte superior:

Visualizar versão para celular no computador

Como tornar seu site compatível com dispositivos móveis: Resumo

Obrigado por continuar conosco, como explicamos como tornar seu site otimizado para celular. Aqui’s essas etapas mais uma vez:

Como tornar seu site otimizado para celular:

  1. Escolha um tema ou modelo responsivo para celular
  2. Retire seu conteúdo
  3. Torne as imagens e CSS o mais leve possível
  4. Evite o Flash
  5. Alterar tamanho e posicionamento do botão
  6. Espaço seus links
  7. Use uma fonte grande e legível
  8. Eliminar pop-ups
  9. Teste regularmente

A boa notícia para a maioria dos sites é que a maior parte do trabalho duro provavelmente será feita para você pelo seu tema ou modelo. Dito isto, pensamos que’vale a pena fazer os ajustes extras descritos acima para garantir que seus usuários de dispositivos móveis tenham uma experiência brilhante, em vez de aceitável. Afinal, as estatísticas dizem que’provavelmente constituirá a maioria dos seus usuários!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map