Web design responsivo foi introduzido pela primeira vez para nós por Ethan Marcotte em um post de 2010 publicado em A List Apart intitulado (como você poderia esperar) Responsive Web Design.

No mesmo ano – na verdade, apenas algumas semanas antes – o iPad se tornou o primeiro da atual onda de tablets móveis a ser lançado ao público, mudando a forma como navegamos na web e nos comunicamos para sempre.

Desde então, o design responsivo tornou-se lentamente mais difundido.

Mas para a grande maioria das pessoas que usam a web, o termo não significa nada. Eles só querem que os sites sejam renderizados corretamente no dispositivo. Eles não querem clicar em minúsculos hiperlinks que podem ou não levá-los para a página que eles queriam, e eles certamente não querem esperar enquanto uma página fica cheia de código pesado de recursos e imagens demoram muito para serem baixadas.

Eles querem páginas rápidas e de carregamento rápido que sejam fáceis de usar, que é o que você deve obter com o design responsivo.

E isso, em poucas palavras, é por isso que você está lendo isso. Neste post vamos ajudá-lo a transformar o deveria em vontade.

A responsividade móvel é agora um fator de classificação
O que trouxe tudo à mente é o anúncio do Google, há alguns meses, de que a facilidade de uso dos sites em dispositivos móveis se tornará um fator de classificação.

Google fez o anúncio em fevereiro:

A partir de 21 de abril, expandiremos nosso uso de compatibilidade com dispositivos móveis como um sinal de classificação. Essa alteração afetará as pesquisas em dispositivos móveis em todos os idiomas do mundo e terá um impacto significativo em nossos resultados de pesquisa. Consequentemente, os usuários acharão mais fácil obter resultados de pesquisa relevantes e de alta qualidade que sejam otimizados para seus dispositivos.

Apesar disso, o dia 21 de abril chegou e passou, e nada realmente aconteceu. Pelo menos ainda não . Mas você pode garantir que é apenas uma questão de tempo .

A atualização é apelidada Mobilegeddon nos círculos de SEO e marketing online. É também um grande negócio para as empresas; na verdade, é uma atualização tão importante que foi notícia nos EUA e no Reino Unido.

No post de hoje, quero analisar maneiras de testar seu site, ou de seus clientes, para ver se eles respondem ou não a dispositivos móveis com eficiência. E se eles são não , vamos cobrir o que você pode fazer sobre ele.

O que é um bom design responsivo?

O design responsivo se adapta de maneira fluida a todos os tamanhos e resoluções de tela

O design responsivo se adapta de maneira fluida a todos os tamanhos e resoluções de tela

O objetivo do design responsivo é fornecer a todos os usuários, independentemente do dispositivo que estiverem usando, uma experiência de navegação consistentemente utilizável.

Em termos mais específicos, isso significa que todas as funções devem funcionar e se comportar da mesma maneira em cada dispositivo. Em seu blog típico, isso pode ser tudo, desde botões de compartilhamento social, formulários de inscrição em listas de distribuição, até menus de navegação. Além disso, o conteúdo deve ser facilmente digerível, não importa em qual dispositivo o usuário final está navegando.

Normalmente, existem quatro tipos de tela:

  1. Desktop
  2. Notebook
  3. Tablet
  4. Smartphone

As dimensões exatas de cada uma variam muito entre os fabricantes. Seu site deve ter a mesma aparência em cada variante. Descobrir isso parece divertido, certo?

Você precisa de um site responsivo?
Resposta rápida: Você certamente fará no futuro. Não há dúvidas quanto a isso. Mas você precisa de um agora ? Outra resposta rápida: quase certamente.

Se você não gastar muito tempo olhando os dados no Google Analytics, é um bom momento para remediar isso, especialmente no que diz respeito a pessoas que visitam seu site em um dispositivo móvel. A partir dos dados, você pode descobrir quantas pessoas visitam seu site usando um dispositivo móvel. Você também pode descobrir quanto tempo eles permanecem e que tipo de experiência eles estão tendo.

Dependendo de como você configurou o Google Analytics, você também pode descobrir quantas pessoas usando um dispositivo móvel convertem em clientes, participam de sua lista de e-mails ou inscrevem-se em uma avaliação gratuita de seu serviço ou software.

Para visualizar os dados, acesse sua conta do Google Analytics, selecione o site que você deseja analisar e acesse Audiência> Celular> Visão geral .

Aqui você verá análises para desktops, celulares e tablets.

Se o seu site não responder, confira os dados relacionados a como as pessoas interagem com seu site:

Taxa de rejeição
Páginas / Sessão
Duração Média da Sessão
Taxa de conversão de meta
Se os números forem significativamente mais baixos do que as estatísticas da área de trabalho, você terá um sério problema em suas mãos. Os dados informam que as pessoas em celulares e tablets não estão tendo uma boa experiência ao visitar seu site.

O que significa que é hora de fazer alguma coisa.

Testando seu site para capacidade de resposta móvel
Se você não é que seu site seja responsivo para dispositivos móveis, a primeira coisa que você deve fazer é executar alguns testes. Felizmente, existem muitas ferramentas on-line que podem ajudar você a avaliar como um site se parece e funciona em dispositivos móveis.

