Por anos, especialistas vêm dizendo que o tráfego para sites de visitantes em dispositivos móveis tem aumentado dramaticamente. Por esse motivo, muitas empresas começaram a adotar com inteligência uma estratégia móvel para sua presença on-line, criando experiências adequadas para telefones e outros dispositivos móveis.
Depois de ter passado o tempo aprendendo a projetar páginas da web para telefones celulares e implementando sua estratégia, você também desejará garantir que os visitantes do seu site possam ver esses projetos. Há muitas maneiras de fazer isso e algumas funcionam melhor que outras. Aqui está uma olhada no método que você pode usar para implementar o suporte móvel em seus sites - junto com uma recomendação perto do final para qual é o melhor método para conseguir isso na Web de hoje!
Fornecer um link para outra versão do site
Este é, de longe, o método mais fácil de lidar com usuários de telefones celulares. Em vez de se preocupar se podem ou não ver suas páginas, basta colocar um link em algum lugar perto do topo da página que aponte para uma versão móvel separada do seu site. Então os leitores podem se auto-selecionar se querem ver a versão móvel ou continuar com a versão "normal".
O benefício desta solução é que é fácil de implementar. Ele exige que você crie uma versão otimizada para dispositivos móveis e adicione um link em algum lugar perto da parte superior das páginas normais do site.
As desvantagens são:
- Você precisa manter uma versão separada do site para usuários móveis. À medida que seu site cresce, você pode esquecer de manter essa segunda versão e seus sites podem ficar fora de sincronia.
- Você também cria uma terceira versão para tablets? Que tal uma quarta versão para wearables? Esse conceito de versões específicas de dispositivos pode sair rapidamente do controle rapidamente.
- Você tem que colocar um link feio no topo da página que os leitores não móveis possam ver (e possivelmente clicar).
Em última análise, essa abordagem é desatualizada e é improvável que faça parte de uma estratégia móvel moderna. Às vezes é usado como uma correção de intervalo, enquanto uma solução melhor está sendo desenvolvida, mas é realmente um band-aid de curto prazo neste momento.
Use JavaScript
Em uma variação da abordagem mencionada acima, alguns desenvolvedores usam algum tipo de script de detecção de navegador para detectar se o cliente está em um dispositivo móvel e, em seguida, redirecioná-lo para esse site móvel separado. O problema com a detecção de navegadores e dispositivos móveis é que existem milhares de dispositivos móveis por aí. Tentar detectá-los todos com um JavaScript pode transformar todas as suas páginas em um pesadelo de download - e você ainda está sujeito a muitas das mesmas desvantagens da abordagem acima mencionada.
Use o CSS @media Handheld
O comando CSS @media handheld parece ser uma maneira ideal de exibir estilos CSS apenas para dispositivos portáteis - como telefones celulares. Essa parece ser uma solução ideal para exibir páginas para dispositivos móveis. Você escreve uma página da Web e, em seguida, cria duas folhas de estilo. O primeiro para o tipo de mídia "tela" estiliza sua página para monitores e telas de computador. O segundo para o "handheld" estiliza sua página para pequenos dispositivos como esses telefones celulares. Parece fácil, mas realmente não funciona na prática.
A maior vantagem desse método é que você não precisa manter duas versões do seu site. Você apenas mantém um, e a folha de estilo define como deve ser - o que, na verdade, está se aproximando da solução final que queremos.
Um problema com este método é que muitos telefones não suportam o tipo de mídia - eles exibem suas páginas com o tipo de mídia de tela. E muitos celulares e handhelds mais antigos não suportam CSS. No final, esse método não é confiável e, portanto, raramente é usado para fornecer versões móveis de um site.
Use PHP, JSP, ASP para detectar o agente do usuário
Esta é uma maneira muito melhor de redirecionar os usuários móveis para uma versão móvel do site, porque não depende de uma linguagem de script ou CSS que o dispositivo móvel não usa. Em vez disso, ele usa uma linguagem do lado do servidor (PHP, ASP, JSP, ColdFusion etc.) para examinar o user-agent e, em seguida, alterar a solicitação HTTP para apontar para uma página móvel, se for um dispositivo móvel.
Um código PHP simples para fazer isso ficaria assim:
stristr ($ ua, "Windows CE") oustristr ($ ua, "AvantGo") oustristr ($ ua, "Mazingo") oustristr ($ ua, "Mobile") oustristr ($ ua, "T68") oustristr ($ ua, "Syncalot") oustristr ($ ua, "Blazer")) {$ DEVICE_TYPE = "MOBILE";}if (isset ($ DEVICE_TYPE) e $ DEVICE_TYPE == "MOBILE") {$ location = 'mobile / index.php';cabeçalho ('Localização:'. $ localização);Saída;}?>
O problema aqui é que existem muitos outros agentes de usuário em potencial que são usados por dispositivos móveis. Este script irá capturar e redirecionar muitos deles, mas não todos por qualquer meio. E mais são adicionados o tempo todo.
Além disso, assim como as outras soluções acima, você ainda terá que manter um site para celular separado para esses leitores! Essa desvantagem de ter que gerenciar dois (ou mais!) Sites é motivo suficiente para procurar uma solução melhor.
Use WURFL
Se você ainda está determinado a redirecionar seus usuários móveis para um site separado, o WURFL (Wireless Universal Resource File) é uma boa solução. Este é um arquivo XML (e agora um arquivo DB) e várias bibliotecas DBI que não apenas contêm dados atualizados do agente do usuário sem fio, mas também quais recursos e capacidades são suportados pelos agentes de usuário.
Para usar o WURFL, você faz o download do arquivo de configuração XML, escolhe seu idioma e implementa a API no seu site. Existem ferramentas para usar o WURFL com Java, PHP, Perl, Ruby, Python, Net, XSLT e C ++.
O benefício de usar o WURFL é que há muitas pessoas atualizando e adicionando o arquivo de configuração o tempo todo. Então, enquanto o arquivo que você está usando está desatualizado quase antes de você terminar de baixá-lo, é provável que se você baixá-lo uma vez por mês, você terá todos os navegadores móveis que seus leitores habitualmente usam sem qualquer problemas. A desvantagem, é claro, é que você tem que baixar e atualizar continuamente - tudo para que você possa direcionar os usuários para um segundo site e as desvantagens que isso cria.
A melhor solução é design responsivo
Então, se a manutenção de sites diferentes para dispositivos diferentes não é a resposta, o que é? Web design responsivo.
O design responsivo é onde você usa as consultas de mídia CSS para definir estilos para dispositivos de várias larguras. O design responsivo permite criar uma página da Web para usuários móveis e não móveis. Então você não precisa se preocupar com o conteúdo a ser exibido no site para dispositivos móveis ou lembre-se de transferir as alterações mais recentes para seu site para dispositivos móveis. Além disso, depois de ter escrito o CSS, você não precisa baixar nada novo.
O design responsivo pode não funcionar perfeitamente em dispositivos e navegadores extremamente antigos (a maioria deles é muito pequena atualmente e não deve ser uma grande preocupação para você), mas porque é aditiva (adicionando estilos ao conteúdo, em vez de usar conteúdo embora) esses leitores ainda poderão ler seu site, ele não parecerá ideal em seu dispositivo ou navegador antigo.
