Ajustar um site para o ambiente mobile é um grande desafio. Muitas das técnicas que você está acostumado a usar em web design não fazem o maior sentido em mobile, e vice-versa.

A área móvel é um ótimo lugar para tentar coisas novas e limites diferentes. As pessoas que usam a web mobile não tem tanta paciência quanto as que usam o computador - as telas dos celulares são muito menores e a conexão móvel, geralmente 3G, não é muito rápida.

Ajustes de Design

Navegação

O menu onipresente não pode ser aplicado na maioria dos casos devido ao tamanho da tela. O menu provavelmente vai ficar na vertical e pode se tornar inconveniente se cada vez que a pessoa quiser ver um conteúdo ela precisar fazer scroll para baixo até encontrá-lo. Então, use o menu apenas se o site tiver três links ou menos, pois assim ele pode ficar na horizontal. A solução é colocar a navegação na primeira página e nas outras usar um link na parte de cima para voltar para a página inicial, ou usar breadcrumbs.

Conteúdo

O conteúdo deve ser sua máxima prioridade. A tela é bastante pequena, então faça um design clean, com poucas imagens e muito espaço branco. A conexão móvel ainda não é tão rápida para carregar imagens, alem de elas desviarem o foco do conteúdo.

Links

Como no mundo mobile tudo é menor, com links não é diferente. Você precisa fazer com que eles fiquem mais fáceis de clicar. Isso pode ser feito usando espaços maiores ao seu redor ou fontes maiores. Quando o link é selecionado, ao invés de apenas sublinha-lo ou mudar sua cor, troque a cor do background, mesmo se o link estiver no meio de um parágrafo. É muito melhor para o usuário poder ver onde ele clicou..

Various Screen Sizes

Cada telefone tem um tamanho diferente de tela, e o iPhone tem ainda duas posições: vertical e horizontal. Com isso seu site não pode ter uma largura fixa. É muito mais fácil usar percentual e EMS. Esse método vai fazer com que seu site se adapte a vários tamanhos de tela. Você pode também limitar o zoom da interface e do tamanho da tela usando META properties para mobile.

Cross Platforms

Não espere que seu site móvel fique igual em todos os mobile browsers; existem vários disponíveis. Existem alguns elementos HTML e propriedades CSS que alguns browsers mobile não suportam, ou pelo menos que não funcionam como deveriam. O que mais você precisa se preocupar é que seu site funcione bem no iPhone e no android, com eles você não tera muito mais trabalho do que já tem com seus desktop browsers. Tudo que você precisa é adaptar o site como disse antes. Confira alguns sites legais e bem feitos no Mobify, um lugar onde você pode construir seu mobile site. Alguns designs não são tão legais, mas vale a pena pelos códigos. Alguns blogs usam designs bem legais com ele, outros nem tanto. Eu tentei fazer um mas acabei fazendo tudo por mim.

Ótimos Exemplos

Segue uma seleção de bons exemplos de mobile designs. Você encontra esses e muitos outros exemplos de mobile websites em, Mobile Awesomeness.

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Mobile Web Design

Outras Fontes

Learn How To Develop For The iPhone - It shows you how to build an alternate page and style sheet for the iPhone and iTouch.

Give Your Website a Custom iPhone Bookmark Icon - This tutorial teaches you how to get your own custom icon to appear when someone bookmarks your website on their iPhone home screen.

Create a Slick iPhone/Mobile Interface from any RSS Feed - This article is about creating a web page that is formatted for the iPhone that will dynamically fill itself with content from a RSS feed.

iPhone Apps Design Mistakes: Over-Blown Visuals - The development of iPhone applications has recently become a hot topic. However, many of these applications are poorly designed and just don ´t become useful as it could be.

MobiSiteGalore - A free site to build your mobile site Create a Unit Converter Application for Flash Lite Enabled Devices- Flash Lite is an implementation of the Flash runtime for mobile phones, consumer electronic devices, and Internet-connected digital home devices.

Developing with Flash Lite - Mark Doherty over at FlashMobileBlog has teamed up with Dale Rankine to produce a video tutorial series: "Developing with Flash Lite" on their Adobe Flash Lite Vimeo channel.

Doctype: jQTouch and Mobile Design - In this week’s 7 minute episode of Doctype Jim covers jQTouch, a plugin for jQuery that enables quick iPhone websites, and Nick talks about how to design for the small screen.

About the author of this post