As páginas da Web otimizadas para uso em dispositivos móveis são diferentes daquelas que aparecem em desktops e laptops. Os últimos são projetados para telas grandes e cliques precisos do mouse, enquanto as páginas da web para dispositivos móveis são dimensionadas para telas menores e toques imprecisos com o dedo. Móvel
- Projetado para telas menores e toques de dedo imprecisos.
Área de Trabalho
- Projetado para telas grandes com cliques precisos do mouse.
Visto que a maioria das visitas ao site vem de dispositivos móveis, os designers de sites têm a tarefa de fornecer versões que funcionem tanto com dispositivos móveis quanto com computadores desktop. A abordagem mais comum é usar web design responsivo, que entrega automaticamente a versão adequada com base no dispositivo do usuário e no tamanho da tela, conforme detectado pelo navegador. Em qualquer caso, as páginas da web otimizadas para celular são diferentes das versões para desktop de várias maneiras.
Design da página: as telas do celular têm menos espaço
Móvel
- Os ecrãs de smartphones e tablets medem 4 a 10 polegadas na diagonal.
- Os widgets de menu recolhíveis ou expansíveis geralmente substituem as barras laterais e os menus de cabeçalho volumosos.
- Gráficos de largura total com uso judicial de espaço entre o texto.
Área de Trabalho
- A maioria dos monitores de mesa mede 19 a 24 polegadas diagonalmente.
- Links patrocinados e banners grandes são mais comuns.
- Texto mais denso com mais margem de manobra para gráficos.
A diferença mais óbvia entre páginas da web para desktop e móveis é o espaço da tela. Enquanto a maioria dos monitores de desktop medem pelo menos 19 polegadas a 24 polegadas diagonalmente, os tablets geralmente medem cerca de 10 polegadas. Os smartphones têm cerca de 4 polegadas na diagonal. Simplesmente diminuir o zoom não converte uma página da web em uma versão compatível com dispositivos móveis porque torna o texto ilegível e requer uma etapa extra do visitante do site. Além disso, tocar com precisão em elementos minúsculos se torna impossível. Para corrigir o problema, os designers podem remover barras laterais e gráficos que não sejam estritamente necessários. Em vez disso, eles usam gráficos menores, aumentam o tamanho das fontes e reduzem o conteúdo em widgets expansíveis. Essa limitação imobiliária gerou um tipo de pensamento totalmente diferente entre os web designers. Além disso, os widgets de menu recolhíveis ou expansíveis geralmente substituem as barras laterais e os menus de cabeçalho volumosos. Em sua busca para fazer com que cada milímetro do espaço da tela conte, os designers removem os espaços em branco supérfluos, mantendo um olhar cuidadoso na legibilidade. Uma multidão de links patrocinados e grandes anúncios em banner simplesmente não funcionam em um telefone ou tablet pequeno. Em vez disso, pequenos anúncios pop-up são mais comuns em páginas da web para celular. Layouts que apresentam texto enrolado em um gráfico não funcionam bem em dispositivos móveis. Em vez disso, os designers costumam dar a esses gráficos a largura total da tela e executar o texto abaixo ou acima. Da mesma forma, um bom design da web divide o texto em pedaços para facilitar a leitura; ninguém quer ler paredes sólidas de texto. Isso se torna ainda mais importante em telas pequenas. Usar o espaço em branco criteriosamente é crucial.
Controles de página: Desktop Precision vs. Mobile Blobs
Móvel
- Grandes áreas de toque ou pontos de acesso para uma navegação mais precisa.
- URL diferente: adiciona a letra “m”. Freqüentemente, uma opção para visualizar a versão desktop de um site.
- As credenciais de login geralmente têm espaço dedicado, às vezes com acessibilidade por impressão digital.
Área de Trabalho
- Links e botões baseados em cursor mais precisos.
Ao contrário de um ponteiro preciso do mouse em sua área de trabalho, o dedo humano é uma bolha e o toque requer alvos grandes na tela para hiperlinks. Os sites compatíveis com dispositivos móveis oferecem grandes áreas de toque (ou pontos de acesso) para facilitar a navegação precisa. As páginas da web otimizadas para celular também costumam incluir a carta m em seus endereços; por exemplo, o endereço móvel do Facebook é m.facebook.com. O URL móvel geralmente é escolhido para você automaticamente quando você navega com um tablet móvel ou smartphone. Em alguns casos, você verá um link tocável que permite alternar para a versão normal da página para desktop. Os campos de login e senha destinados a desktops e laptops se tornam minúsculos e inutilizáveis em um telefone, então os editores da web os tornam maiores, às vezes dando a eles suas próprias páginas para facilitar o uso. Fazer login com uma impressão digital ou outra conta, como Google ou Facebook, está se tornando cada vez mais comum à medida que os recursos do dispositivo e do serviço evoluem.
Por que isso Importa?
As páginas da web para celular são projetadas para dispositivos portáteis e são bastante diferentes das páginas feitas para leitura em desktop. Embora geralmente você possa visualizar a versão para desktop de uma página da web em um dispositivo móvel e vice-versa, eles são projetados de forma diferente para tornar o conteúdo mais fácil de visualizar, ler e navegar.
