Como converter um site para um navegador móvel

dispositivos móveis, como smartphones e tablets, são responsáveis ​​por mais da metade de todo o tráfego Internet. No entanto, de acordo com pesquisa feita pela BrightEdge em 2014, mais de um quarto dos sites de pessoas visitam não estão configurados corretamente para esses dispositivos - a custar-lhes uma média de perda de 68 por cento no tráfego. Corretamente modificando o seu próprio site para navegadores móveis requer planejamento e testes. A codificação em si, no entanto, geralmente não é muito desafiador, especialmente se você já está familiarizado com CSS. Se você usar uma plataforma como o WordPress, você não precisa saber o código de todo.

plataformas comuns

Desde o advento do iPhone, os desenvolvedores por trás de plataformas web, como WordPress, Joomla e Drupal ter projeto móvel integrado. Drupal, por exemplo vem com temas móvel Friendly em sua instalação original. Cada uma dessas plataformas têm temas móveis que são projetados para chutar assim que seu site detecta que está sendo acessado por um navegador móvel. Outros temas já são móveis-friendly e irá responder a gestos de toque, assim como eles respondem aos cliques do mouse, sem alterar significativamente o design ou o layout do seu site através de dispositivos diferentes.

Usando CSS e HTML

Para sites HTML, use uma folha de estilo em cascata, ou CSS, arquivos de apresentar a versão móvel de suas páginas quando eles são acessados ​​por um navegador móvel. Embora seja possível codificar CSS para detectar dispositivos específicos, uma abordagem mais comum é especificar layouts com base no tamanho da tela em pixels. Se desejar, você pode ter um estilo para grandes telas, uma para tablets e outra para telefones celulares. Usando CSS tem a vantagem adicional de apenas ter que escrever o código uma vez - no arquivo CSS. Cada uma de suas páginas, em seguida, só precisa de uma única linha de código para desenhar seus estilos de CSS.

Toque Recursos interativos de tela

Se você configurou uma página Web para ser uma experiência interativa para os visitantes que usam javascript ou HTML5, é vital que você sabe como seu site vai responder a eventos de toque, não apenas em um navegador móvel, mas em um número crescente de tela de toque desktops também . Na maioria dos casos, você deve considerar a adição de eventos de toque e gestos para o seu código de design. Em JQuery, por exemplo, o equivalente a um clique do mouse em uma tela de toque é um evento de torneira, acionado quando um usuário toques e depois levanta um dedo da tela. Dependendo da sua página, você também pode querer desativar as configurações padrão do navegador móvel, como beliscar para fazer zoom ou arrastar para rolar, usando "preventDefault" eventos.

Teste e Verificação

A melhor maneira de testar o seu novo site móvel é usar seu próprio dispositivo móvel. Examine o layout estilo e página, navegue com toques e gestos, e olhar atentamente para as suas imagens para garantir que eles olhar fresco. Você também pode usar o navegador Web do seu computador para emular um display móvel. No Google Chrome, por exemplo, pressione "F12" para abrir Console do desenvolvedor. Clique no "Configurações" ícone e, em seguida, clique no "Emulação" guia para selecionar um dispositivo como um Google Nexus ou iPad Apple.

Referências

• ligação Unimity Solutions: Compreender a iniciativa Mobile 8 Drupal
• ligação Joomla Extensions: Molde Móvel
• ligação WordPress Plugins: Qualquer Switcher Tema Móvel
• ligação Perecível Press: O 5-Minute CSS Makeover Móvel
• ligação Smashing Magazine: Imagens Responsive Simples com CSS Imagens de Fundo
• ligação Apple Safari Desenvolvedor: Guia de Conteúdo Safari Web
• ligação Chrome Desenvolvedor: Emulação Móvel
• ligação CNN: Mobile Apps ultrapassagem PC Uso da Internet no EUA
• ligação BrightEdge: 2014 Móvel Compartilhar Relatório

Sobre o autor

Um autor publicado e palestrante profissional, David Weedmark aconselhou empresas e governos em tecnologia, mídia e marketing para mais de 20 anos. Ele ensinou ciência da computação na Algonquin College, começou três empresas de sucesso, e tem escrito centenas de artigos para jornais e revistas em todo o Canadá e os Estados Unidos.