As páginas da Web otimizadas para uso em dispositivos móveis diferem daquelas que aparecem em computadores desktop e laptops. As últimas são projetadas 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 os dedos.
- Projetado para telas menores e toques imprecisos com os dedos.
- Projetado para telas grandes com cliques precisos do mouse.
Como 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 com dispositivos móveis e computadores desktop. A abordagem mais comum é usar web design responsivo, que fornece automaticamente a versão adequada com base no dispositivo do usuário e no tamanho da tela, conforme detectado pelo navegador.
De qualquer forma, as páginas da web otimizadas para celular são diferentes das versões para computador de várias maneiras.
Design da página: telas móveis têm menos espaço
- As telas de smartphones e tablets medem de 4 a 10 polegadas na diagonal.
-
Widgets de menu recolhíveis ou expansíveis normalmente substituem barras laterais e menus de cabeçalho volumosos.
- Gráficos de largura total com uso judicial de espaço entre o texto.
- A maioria dos monitores de mesa mede 19 polegadas a 24 polegadas na diagonal.
- 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 as páginas da web para desktop e para dispositivos móveis é o espaço da tela. Enquanto a maioria dos monitores de desktop mede pelo menos 19 polegadas a 24 polegadas na diagonal, os tablets geralmente têm cerca de 10 polegadas. Os smartphones têm cerca de 4 polegadas na diagonal. Simplesmente diminuir o zoom não converte com sucesso 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 pequenos elementos torna-se impossível.
Para corrigir o problema, os designers podem remover barras laterais e gráficos que não são estritamente necessários. Em vez disso, eles usam gráficos menores, aumentam o tamanho das fontes e recolhem o conteúdo em widgets expansíveis. Essa limitação imobiliária levou a um tipo totalmente diferente de pensamento entre os web designers.
Além disso, widgets de menu recolhíveis ou expansíveis normalmente substituem barras laterais e menus de cabeçalho volumosos. Em sua busca para fazer valer cada milímetro de espaço na tela, os designers removem o espaço em branco supérfluo, mantendo um olhar atento sobre a legibilidade.
Uma multidão de links patrocinados e grandes banners 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 em volta de um gráfico não funcionam bem em dispositivos móveis. Em vez disso, os designers geralmente dão a esses gráficos a largura total da tela e executam o texto abaixo ou acima. Da mesma forma, um bom web design 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: Precisão de desktop vs. Blobs móveis
-
Grandes áreas de toque ou pontos de acesso para uma navegação mais precisa.
- URL diferente: adiciona a letra "m." Muitas vezes, uma opção para visualizar a versão para computador de um site.
- As credenciais de login geralmente têm espaço dedicado, às vezes com acessibilidade por impressão digital.
- Links e botões mais precisos baseados em cursor.
Ao contrário de um ponteiro de mouse preciso em sua área de trabalho, o dedo humano é uma bolha, e tocar requer grandes alvos 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.
Páginas da Web compatíveis com dispositivos móveis também costumam incluir a letra m em seus endereços; por exemplo, o endereço móvel do Facebook é m.facebook.com. O URL móvel geralmente é escolhido automaticamente quando você navega com um tablet ou smartphone móvel. Em alguns casos, você verá um link tocável que permite alternar para a versão normal para computador da página.
Os campos de login e senha destinados a desktops e laptops tornam-se 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 dispositivos móveis são projetadas para dispositivos portáteis e são bem diferentes das páginas criadas para leitura em computador. Embora você geralmente possa visualizar a versão para computador de uma página da Web em um dispositivo móvel e vice-versa, eles foram projetados de forma diferente para facilitar a visualização, leitura e navegação do conteúdo.
