25 de janeiro de 2008

Como usar o CSS para desenvolver sites para dispositivos móveis

Foto de um celular
Uma área que promete crescer muito em 2008 é a de desenvolvimento para dispositivos móveis (ou simplesmente, mobiles). Com o aperfeiçoamento dos celulares e smartphones, o acesso a internet por dispositivos móveis é cada vez maior. Sites importantes como o Flickr e o Gmail já ganharam versões para telas pequenas.

Com CSS é possível fazer versões do mesmo site para vários aparelhos. Para monitores temos a media screen, print para impressoras e handheld para dispositivos móveis.

A primeira providencia que você deverá tomar quando começar a desenvolver a versão móvel do site, é adicionar o valor handheld ao atributo media quando for "chamar" o seu CSS para mobiles. Você faz isso como no exemplo:

<link rel="”stylesheet”" type="”text/css”" href="”handheld.css”" media="”handheld”">

Depois disso comece a fazer o CSS.

Quem acessa um site por um celular precisa de um site leve, afinal ele paga por KBytes, e um site mais vertical, porque a tela de um mobile é bem menor do que a de um monitor. Por esses motivos use display:none; para retirar coisas inúteis ao seu visitante como imagens pesadas e banners gigantes (do mesmo jeito que versões para impressão). Também é legal por um menu no topo e no fim da página.

Para testar o css use o Shift + F11 no Opera (não achei nada parecido no Firefox).

Para saber mais:
Sites para dispositivos móveis - media type

Tags:

1 comentários:

Valéria disse...

oi,comenta meu blog?
www.val1kaju.zip.net
brigaduh, =*