Como testar seu website no celular

Você quer saber como testar a versão móvel do seu site com eficiência? E quais são as melhores ferramentas para testes de sites para dispositivos móveis? Então, este artigo é para você.

Por que você deve cuidar da otimização do seu site para dispositivos móveis?

No final de 2016, havia mais de 3,2 bilhões de pessoas com acesso à Internet e cerca de 2 bilhões delas usavam dispositivos móveis para isso. De acordo com as previsões analíticas, várias pessoas, que usam apenas dispositivos móveis para atividades de Internet, terão aumentos anuais de 25% nos próximos 5 anos.

Portanto, é de vital importância verificar se seu website é compatível com dispositivos móveis.

Antes de iniciar o teste da versão para celular do seu site, tente responder a algumas perguntas comuns:

  • Quão rápido o site carrega?
  • O conteúdo é atrativo?
  • O site chama a atenção para os principais pontos do seu negócio?
  • O site oferece uma boa experiência?
  • O site é fácil e compreensível para navegar?
  • A página de destino desperta interesse em outras páginas do seu site?

Os principais fatores de otimização do desempenho móvel

Mesmo que a resposta seja “Sim” para todos eles, você deve prestar atenção nos próximos fatores de otimização do desempenho para dispositivos móveis:

Velocidade de download  é sempre combinado com latência de rede, memória, CPU e tamanho de cache. Todos eles são muito menores em comparação com os desktops, portanto, leva mais tempo para carregar.

Carregamento restritivo . Você precisa garantir que os usuários não baixem nada que afete a velocidade do site.

Estrutura responsiva  ajuda a criar protótipos mais rápidos de funcionalidades e layouts móveis.

Rápido  Carregando Tempo  dá a você uma vantagem competitiva séria. As seguintes ações afetam o tempo de carregamento:

  • Reduzir dependências
  • Reduzir o processamento no lado do cliente
  • Reduzir a dimensão da imagem
  • Reduza o conteúdo
  • Evite o redirecionamento de m-ponto
  • Escolha a solução de hospedagem correta
  • Limite as solicitações HTTP
  • Ativar a compactação

Vamos considerar outras etapas que você precisa fazer para verificar o funcionamento normal do seu site para celular.

Testando a conexão entre a versão desktop e móvel do site

Redireciona o teste:

  • Os visitantes de dispositivos móveis devem ser redirecionados para a versão para celular do site
  • Os visitantes do desktop devem ser redirecionados para a versão desktop do site
  • Os redirecionamentos permitem que os visitantes tenham acesso à página específica de que precisam, não à página inicial
  • Os visitantes de dispositivos móveis devem ter uma opção fácil de encontrar uma opção para visualizar a versão de área de trabalho do site também.

Verificação do cabeçalho Vary-HTTP.  Se seus sites são veiculados dinamicamente, você deve configurar um cabeçalho Vary-HTTP para informar ao Google e aos navegadores que você varia o HTML pelo agente do usuário.

verificação de tags rel = alternate / canonical . Se os sites tiverem URLs separados, as páginas da área de trabalho deverão ser configuradas tag rel = “alternate”  apontando para a versão móvel dessa página. As páginas para dispositivos móveis devem ser configuradas com uma tag rel = “canonical” apontando para a versão da área de trabalho dessa página.

Teste de problemas técnicos

Sitemap para dispositivos móveis em XML

  • Todas as páginas para celular devem ser enviadas ao Google por meio de um sitemap XML nas Ferramentas do Google para webmasters
  • As páginas para dispositivos móveis devem ser separadas das páginas da área de trabalho

Velocidade do site para dispositivos móveis.  Os usuários de celular, em particular, provavelmente terão tempo limitado para gastar em seu aplicativo, por isso precisam ser entregues rapidamente. Ferramenta de velocidade da página do GoogleWebPagetest  são ferramentas úteis para medir a velocidade do site.

Armazenamento e dados:

  • Verifique se o código do programa não é facilmente acessível
  • O usuário não limpa o cache, portanto, certifique-se de que nada será quebrado.

Teste de experiência do usuário (UX)

Vista do site  em:

Smartphones: iPhone (iOS), Samsung Galaxy (Android), Nexus (outro Android) e Windows Phone (Windows).

