Embora o número de sites sem otimização para celular esteja diminuindo, ainda existem alguns que são projetados apenas para desktop. Infelizmente, o serviço da web ‘mobilizador’ anterior do Google foi descontinuado. O sucessor espiritual do serviço é o Google Weblight, projetado em torno da otimização para conexões lentas, em vez de revisar sites para visualização em dispositivos móveis. Além do serviço do Google, há uma série de práticas e ferramentas que devem ser consideradas ao desenvolver um site com dispositivos móveis em mente.
Passos
Parte 1 de 2: Experimentando com o Google Weblight
Etapa 1. Analise como o Weblight funciona
Weblight é um algoritmo criado pelo Google para fornecer aos usuários carregamentos de página mais rápidos e leves quando em más condições de rede. Isso significa que o Weblight não tem interface de usuário e opera no backend. As páginas são despojadas de seus elementos mais complexos, fornecendo uma experiência simplificada e leve, em vez de uma explicitamente otimizada para a plataforma móvel.
Etapa 2. Teste as alterações do site com o Weblight
Em seu dispositivo móvel, basta anexar o URL completo do site ao final do endereço do weblight (por exemplo, se o seu site for "mywebsite.com", digite https://googleweblight.com/?lite_url=https://mywebsite.com) A página carregará uma versão simplificada, mas funcional de si mesma. Com os elementos removidos, alguns sites podem parecer muito melhores nas telas dos dispositivos móveis.
Etapa 3. Reconheça as limitações
Lembre-se de que esta não é uma ferramenta de conversão explícita projetada para interação do usuário. Embora a entrada manual no site possa ser usada em uma pitada, o Weblight foi projetado para velocidade, não usabilidade.
Parte 2 de 2: Projetando para compatibilidade móvel
Etapa 1. Lembre-se das limitações do dispositivo móvel
Os dispositivos móveis compartilham alguns aspectos que os diferenciam de suas contrapartes de desktop. Esses recursos principais devem ser as principais considerações ao criar um site para consumo móvel.
- Telas pequenas e verticalidade: embora as resoluções de tela em dispositivos móveis estejam constantemente melhorando, o tamanho e o formato continuam sendo uma preocupação para o design do site. Projetar um site em um layout de coluna única é melhor para telefones (os tablets costumam usar sites de desktop sem muitos problemas).
- Interfaces de toque: os elementos da página devem ser colocados com o tamanho de um dedo em mente. Os elementos que utilizam o mouseover devem ser minimizados ou reprojetados para o toque (por exemplo, menus suspensos).
- Velocidades de dados: uma das grandes vantagens dos dispositivos móveis é o uso fora do alcance do wi-fi, mas as conexões de dados costumam ser mais lentas e menos confiáveis. As interfaces do usuário (IU) devem permanecer simples e o conteúdo deve ser visível e acessível. Muita desordem prejudicará o tempo de carregamento e dificultará a navegação.
Etapa 2. Use um serviço de Sistema de Gerenciamento de Conteúdo (CMS)
Para aqueles que desenvolvem com menos recursos, usar um serviço CMS como Wordpress ou Squarespace é uma ótima opção para design móvel de baixo custo e fácil de usar. Temas que utilizam web design responsivo fornecerão o modelo mais fácil para um site móvel.
Web design responsivo é uma teoria de web design que promove o uso de elementos de design fluidos para permitir transições suaves de design e usabilidade entre plataformas
Etapa 3. Testar telas de dispositivos móveis usando software de desktop
Existem vários aplicativos da web gratuitos que permitem emular dispositivos móveis para testar a estética e a funcionalidade do site. Usar essas ferramentas é tão fácil quanto selecionar o dispositivo de teste desejado e, em seguida, acessar o site de destino para visualização. A maioria incluirá ferramentas para variáveis como orientação da tela, densidade de pixels ou até mesmo seleção de navegador. Alguns exemplos populares são:
- Emulador de modo de dispositivo Chrome
- mobilephoneemulator.com
- screenfly (um subconjunto de quirktools)
- mobiletest.me (assinatura paga)
