Detetar e redirecionar smartphones

Com a perspectiva de crescimento explosivo do mercado dos smartphones e, em consequência, da Mobile Web cada vez se torna mais importante desenhar software para uso exclusivo deste ambiente. O layout dos sites concebidos a pensar no “desktop” não se adapta geralmente bem a este mercado por duas ordens de razões: a primeira é o peso relativo dos ficheiros carregados: como é sabido quer a velocidade quer os custos das comunicações móveis são – para já – pouco compatíveis com esse tipo de utilização; depois a dimensão (e formato) dos ecrãs é totalmente diferente, o que torna a visulalização das páginas “tradicionais” bastante penosa e por vezes praticamente ilegível no seu todo.

Alguns browsers para o mercado mobile (como o Opera) têm feito um excelente trabalho para resolver esta situação, mas sejamos claros: os terminais móveis (smartphones e PDAs) precisam de sites desenvolvidos especificamente para eles. Numa série de 3 artigos vou falar sobre esta matéria, indo começar agora pela questão um pouco mais técnica da detecção e redirecionamento automáticos dos utilizadores quando estes chegam a um site “desktop”. Isto pode ser feito em 3 passos, segundo a metodologia que eu mesmo sigo¹:

1. Detectar o ecrã

A primeira pergunta que eu faço é? Quantos pixeis tem o ecrã que está a vir ao meu site? Se, digamos, tiver menos de 600 pixeis, decerto que é um dispositivo móvel (mas se o não for também não há problema , porque qualquer site normal não foi feito a pensar em resoluções tão pequenas)².

Esta detecção é feita logo no index.php³ ou outro ficheiro que esteja presente no arranque através de uma rotina deste tipo:

 
<?php 
if ($_GET["op"] != "nomobile") { 
 echo('<script type="text/javascript">
//<![CDATA[
 if (screen.width <= 600) {
 window.location.replace("http://redebiz.net/site/mobile/")
 }
//]]>
 </script>'); 
} 
?> 

Como se pode ver há umas linhas em JavaScript já que o PHP não tem nenhuma instrução para detectar a resolução dos ecrãs. Mas o que diz o código acima?

1 – Se alguém vier “de fora” e não “carregar” consigo a variável “op” com o valor “nomobile”, então…

2 – Se o ecrã tiver uma resolução igual ou inferior a 600px;

3 – É redirecionado automaticamente para o ficheiro index.php que se encontra no directório “mobile”.⁴

2. Mandar Smartphones para um lado e os restantes para outro

Agora que todos os “pequeninos” foram enviados para o mesmo lado há que resolver a velha máxima: “todos os telefones são iguais só que alguns são mais iguais do que outros”….

Assim, chegando ao directório ou sub-domínio onde os “Sub-600″ vão parar há que distinguir se estamos a falar de um iPhone, Blackberry, Android ou Palm Pre, ou de algo de um “campeonato” diferente⁵.

A minha abordagem é a seguinte:

1 – Os mais pequenos (em termos de ecrãs) separo-os atribuindo-lhe diferentes folhas de estilo dentro do mesmo “visual”;

2 – Os maiores “levam” com um site específico para eles, sendo que este também possui diferentes folhas de estilo (CSS) para evitar problemas com o display devido a diferentes dimensões de ecrãs, possibilidade de estes serem colocados na horizontal, terem “touch screens”, etc.

Assim, no site chamado há pouco automaticamente, há alguns smartphones que vão continuar o seu percurso e “aterrar” ainda noutra página…

Portanto, no recém chegado index.php vai-se ainda encontrar a seguinte rotina:

 
<?php 
$agent = $_SERVER['HTTP_USER_AGENT']; 
 if (ereg("iPhone|iPod|BlackBerry|Android |PalmSource)", $agent) !=false) 
 { 
 echo('<script type="text/javascript">
 window.location.replace("./smart/smart.php");
 </script>'); 
 } 
?> 

O que é que ela diz?

1 – Se o telefone móvel for um dos do grupo assinalado…

2 – Não fica aqui e continua para outra página;

3 – Os restantes, ficam obedecendo às regras que forem determinadas nas folhas de estilo respectivas (mais uma pequena rotina em PHP e JavaScript):

 
<?php 
if (strstr($_SERVER['HTTP_USER_AGENT'], 'Symbian')) { 
echo " <link rel='stylesheet' type='text/css' href='./symbian.css' />"; 
} 
elseif (strstr($_SERVER['HTTP_USER_AGENT'], 'Opera Mini')) { 
echo "<link rel='stylesheet' type='text/css' href='./opera.css' />"; 
} 
else { 
echo " <link rel='stylesheet' type='text/css' href='./estilomob.css' />"; 
?> 

Quer o browser “Symbian”, quer o “Opera Mini” cobrem uma infinidade de telemóveis com capacidade de navegação na Internet, pelo que dificilmente algum fica de fora; de qualquer modo na última linha há uma configuração genérica que serve – em princípio – para qualquer situação não satisfeita por eles.

Telefone Móvel correndo site no Opera Mini 5 Beta

Chamava aqui a atenção para a questão referida acima da importância do design específico das páginas que deve ser feito para este tipo de terminais⁶.

3. Personalizar as Folhas de Estilo (CSS)

Esta é a última tarefa que deve ser feita para qualquer categoria e de que já se deu um exemplo acima. Assim, igualmente no ficheiro smart.php têm-se definidos estilos para as diferentes famílias de “smartphones”. Isto porque, como também já se disse, estamos perante diferentes comportamentos dos browsers que eles utilizam.

Creio que é importante, em todo o caso, manter a coerência gráfica entre o site “pai” e todos os restantes, por duas ordens de razões:

a) Porque as pessoas podem permutar entre eles;

b) A identidade “corporativa” deve ser coerente em todo o lado, por uma questão de “marketing”.

Assim, neste caso o site visto num iPhone apareceria assim:

iPhone correndo o Site personalizado⁷

Como já disse a pessoa poderá sempre optar por visitar o site “normal”, já que foi “forçada” a ir para o desenvolvido para o seu terminal específico. Para o efeito está sempre disponível um “link” para o fazer (no caso do iPhone é a casa de “telhado amarelo” da imagem). Ao premir nesse link a variável “opt” do código PHP exibido acima adquire o valor “nomobile” e assim a rotina com que tudo começou é simplesmente ignorada.

O site principal para comparação pode ser visto aqui: http://redebiz.net/site. É a partir dele que são directamente redirecionados os terminais móveis quando chegam ao site. Pode tentar fazê-lo do seu telemóvel / celular , se quiser. Vai ver que funciona

_____________

1 – Existem outras abordagens desta questão do redirecionamento, mas esta parece-me talvez a mais simples, clara e fácil de implementar.

2 – Mas como também explico ao visitante é sempre dada a opção de navegar no site “normal”.

3- Pois, temos de usar o PHP porque vamos precisar de executar algumas funções nesta linguagem.

4 – Este nome é arbitrário; em todo o caso a ideia é reenviar para o site onde se encontram as páginas para os telemóveis (celulares) e Smartphones.

5 – Peço desculpa à Nokia mas, por uma questão prática, vamos pôr os “Symbian” – num lugar à parte.

6 – Questão que vou abordar num artigo específico sobre este assunto: Design de Páginas para a Mobile Web.

7 – Se tiver um iPhone pode ver que o ecrã fica todo cheio, quer na horizontal, quer na vertical; no exemplo comprimiu-se a página para se poder ter uma perspectiva melhor do seu conteúdo.

Be Sociable, Share!

•