Tablets: iPad (iOS), Samsung Galaxy Tab em vários tamanhos (Android), Kindle Fire (Amazon) e Asus Transformer Book (Windows).

Você deve usar ferramentas como Google Analytics  para identificar dispositivos, que são freqüentemente usados por seus visitantes.

Tamanho dos links . A margem entre os links deve ser de pelo menos 28×28 pixels. Todos devem ser fáceis de clicar com o dedo.

Instantâneo.  A maioria dos navegadores de dispositivos móveis não pode renderizar conteúdo em Flash. Portanto, se você quiser que seu site seja compatível com dispositivos móveis, não use o Flash.

Janela de exibição  permite que navegadores de dispositivos móveis redimensionem páginas para que eles se encaixem perfeitamente nos dispositivos. É por isso que você precisa configurá-lo.

Pop-ups.  Há dois motivos para não usar pop-ups na versão para celular do seu site:

  • Pop-ups retardam o tempo de carregamento da página
  • Os pop-ups são muito fáceis de serem clicados acidentalmente. Então, eles levam os visitantes para longe da página em que querem estar.

Elementos acabam.  Os elementos mais importantes devem estar no topo. A colocação de outros elementos deve ter um sentido.

Navegação.  Garantir que todas as páginas do site para dispositivos móveis possam ser acessadas pelos visitantes.

Conteúdo

  • Deve haver uma página móvel equivalente para cada página da área de trabalho
  • O número de páginas para celular pode ser mais do que as páginas da área de trabalho, pois geralmente é mais fácil navegar em sites para dispositivos móveis.
  • Verifique se não há lexical, nem erros de gramática  no conteúdo do seu site.
  • Se o seu site não é apenas para visitantes locais, você deve fornecer teste de localização , em outras palavras, para verificar aspectos lingüísticos e culturais apropriados para uma determinada localidade.
  • Imagens desnecessárias devem ser removidas.

Vídeo

  • Verifique se os vídeos foram carregados e executados corretamente
  • Use um player de vídeo HTML5, porque é fácil para os telefones renderizar e ser leve.
  • Torne seus vídeos responsivos

Página de resultados do mecanismo de pesquisa, SERP:
Verifique se seu URL para dispositivos móveis é amigável e rico em palavras-chave

O Google corta meta descrições de celular em aproximadamente 120 caracteres, portanto, o seu não deve exceder esse limite.

Embora o Google ofereça aproximadamente 70 caracteres (512 pixels) no título da página, a largura da tela força o título da página em duas linhas. É por isso que você deve verificar se cada título da página parece bom em duas linhas.

Muitos plug-ins  estragou toda a experiência do seu site para dispositivos móveis. Portanto, você deve analisar os plug-ins que está usando e excluir aqueles que realmente não precisa.

10 dicas para otimizar a versão móvel do seu site

Resumir, aqui estão 10 bits de conselhos  para ajudar você a verificar se a versão para celular do seu site está acessível para os visitantes:

  1. Garantir a compatibilidade com os smartphones e tablets de recursos
  2. Verifique o tempo normal de carregamento
  3. Torne a navegação no site o mais simples possível
  4. Verifique se os botões são grandes o suficiente para pessoas com o dedo grande
  5. Não há grandes blocos de texto. Use marcadores e frases curtas.
  6. Não use o Flash.
  7. Não use pop-ups.
  8. Certifique-se de que as imagens tenham o tamanho ideal.
  9. Verifique se o seu número de telefone está a um clique de ser discado
  10. Verifique se o site pode acessar sua localização por meio de GPS

Então, agora, quando sabemos exatamente o que deve ser testado, vamos considerar algumas ferramentas e maneiras de testá-lo.

Testando nos dispositivos reais

Em um mundo perfeito, todos os sites devem ser testados em todos os dispositivos móveis populares nos quais possam ser visualizados. Claro que testar nos dispositivos reais tem muitas vantagens:

  • O teste é fornecido em um ambiente real com condições muito reais
  • Os testes são fornecidos no SO real, com os ajustes do fabricante
  • O desempenho real de um dispositivo é mais fácil em comparação com outras opções virtuais
  • Testar a interoperabilidade é mais fácil
  • Replicação fácil de bugs
  • A resolução da tela e o brilho podem ser facilmente testados em uma série de diferentes cenários
  • Funções como notificação push, geolocalização e orientação, conectividade Wi-Fi podem ser testadas
  • Funcionando em condições de interrupções de entrada, como SMS e chamadas podem ser testadas
  • Funcionamento em condições de drenagem de bateria pode ser testado

