Depois do iPhone, explodiu o número de usuários usando a rede móvel para se conectar a internet pelo celular. Mesmo com o [ligeiro] aumento das telas e no número de celulares e as smartphones com rede Wi-Fi e 3G, ainda é preciso tomar alguns cuidados quando vai se projetar um site para a internet móvel… Confira 10 dicas de como planejar o seu site para a internet móvel!!

1. Acesse o seu site pelo smartphone

Antes de começar a arrumar o seu site para dispositivos móveis, acesse o seu site por um smartphone. Os mais modernos, como o iPhone,  possuem navegadores que permitem ver o site da mesma maneira que ele é vista em um monitor comum, porém todo espremido. Analise o que você mudaria e como você gostaria que ele aparecesse no celular. Vale a pena dar uma olhada nos sites móveis do UOL, do G1 e de outros portais para você pegar a idéia da coisa.

2. Seja objetivo

Nada de firulas e badulaques espalhados pela tela. Na internet móvel você deve ser objetivo, principalmente nos textos. Mostre apenas o essencial na página principal!

Você pode observar a tela do Digg, que mostra apenas 10 manchetes na home.

3. Cuidado com a navegação

Preste atenção na navegação de seu site, ela deve conter apenas o extremamente necessário para o usuário móvel. Não adianta por links para seções que ele não conseguirá visualizar. Se você voltar ao print do Digg do tópico anterior, verá que a barra de navegação possui poucos links.

Botões de página da Web devem ser grandes, e espaçados razoavelmente distantes. Navegadores móveis permitem que o usuário “feche” o zoom para elementos de página dupla para bater neles, mas se os botões são ainda menores do dedo da pessoa média depois de terem sido ampliados, ainda há uma chance de que o botão ao lado vai ficar ativado.

4. Mostre que você é móvel

Deixe claro para o seu visitante que você é móvel. Você deve colocar um link para a versão móvel em todas as páginas do seu site da versão normal. O mais comum é no rodapé.

Utilize links curtos [, afinal ninguém merece digitar um endereço enorme naquela telinha] para ir para a versão portátil e de preferência para o uso do mesmo domínio, utilizando sub-domínios como m.exemplo.com, mobile.exemplo.com ou exemplo.com/mobile e exemplo.com/m

5. Economize nas imagens

Sim, o iPhone pode dar zoom em imagens, mas quanto menores elas foram, tanto em dimensões e tempo de download, mais felizes seus clientes wireless será. Sites web são funcionais e devem carregar rapidamente. Evite imagens grandes e no topo em todo o site, pois elas deixaram a página lenta.

6. Não estabeleça um tamanho para a tela

O mercado de celulares possui uma grande variedade de tamanho de telas. Se você definir algo como 200px de largura, em um dispositivo móvel isto pode ser a metade da tela e em outro poderia ser duas vezes a largura. Quando for configurar o seu layout, prefira valores em porcentagem e não em pixels.

7. Valorize o branco

Espaço em branco é uma parte importante de qualquer projeto, e é algo que normalmente é um desafio em Web design, pois há um desejo de conseguir o máximo possível na frente do visitante. O espaço em branco se torna ainda mais necessário no projeto de móveis porque o tamanho da tela é muito menor.

8. Não abuse dos recursos

Por maiores avanços que aconteceram, a maioria dos celulares ainda não trabalha com Flash, Cookies, Frames e Tabelas. Dê atenção também para as fontes, pois elas podem não estar disponíveis em todos os celulares.

9. Produza conteúdo específico

O seu site será valorizado se você produzir conteúdo específico para celulares, como por exemplo, downloads de papéis de parede exclusivos.

10. Detectando celulares

O site About.com possui um tutorial em que ensina a arrumar o código para que ele detecte se o usuário esta acessando o site pelo celular. Vale a pena dar uma lida clicando aqui.

Quem usa Wordpress tem um benefício: os plugins. No Wordpress Love existe uma lista com estes plugins

Referências

http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/

http://mashable.com/2009/11/26/mobile-web-design/

http://www.yourhtmlsource.com/accessibility/mobile.html#designingformobile

http://webdesign.about.com/od/mobile/a/write-web-pages-for-the-iphone.htm