Nós vamos chegar a alguns desses em poucos segundos. Mas, por enquanto, vamos realizar os testes mais simples de todos.

Se você estiver em uma máquina desktop, acesse o site que deseja testar, deixe-o carregar e torne a tela do navegador mais estreita. Ao fazer isso, se o site tiver um design responsivo, os elementos da página da Web serão reduzidos um em cima do outro, mas você ainda poderá ver a página inteira em virtude da rolagem.

Se você estiver usando um dispositivo móvel, basta visitar o site que deseja testar e ver como ele é processado na sua máquina. Se parecer exatamente o mesmo que a versão para desktop, mas encolhida, seu site não responderá.

Como testar vários dispositivos usando emuladores on-line
Está tudo muito bem rodando esses dois testes simples, mas e quanto à infinidade de máquinas por aí? De iPads aos smartphones Google Nexus e Samsung Galaxy? Como o seu site as vê?

Felizmente, você não precisa sair e gastar uma pequena fortuna em todos os dispositivos do mercado. Em vez disso, use um dos sites de emulador disponíveis para executar seus testes.

Vamos dar uma olhada em alguns deles.

MobileTest.me
MobileTest.me

Este teste seu site em seis emuladores populares de dispositivos móveis, incluindo o iPhone 5, o HTC ONE e o Google Nexus.

Para testar um site, clique no dispositivo em que você está interessado e insira o URL do site / página que você deseja testar. Dentro de alguns segundos, o emulador recupera a página no dispositivo. Além disso, os links de página e outros dados permanecem ativos, para que você possa navegar no site por meio do emulador.

Use o MobileTest.me .

Responsinador
Responsinador

Um excelente emulador que se concentra principalmente em dispositivos da Apple, mas também inclui algumas máquinas Android. Em vez de ter que testar cada dispositivo, como o MobileTest.me, basta digitar o URL de teste e percorrer a página.

Ao fazer isso, você verá como é exibido em dispositivos populares nos modos retrato e paisagem.

Use o Responsinator .

Eu sou responsivo
Eu sou responsivo

O mesmo processo aqui: insira o URL de teste para obter os resultados. Desta vez, você não rola; você verá os resultados na parte superior da tela para dispositivos genéricos. Se você clicar dentro da tela de cada um, poderá rolar e usar o site normalmente.

Use eu sou responsivo .

Teste de compatibilidade com dispositivos móveis do Google
Há mais uma coisa que vale a pena mencionar: a ferramenta do próprio Google.

Ferramenta de teste do Google Mobile

Use o teste de compatibilidade com dispositivos móveis do Google .

Qual o proximo?
A essa altura, você compreende a importância do design responsivo e sabe como seu site se parece em vários dispositivos. Mas você precisa agir?

Se o seu site funciona em todos os dispositivos, você não precisa fazer nada. continue trabalhando para melhorar seu site para seus visitantes atuais e futuros.

Se o seu site não funcionar, você tem três opções:

Converta o design atual para responsivo. Isso poderia ser mais um problema do que o seu valor.
Use um tema para celular. Isso anula os principais princípios de design responsivo de consistência e usabilidade.
Adote um novo tema ou design responsivo para dispositivos móveis. Embora não seja a opção mais barata, a partir do zero é sem dúvida a única opção que não representa um compromisso de algum tipo.
Incidentalmente, seria negligente de minha parte não mencionar que fazemos lindos temas responsivos, com nada menos que 21 para escolher .

Depois de instalar o novo tema, é hora de testá-lo. Aqui estão três principais considerações a ter em mente:

É fácil para os usuários navegarem em seu site?
O conteúdo é fácil de ler?
É fácil para os usuários seguirem seus Apelos à Ação?
Percorra todas as partes do seu site como se você fosse um usuário e corrija qualquer problema que encontrar. Se você está usando um dos nossos temas e se deparou com um problema, basta entrar em contato . nós ficaríamos felizes em ajudar.

Empacotando
Acho que a decisão do Google de “forçar” as pessoas a adotarem projetos responsivos para dispositivos móveis está muito atrasada.

Pois também, grandes sites grandes e grandes empresas têm se arrastado quando se trata de mudar. Essa perda potencial no tráfego e nas vendas é um sinal infalível para eles agirem.

Para web designers freelancers e construtores de temas, você pode estar entrando no período mais ocupado de sua carreira, à medida que a pressa em cumprir o ritmo de reuniões. Quantos clientes você possui que ainda usam projetos não responsivos? Quantos sites não responsivos estão à espera de uma atualização? Eu estremeço pensar! Mas uma coisa é certa: há muitos negócios, especialmente se você puder comunicar claramente o quão importante é o design responsivo.

Se você precisa enfatizar o ponto de vista de seus clientes sobre a importância do design responsivo e como o site deles se parece em relação aos concorrentes, os emuladores on-line são ótimas ferramentas para usar e devem facilitar muito a venda de seus serviços!

Espero que você tenha achado este post útil. Eu adoraria ler seus pensamentos e experiências nos comentários abaixo.