Infelizmente, o mundo em que vivemos não é perfeito. Aqui estão alguns deméritos do teste nos dispositivos reais:

  • Há uma abundância de dispositivos móveis
  • Testar nos dispositivos reais é um processo caro e demorado
  • Mesmo que você tenha uma grande variedade de dispositivos móveis na sua empresa, os funcionários, localizados em outros escritórios ou trabalhando remotamente, não terão acesso a todos os dispositivos
  • A manutenção do dispositivo também é onerosa

Teste móvel on-line nos dispositivos reais

Então, precisamos descobrir qualquer outra maneira de testar o site para celular. Existem ferramentas especiais, que realmente fazem uso da conexão remota para dispositivos reais. Algumas dessas ferramentas são apresentadas abaixo.

Keynote Mobile Testing (antigo Keynote DeviceAnywhere)
logotipo principal
A solução baseada em nuvem do Keynote Mobile Testing, que possui a biblioteca abrangente de dispositivos móveis reais.

Claro, é muito mais do que apenas uma ferramenta de teste de página móvel. Mas, se considerarmos o Keynote Mobile Testing como uma ferramenta desse tipo, os próximos méritos devem ser mencionados:

  • Redes reais de operadoras de celular e Wi-Fi
  • Suporte do primeiro dia para novos dispositivos à medida que são liberados
  • Ele gera uma lista de dispositivos automaticamente com base em critérios de cobertura: memória, CPU, fabricantes, versão do sistema operacional, operadora, etc.
  • Banco de dados detalhado de recursos por dispositivo e sistema operacional
  • Assistente fácil de usar para ajudá-lo a determinar rapidamente quais dispositivos priorizar para desenvolvimento e teste

Alguns deméritos do Keynote Mobile Testing:

  • O Keynote Mobile Testing não examina os sinais vitais do dispositivo
  • Não há suporte para reserva de dispositivo

BrowserStack
logotipo da pilha do navegador
O BrowserStack é uma ferramenta de teste entre navegadores, que oferece acesso a vários dispositivos móveis reais.

Aqui estão alguns recursos do BrowserStack:

  • Vasta gama de iOS e Android: versões para iOS, do iOS 3 para o iOS 10, Android – de Donut (1.6) para Nougat (7.1)
  • Verificações rápidas com capturas de tela
  • Web analytics para o seu site
  • Depure facilmente seus websites para dispositivos móveis com as ferramentas de desenvolvedor do Google Chrome no iOS e no Android.
  • Acesso aos dispositivos adicionais por parâmetros geográficos
  • Gestos e interações naturais
  • Opção de teste de segurança

Alguns pontos fracos do BrowserStack:

  • O desempenho do servidor parece se degradar com o tempo, quando muitos usuários estão testando
  • O BrowserStack tende a ser bastante caro e a opção gratuita é muito limitada.
  • Uma maneira de simular a entrada e a saída de dois dedos em telefones e tablets

Laboratório de Qualidade Contínua Perfecto Mobile
Logotipo da Perfecto
O Perfecto Mobile Continuous Quality Lab é outra plataforma baseada em nuvem, que não tem apenas a opção de teste de página para dispositivos móveis. No contexto do teste da versão móvel do seu site, as seguintes vantagens devem ser determinadas:

  • Testes em tempo real em mais de 500 dispositivos diferentes
  • Não só Android e iOS, mas também as plataformas WinPhone, Symbian e Blackberry estão disponíveis para testes
  • Compartilhamento de dispositivo
  • Teste de automação simultânea em vários dispositivos
  • Suporte de captura de tela

Algumas das desvantagens da Perfecto Mobile Continuous Quality são:

  • Imagem indistinta (muitas vezes ilegível)
  • Longo tempo de resposta
  • A versão de teste gratuita usando é limitada a 60 minutos.

Testando com emuladores móveis

Outra maneira possível de resolver o problema da falta de dispositivos reais é usar ferramentas especiais, que emulam ou simulam sua funcionalidade.

A utilização deste tipo de ferramentas dá-lhe a capacidade de identificar problemas e problemas com o website e permite-lhe tomar medidas corretivas para tornar o website visualmente apelativo e funcional em dispositivos móveis.

