A tendência de usuários que acessam a web via dispositivos móveis em vez de computadores é cada vez maior, mas isso não é uma novidade. No entanto, o esforço que muitas vezes é necessário fazer para adaptar sites existentes para serem exibidos com qualidade em dispositivos móveis tem desencorajado muitos desenvolvedores web para fazer esse esforço.

No entanto, um anúncio recente do Google de que eles podem penalizar sites que não estejam adaptados para proporcionar uma boa experiência do usuário em dispositivos móveis criou uma certa urgência entre os desenvolvedores web para finalmente fazer o esforço de adaptação móvel.

Leia este artigo para aprender algumas dicas que podem ajudá-lo a organizar melhor o esforço para adaptar seus sites e fornecer uma boa experiência para usuários móveis.

Faça seu site móvel amigável para os usuários, não para o Google

Nos últimos meses, os sites PHP Classes e o JS Classes foram melhorados para proporcionar uma melhor experiência para os usuários que os acessam através de dispositivos móveis.

No passado, os usuários foram questionados sobre a importância de tornar o site móvel amigável. Poucos usuários expressaram interesse nisso. O fato é que 92% dos usuários acessam o site através de computadores pessoais, portanto, apenas 8% os acessaram via telefones celulares e tablets. Ainda assim, houve um aumento no uso de dispositivos móveis a partir do ano passado, que foi de apenas 6%.

O fato é que a maioria dos usuários vai a esses sites para fazer download de pacotes para usar em seus sites. Por isso, é improvável que eles façam isso a partir de um celular ou tablet. A minoria que acessa o site a partir de dispositivos móveis é provavelmente para ler artigos como este ou fazer outras coisas que não exijam acesso aos arquivos para download.

Tendo em vista que fazer sites amigáveis para dispositivos móveis muitas vezes não é uma tarefa trivial, essas estatísticas desencorajam os desenvolvedores a fazer esse esforço com urgência.

No entanto, recentemente, funcionários do Google têm sugerido que os sites que não oferecem experiência de usuário amigável para dispositivos móveis serão penalizados no tráfego vindo das buscas do Google. O Google introduziu muitas mudanças de algoritmo nos últimos anos que prejudicaram o tráfego de muitos sites. Receber outra penalidade é algo que nenhum site quer neste momento.

Ainda assim, as eventuais sanções do Google não devem ser sua principal motivação para tornar seus sites amigáveis para dispositivos móveis. O Google tem feito uma espécie de pressão sobre os desenvolvedores Web para fazerem seus sites amigáveis em dispositivos móveis de qualquer forma, por isso evitam enviar usuários para sites que não irão agradar-lhes.

Portanto, sua principal motivação deve ser agradar seus usuários fornecendo o que querem com a melhor experiência de usuário que possa ser proporcionada.

Embora seja verdade que apenas 8% dos usuários que visitam o meu site usam dispositivos móveis, não sabemos se o número não é maior justamente porque outros usuários já sabem que o site não era amigável para dispositivos móveis. Isso é uma motivação adicional para fazer esse esforço agora.

Escolha uma abordagem móvel que atenda melhor às necessidades dos usuários do seu site

Existem basicamente quatro abordagens que você pode seguir para proporcionar uma melhor experiência de usuário móvel para usuários de seu site. São elas:

1. Crie um site alternativo para dispositivos móveis

Se você deseja fornecer uma experiência de usuário móvel que seja totalmente diferente do que você fornece em seu site desktop, criar um site separado apenas para usuários móveis é um bom caminho.

Esta solução pode fazer sentido em alguns casos, mas o esforço é quase como criar um site totalmente novo, portanto, muitos desenvolvedores evitam segui-la.

A vantagem dela é que você poderá exibir apenas conteúdo e serviços que fazem sentido para usuários móveis. Isso pode resultar em páginas HTML mais enxutas e que carregam mais rápido e atendem usuários com qualquer resolução de tela.

Uma vez que esta abordagem geralmente consiste em servir o site móvel a partir de um domínio diferente, por exemplo m.example.com, torna-se mais fácil gerenciar o número de servidores que deve ser alocado para os usuários móveis e para os usuários desktop.

Para o Google a reconhecer que este é um local alternativo específico para os usuários móveis, você deve incluir tags de link rel = alternate nas páginas do site desktop, como neste exemplo:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >

Em suas páginas móveis, você deve incluir tags de link rel = canonical como estas:

<link rel = href "canonical" = "http://www.example.com/page-1">

2. Serviço dinâmico

A existência de diferentes URLs para sites móveis e desktop pode causar alguma confusão para os usuários.

Outro aspecto é que considerar apenas a largura da tela para determinar se o dispositivo móvel do usuário é ou não um dispositivo móvel não é uma abordagem confiável, já que smartphones modernos vêm com telas de alta resolução, apesar de suas telas serem pequenas em comparação com telas de desktop.

Portanto, você deve considerar o serviço alternativo dinâmico. Ele consiste em servir as páginas tanto do site desktop quanto móveis a partir das mesmas URLs, mas você deve entregar o HTML diferente de acordo com o dispositivo do usuário.

