Provavelmente, você já viu como o iPhone pode virar e expandir páginas da web. Ele pode mostrar a você toda a página da web em um piscar de olhos ou aumentar o zoom para tornar o texto que você está interessado em legível. Em certo sentido, desde o iPhone usa Safari, os web designers não precisam fazer nada de especial para criar uma página da web que funcione no iPhone. Mas você realmente quer que sua página apenas funcione - ou se destaque e brilhe?
Quando você construir uma página da web, você precisa pensar em quem vai ver e como eles vão ver. Alguns dos melhores sites levam em consideração o tipo de dispositivo em que a página está sendo exibida, incluindo a resolução, opções de cores e funções disponíveis. Eles não dependem apenas do dispositivo para descobrir.
Diretrizes gerais para construir um site para dispositivos móveis
- Teste em quantos dispositivos você puder. A primeira coisa que você deve fazer é visualizar seu site em um iPhone e em tantos dispositivos móveis ou emuladores como você pode. Embora você possa usar emuladores para todos os seus testes, eles realmente não dão a mesma sensação de tentar navegar por um site na tela minúscula. Você deve testar em dispositivos reais tanto quanto possível.
- Faça suas páginas degradarem normalmente. Você pode escrever suas páginas para Habilitado para Flash, navegadores widescreen, mas certifique-se de que as informações críticas estejam visíveis mesmo em um monitor minúsculo que não pode lidar com nenhum recurso especial (como cookies, Ajax, Flash, JavaScript, etc.). Qualquer coisa além do XHTML Basic estará além de alguns telefones celulares. Embora a maioria dos smartphones possa lidar com tudo isso, outros dispositivos móveis não podem.
- Crie uma página específica para redes sem fio - e facilite sua localização. Se você vai construir uma página específica para o seu telefone celular e clientes sem fio - disponibilize-a. Uma ótima maneira é colocar o link para a página sem fio bem no topo do seu documento e, em seguida, ocultar esse link de dispositivos não portáteis usando o tipo de mídia portátil. Afinal, a maioria das pessoas acessa sua página inicial, mesmo em telefones celulares - e se o link para sua página sem fio não estiver lá, eles irão embora se a página for muito difícil de usar.
Layout de página da web para smartphones
A primeira coisa que você deve lembrar ao escrever páginas para o mercado de smartphones é que você não precisa fazer nenhuma alteração se não quiser. A grande vantagem da maioria dos smartphones disponíveis é que eles usam navegadores Webkit (Safari no iOS e Chrome no Android) para exibir páginas da web, então, se sua página parece boa no Safari ou Chrome, ela ficará bem na maioria dos smartphones (apenas muitos menor). Mas existem coisas que você pode fazer para tornar a experiência de navegação mais agradável:
- Lembre-se de que a tela é minúscula. Os smartphones condensam todas essas colunas em uma janela minúscula e isso pode dificultar a leitura sem aplicar zoom. A maioria dos usuários está acostumada com o zoom, mas pode ser cansativo. Uma longa coluna de texto é mais fácil de ler.
- Divida as páginas em pedaços menores. Pode ser difícil ler longos segmentos de texto em um telefone celular, portanto, colocá-los em várias páginas facilita a leitura.
Links e navegação em iPhones
- Quanto mais curtos forem os URLs, melhor. Se você já tentou digitar um URL em um telefone celular, saberá que é uma dor (exceto, talvez, para adolescentes que estão acostumados a enviar muitas mensagens de texto). Mesmo no iPhone, é tedioso digitar URLs longos. Mantenha-os curtos.
- Mas o texto do link longo é mais fácil de tocar. Quando em uma página onde várias palavras separadas estão vinculadas a diferentes artigos, todas próximas umas das outras, pode ser muito difícil tocar na correta sem aplicar zoom. Muitas pessoas simplesmente desistem e vão para outro lugar. Links com 3 a 5 palavras são mais fáceis de clicar no telefone do que links de 1 palavra.
- Não coloque sua navegação no topo da tela. Não há nada mais irritante do que ter que folhear telas e telas de links para encontrar as informações que deseja. Se você já olhou as páginas da web que foram projetadas para telefones celulares, verá que as primeiras coisas que aparecem são o conteúdo e o título. Então, abaixo disso está a navegação.
- Não tenha medo de ocultar sua navegação.Escondendo links de navegação com CSS ou JavaScript e fazê-los aparecer apenas quando o usuário solicitar é uma forma de tornar a página mais fácil para usuários de smartphones.
Dicas para imagens em smartphones
- As imagens devem ser pequenas. Sim, Android e iPhones podem aumentar e diminuir o zoom em imagens, mas quanto menores eles forem, em ambas as dimensões e tempo de download, mais felizes seus clientes wireless ficarão. Otimizando imagens é sempre uma boa ideia, mas para páginas de telefone celular, é fundamental.
- As imagens devem ser baixadas rapidamente. As imagens ocupam muito espaço nas páginas da web quando você as visualiza em um dispositivo móvel. E embora muitas vezes sejam muito agradáveis e façam as páginas parecerem melhor quando visualizadas em um navegador de tela inteira, eles geralmente atrapalham em um dispositivo móvel. Além disso, quando um usuário de smartphone está na rede de celular, a última coisa que ele quer pagar é baixar um monte de imagens enormes ou ícones de navegação.
- Não coloque imagens grandes no topo da página. Assim como com a navegação, pode ser muito enfadonho esperar que uma imagem que ocupa de 3 a 4 telas cheias para carregar no topo da página. E isso é extremamente comum em páginas da web. A única exceção a isso é se o leitor sabe que obterá uma imagem ao clicar, digamos em uma galeria de fotos.
O que evitar ao projetar para celular
Há várias coisas que você deve evitar ao criar uma página compatível com dispositivos móveis. Conforme mencionado acima, se você realmente deseja tê-los em sua página, pode, mas certifique-se de que o site funcione sem eles.
- Instantâneo: A maioria dos telefones celulares não oferece suporte a Flash, portanto, não é uma boa ideia incluí-lo em suas páginas sem fio.
- Biscoitos: Muitos telefones celulares não têm suporte para cookies. iPhones têm suporte de cookies.
- Molduras: Mesmo que o navegador os suporte, pense nas dimensões da tela. Os frames simplesmente não funcionam em dispositivos móveis - são muito difíceis ou impossíveis de ler.
- Mesas: Não use tabelas para layout em uma página móvel. E tente evitar tabelas em geral. Eles não são compatíveis com todos os celulares (embora iPhones e outros smartphones os suportem) e você pode acabar com resultados estranhos.
- Tabelas aninhadas: Se você deve usar uma tabela, certifique-se de não aninhá-la em outra tabela. Eles são difíceis de serem suportados pelos navegadores de desktop e, na melhor das hipóteses, tornam o carregamento da página mais lento.
- Medidas absolutas: Em outras palavras, não defina as dimensões dos objetos em tamanhos absolutos (como pixels, milímetros ou polegadas). Se você definir algo como 100 px de largura, em um dispositivo móvel pode ter metade da tela e em outro pode ter duas vezes a largura. Tamanhos relativos (como ems e porcentagens) funcionam melhor.
- Fontes: Não presuma que qualquer um dos fontes que você está acostumado a ter acesso estará disponível nos celulares.