As pessoas costumam confundir o “emulador” e o “simulador”. Embora ambos pareçam quase iguais, ainda há uma diferença entre eles.

Um emulador funciona como um substituto para o dispositivo original. Ele pode executar o mesmo software e aplicativos do dispositivo original sem modificá-los e nem pode apontar a diferença no sistema duplicado.

Por outro lado, um simulador pode configurar o ambiente semelhante ao sistema operacional original do dispositivo, mas não se esforça para replicar seu hardware.

Assim, os emuladores são preferíveis para testes em sites para dispositivos móveis, enquanto os simuladores são melhores para testes em aplicativos para dispositivos móveis.

Vamos considerar alguns emuladores frequentemente usados

MobileMoxie
logotipo moxie móvel
O MobileMoxie Emulator é uma parte integrante do MobileMoxie Marketing Toolset, que ajuda você a oferecer ótimas experiências móveis aos seus clientes. É fácil de usar. Basta digitar o URL do seu website no campo apropriado.

moxie móvel
Emulador do Windows Phone
logotipo do telefone do windows
Emulador do Windows Phone  é o ambiente móvel especial onde você pode testar, visualizar e depurar aplicativos do Windows Phone e usar o navegador para verificar sites.

Alguns méritos do emulador do Windows Phone:

  • SDK completo com emulador de dispositivo
  • Várias resoluções de tela
  • Ferramenta de captura de tela
  • Simulação de acelerômetro

Limitações do emulador do Windows Phone:

  • Funciona apenas no Windows.
  • O nível de brilho do emulador é sempre “Alto”
  • Câmera e vídeo são usados com limitações

Emulador do Android Studio
logotipo do estúdio android
O emulador do Android Studio permite que você crie um dispositivo móvel virtual para executar aplicativos Android e testar sites para dispositivos móveis. O emulador está localizado dentro do pacote do Android SDK.

Vantagens do emulador do Android Studio:

  • Funciona no Windows, Mac OS X, Linux
  • O emulador do Android Studio pode transferir informações mais rapidamente do que usar um dispositivo de hardware conectado
  • Ambiente unificado em que todos os dispositivos Android podem ser usados

Algumas desvantagens do emulador do Android Studio:

  • Se você precisar apenas do navegador para testar sites móveis, baixe muitas coisas desnecessárias
  • Algumas limitações técnicas: Recomenda-se 8 GB de RAM; Recomenda-se 4 GB de espaço em disco disponível.

Emulador Opera Mobile  
logotipo da ópera
O Opera Mobile Emulator é uma demonstração ao vivo do navegador do Opera, que funciona como se fosse instalado em um aparelho. Algumas ferramentas extras de depuração também estão disponíveis, como atalhos de teclado, o seletor de perfil e vários sinalizadores de linha de comando.

Os principais méritos do Opera Mobile Emulator:

  • É simples de instalar e fácil de usar. Você não precisa instalar nenhum SDK complexo ou algo assim.
  • Existem três modos de entrada disponíveis: toque, teclado e tablet.
  • Ele vem pré-configurado com uma série de perfis de telefones e tablets
  • Todos os modos podem ser ativados e controlados por links e controles
  • Depuração remota com dispositivos reais

Alguns pontos fracos do Opera Mobile Emulator:

  • Você pode verificar a aparência das páginas apenas no navegador móvel do Opera.
  • Menos do suporte de mídia

Ferramentas compatíveis com dispositivos móveis e validação

É bem conhecido que o Google indexa websites amigáveis para dispositivos móveis e que não são compatíveis com dispositivos móveis. É por isso que você deve usar ferramentas especiais para verificar se seu website atende aos critérios geralmente aceitos.

Como regra geral, todas essas ferramentas são fáceis de usar. Tudo o que você deve fazer é digitar o URL da sua página no formulário apropriado.

Teste de compatibilidade com dispositivos móveis do Google
logotipo dos desenvolvedores do google
O teste de compatibilidade com dispositivos móveis do Google é a ferramenta que mostra se o Google considera sua página compatível com dispositivos móveis ou não. Se o seu site passar no teste, você verá uma mensagem verde que diz “Incrível! Esta página é compatível com dispositivos móveis ”. Se não passar, a mensagem será vermelha e diga “Não compatível com dispositivos móveis”.