Esta abordagem é um pouco mais complicada, porque você precisa ser capaz de detectar o tipo de dispositivo que o usuário está usando, como verificar o cabeçalho do User-Agent enviado pelo navegador para o servidor. Você pode fazer isso em PHP olhando para a super-variável global $ _SERVER [‘HTTP_USER_AGENT’]. Então você precisa procurar um banco de dados para determinar as dimensões do dispositivo para descobrir se ele tem uma tela pequena.

Quando entregar HTML diferente para diferentes dispositivos através do mesmo endereço (URL), também será necessário enviar o cabeçalho de resposta HTTP Vary para permitir que os robôs do Google percebam que seu site funciona de maneira diferente dependendo do dispositivo do usuário. Você pode fazer isso usando um cabeçalho PHP como este:

<?php

  Header('Vary: User-Agent');

?>

3. Páginas web responsivas

Ter um site alternativo ou entregar páginas alternativas dinamicamente dá muito trabalho e exige mais esforço para manter um site. Portanto, muitos desenvolvedores web preferem implementar uma alternativa diferente, técnica chamada de responsiva.

Páginas web responsivas são páginas que se adaptam de acordo com mudanças necessárias nas dimensões da página web que está sendo entregue ao usuário. Isso significa que, se a página web altera suas dimensões, o layout das páginas deve adaptar-se de alguma forma usando sempre o mesmo código HTML.

Na prática, não só as páginas aparecem de forma diferente em telas de dimensões diferentes, mas elas também podem ser adaptadas, por exemplo, às mudanças de orientação da página. Vamos dizer que o usuário utiliza seu dispositivo na orientação retrato. Caso o usuário gire o dispositivo para que ele mude para a orientação paisagem, o layout da página será sensível a essa mudança e também irá se adaptar à largura e à altura da tela, uma vez que estas mudaram.

Esta abordagem é chamada de responsiva porque responde à mudança de tela dinâmica usando o mesmo HTML. Por isso, é muito flexível.

Esta responsividade é normalmente conseguida usando CSS media queries. Estas são declarações CSS que seu site pode ter em suas folhas de estilo CSS para redefinir atributos quando certas condições (meios) de tela são satisfeitas.

Aqui está um exemplo. Ele define a classe c640 que por padrão fará um elemento de bloco se tornar visível. No entanto, se a largura da tela for menor ou igual a 640 pixels, as propriedades de estilo c640 são redefinidas com novos valores. Neste caso, isso faz com que o elemento de bloco seja escondido para larguras menores do que 640 pixels.

.c640 {
	 display: block;
}

@media (max-width: 640px) {

.c640 {
 display: none;
}

}

4. Aplicativo móvel

Esta última abordagem não é realmente uma alternativa, mas sim uma solução complementar para proporcionar a melhor experiência para usuários de dispositivos móveis. Ela consiste no desenvolvimento de um aplicativo móvel que pode ser instalado no dispositivo do usuário, a fim de aproveitar as capacidades nativas do aparelho.

Existem alguns recursos nativos que você pode não ser capaz de fornecer aos usuários que acessam seus sites via Internet, como exemplo o envio de notificações push para seus dispositivos. Estas são as notificações que seu aplicativo em execução no lado do servidor pode enviar para usuários que têm seu aplicativo instalado. Elas são usadas ​​para comunicar aos usuários informações importantes ou levá-los a executar alguma ação.

Aplicativos móveis nativo versus híbridos

Os aplicativos móveis podem ser nativos, ou seja, chamar as APIs nativas do Android, iOS ou outro sistema. Alternativamente, esses aplicativos também podem ser híbridos, que são os aplicativos que estão instalados em dispositivos móveis como os nativos, mas seu código é feito com HTML, CSS e JavaScript. Aplicações híbridas apresentam ao usuário uma web view que é como um navegador dentro do seu aplicativo, mas não se parece com um navegador.

A vantagem de aplicativos híbridos é que você pode reutilizar suas bibliotecas JavaScript da sua preferência para desenvolver seu aplicativo e apresentar informações para o usuário usando elementos HTML e estilos CSS.

A desvantagem é que eles tendem a não ser tão bem integrados com o sistema móvel e, em alguns casos, são executados mais lentamente do que aplicativos nativos.

Em qualquer caso, o desenvolvimento de um aplicativo móvel não é um esforço tão trivial como a criação de um site. Por isso, ele é recomendado apenas se o aplicativo pode beneficiar o usuário com uma maior integração com o sistema de dispositivo móvel.

Redirecionar usuários móveis para a instalação de aplicativos mobile

Se seu site fornece um aplicativo móvel, você pode solicitar que o usuário instale o aplicativo redirecionando o dispositivo para a loja de onde o aplicativo deve ser instalado. Essa ação depende do sistema operacional usado no dispositivo móvel.

A classe PHP Native App Móvel Dispatcher, recentemente apresentada por André Liechti no site PHP Classes, pode ser usada ​​em seu site para redirecionar usuários para o aplicativo da loja correta, dependendo do dispositivo móvel do usuário. Ela esconde a complexidade de redirecionar URLs para as lojas de aplicativos utilizando parâmetros com as assinaturas corretas.

***

Na segunda parte, você vai conferir dicas para tornar o seu site responsivo.

***

Manuel Lemos faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://www.phpclasses.org/blog/post/262-10-Tips-to-Adapt-PHP-Web-Sites-for-Mobile-Devices.html