Há anos, os especialistas dizem que o tráfego para sites de visitantes em dispositivos móveis tem aumentado dramaticamente. Por esse motivo, muitas empresas começaram a adotar de forma inteligente uma estratégia móvel para sua presença online, criando experiências adequadas para telefones e outros dispositivos móveis.
Depois de passar o tempo aprendendo como projetar páginas da web para telefones celularese implementando sua estratégia, você também desejará garantir que os visitantes do seu site possam ver esses designs. Há muitas maneiras de fazer isso e algumas funcionam melhor do 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 próxima ao final sobre qual é o melhor método para conseguir isso na Web hoje.
Forneça 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 eles podem ou não ver suas páginas, basta colocar um link em algum lugar próximo ao topo da página que aponta para uma versão móvel separada do seu site. Em seguida, os leitores podem selecionar se desejam ver a versão móvel ou continuar com a versão "normal".
O benefício dessa solução é que ela é fácil de implementar. Ele requer que você crie uma versão otimizada para celular e, em seguida, adicione um link em algum lugar próximo ao topo das páginas normais do site.
As desvantagens são:
- Você deve manter uma versão separada do site para usuários móveis. À medida que seu site fica maior, você pode se esquecer de manter a segunda versão e seus sites podem perder a sincronia.
- Você também cria uma terceira versão para tablets? Que tal uma quarta versão para vestuário? Este conceito de versões específicas do dispositivo pode sair do controle muito rapidamente.
- Você deve colocar um link feio no topo da página que os leitores não móveis possam ver (e possivelmente clicar nele).
Em última análise, essa abordagem está desatualizada e provavelmente não fará parte de uma estratégia móvel moderna. Às vezes é usado como uma solução temporária 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 detecção de navegador script para detectar se o cliente está em um dispositivo móvel e, em seguida, redirecioná-lo para esse outro dispositivo móvel local. O problema com navegador detecção 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 mencionada acima.
Use CSS @media Handheld
O comando CSS @media handheld parece ser uma maneira ideal de exibir CSS estilos apenas para dispositivos portáteis - como telefones celulares. Esta parece ser a 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 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 o folha de estilos define como deve ser - o que está realmente 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 telefones celulares e handhelds mais antigos não suportam CSS de forma alguma. No final das contas, 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 usuários móveis para um 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 olhar para o agente do usuário e, em seguida, alterar o 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:
O problema aqui é que existem muitos e 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 de forma alguma. E mais são adicionados o tempo todo.
Além disso, como com as outras soluções acima, você ainda terá que manter um site móvel separado para esses leitores! Essa desvantagem de ter que gerenciar dois (ou mais!) Sites é motivo suficiente para buscar uma solução melhor.
Use WURFL
Se você ainda está determinado a redirecionar seus usuários de celular para um site separado, entã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 esses agentes do usuário suportam.
Para usar o WURFL, você baixa o arquivo de configuração XML, escolhe o seu idioma e implementa a API no seu site. Existem ferramentas para usar WURFL com Java, PHP, Perl, Ruby, Python, Net, XSLTe C ++.
A vantagem de usar o WURFL é que há muitas pessoas atualizando e adicionando ao arquivo de configuração o tempo todo. Portanto, embora o arquivo que você está usando esteja desatualizado quase antes de você terminar de baixá-lo, é provável que, se você baixe-o uma vez por mês mais ou menos, você terá todos os navegadores móveis que seus leitores usam habitualmente, sem qualquer problemas. A desvantagem, é claro, é que você precisa fazer download e atualizar continuamente - tudo para direcionar os usuários a um segundo site e às desvantagens que isso cria.
A melhor solução é o design responsivo
Portanto, se manter sites diferentes para dispositivos diferentes não é a resposta, qual é? Web design responsivo.
O design responsivo é onde você usa consultas de mídia CSS para definir estilos para dispositivos de várias larguras. O design responsivo permite que você crie uma página da Web para usuários móveis e não móveis. Assim, você não precisa se preocupar com o conteúdo a ser exibido no site para celular ou lembre-se de transferir as alterações mais recentes para o seu site para celular. 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 dos quais são muito pouco usados hoje e não devem ser uma grande preocupação para você), mas porque é aditivo (adicionar estilos ao conteúdo, em vez de remover o conteúdo), esses leitores ainda serão capazes de ler seu site, apenas não parecerá ideal em seus dispositivos antigos ou navegador.