Nesse caso, a página será empurrada para baixo nos resultados da pesquisa para celular em favor de páginas semelhantes de outros sites compatíveis com dispositivos móveis.

mobiReady
logotipo mobiReady
O mobiReady permite avaliar a disponibilidade móvel do seu site usando as melhores práticas e padrões do setor. O relatório gratuito fornece uma pontuação (de 1 a 5) e uma análise detalhada das páginas para determinar o desempenho do seu site em um dispositivo móvel.

Os principais méritos do mobiReady são:

  • Relatórios de erros detalhados
  • Teste em todo o site
  • Uma ferramenta de visualização para ver como seu site fica na tela de um celular
  • Testes de mobileOK do W3C
  • Aconselha a melhorar a disponibilidade do seu site para dispositivos móveis

Serviço W3C mobileOK checker
logotipo w3c
O W3C mobileOK checker é um serviço gratuito da W3C (o consórcio mundial para padrões da web) que ajuda a verificar o nível de compatibilidade com dispositivos móveis dos documentos da Web e, em particular, afirma se um documento da Web é “móvel OK”.

Os testes são definidos no mobileOK testes básicos 1.0 especificação. Somente se a idade da Web passar em todos os testes, ela receberá o status “mobileOK”.

As outras opções, que podem ser validadas:

Varvy
logotipo varvy
Varvy é uma coleção de ferramentas gratuitas para testar SEO, velocidade e funcionalidade móvel de um site.

Principais características do Varvy:

  • Teste de concordância das diretrizes do Google
  • Otimização de velocidade de página
  • Uma ampla variedade de dicas e diretrizes para otimizar o desempenho da página da web

Teste as ferramentas de velocidade do site

Como foi mencionado acima, o download e a velocidade operacional do seu site têm um impacto direto no número de visitantes.

Existem ferramentas simples e avançadas para testar a velocidade da página, a otimização do mecanismo de pesquisa e o desempenho do navegador móvel. Você deve avaliar não apenas a velocidade do seu website, mas também a do seu concorrente. Siga recomendações úteis para melhorar seus resultados.

Aqui estão algumas ferramentas, que podem ajudá-lo a fazer isso.

Velocidade da página on-line do Google
logotipo do teste do speeed da página do google
O Page Speed Online do Google é uma ferramenta abrangente, que não apenas permite que você verifique o desempenho, mas também forneça muitas informações. Junto com isso, ele também vem com um relatório sobre as melhores práticas que você pode usar para dispositivos móveis, a fim de otimizar seu desempenho.

Pingdom
logotipo pingdom
Pingdom permite identificar o que é rápido, lento, grande demais e as práticas recomendadas que você não está seguindo. Todos os testes são feitos com navegadores reais, portanto, os resultados correspondem à experiência do usuário final. Os testes são salvos para que você possa acompanhar seu desempenho ao longo do tempo.

GTmetrix
Logotipo do GTmetrix
O GTmetrix permite que você forneça testes de várias regiões e analise seu desempenho em dispositivos móveis. Obtenha a velocidade de carregamento do seu site junto com recomendações práticas para lidar com seus gargalos.

Impacto de carga
logotipo de impacto de carga
O Load Impact permite executar testes de carga em larga escala com até 1,2 milhão de usuários simultâneos. Ele gera carga de até 10 locais diferentes simultaneamente e até mesmo adiciona mais locais mediante solicitação. O Load Impact simula o tráfego exatamente como isso aconteceria na vida real.

Monitor de Dotcom
logotipo da dotcom-monitor
O teste de velocidade do Dotcom-Monitor permite que um usuário selecione de qual navegador gostaria de testar – Chrome, Firefox, Internet Explorer e navegadores móveis, incluindo iPhone, iPad e muito mais. Você tem a capacidade de testar seu site em 20 locais em todo o mundo. Quando um teste é concluído, os usuários podem detalhar os relatórios de desempenho e uma análise de gráfico em cascata.

Espero que as informações e ferramentas mencionadas neste artigo sejam realmente úteis para aumentar a prontidão de dispositivos móveis do seu site. Gostaríamos de saber sobre sua experiência de uso prático. Talvez você possa recomendar algumas outras ferramentas. Deixe-nos saber nos comentários.