Layout para Dispositivos Móveis

Introdução

A web tem mudado muito nos últimos anos. Antigamente, a resolução mais indicada para desenvolvimento de sites era 800x600. Muitos sites optavam por um layout de largura fixa de aproximadamente 780px e deixavam margens desocupadas nas laterais. Com o tempo, a resolução dos computadores pessoais e notebooks foi aumentando, passou para 1024x768. Recentemente, é comum utilizar uma resolução acima de 1024x768.

Por outro lado, um outro mercado tem cada vez mais se conectado à web: o mercado de dispositivos móveis de pequeno porte. Este mercado inclui celulares, smartphones, ipads, tablets, etc. Alguns destes dispositivos tem uma resolução compatível com um notebook (por exemplo, os tablets), mas outros tem resoluções muito pequenas. Neste cenário, o desenvolvimento web precisa de uma outra atenção para atender a um público ainda maior.

---

Soluções

Existem diferentes abordagens para atacar este desafio. Uma delas, é desenvolver duas versões do mesmo site/sistema (uma convencional e outra para dispositivos móveis). Outra é desenvolver uma única versão, mas que se adapta a cada tipo de dispositivo.

Na primeira abordagem, normalmente são oferecidos endereços distintos para cada versão do site/sistema. Por exemplo, para acessar o facebook com layout adaptado para dispositivos de pequeno porte, basta usar o endereço http://m.facebook.com/ (a letra "m" indica "mobile"). Nesta versão do sistema, muitos elementos são readaptados e alguns recursos são simplesmente retirados. Tudo depende do que é esperado pelo dono do site/sistema. Se ele pretende que todos os recursos estejam disponíveis, os desenvolvedores gastarão algum esforço para adaptá-los.

Na segunda abordagem, são criadas diferentes folhas de estilos para os diferentes tipos de mídia. Isso é previsto na especificação do CSS, na seção sobre Media Types. Um dos tipos de mídia previstos é o "handheld", ou "dispositivo de mão". O funcionamento é simples: o site especifica várias folhas de estilo (cada uma para um tipo de mídia) e, quando um usuário acessa o site, o dispositivo opta por utilizar uma delas. Note que o dispositivo é que se classifica como dispositivo móvel ou não.

Uma forma de especificar diferentes folhas de estilo para cada tipo de mídia é separar cada tipo de mídia em um arquivo CSS e incluí-lo no header do documento da seguinte forma:

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

Outra forma de fazer isso é separando os tipos de mídia dentro de um arquivo CSS. Neste caso, a inclusão do arquivo no header do documento não precisaria especificar o tipo de mídia, mas no arquivo CSS seriam definidas várias seções:

@media screen {
/* Aqui ficam as especificações para mídia "screen" */
}

@media handheld {
/* Aqui ficam as especificações para mídia "handheld" */
}

---

Dicas para Estilos Handheld

Não adianta muito saber como usar um layout diferente para dispositivos móveis se não souber como criá-lo adequadamente. Para criar um layout para este dispositivo, você deve ter em mente que a largura e a altura da tela do dispositivo será muito pequena (por exemplo: 240x320). Depois, você deve estar ciente de que os mecanismo de ":hover" (do CSS) ou onmousehover (do JavaScript) podem não funcionar em alguns dispositivos, já que não possuem mouse.

Uma dica imprescindível para elaboração de uma folha de estilos para dispositivos móveis é utilizar web standards (e tableless). Com isso é possível posicionar o menu principal à esquerda do conteúdo numa tela convencional, mas posicioná-lo acima ou abaixo do conteúdo numa tela pequena. Para isso, basta utilizar "display: block" sem flutuação nos elementos que você pretende ocupar toda a largura (que não é muita) do dispositivo pequeno.

Além disso, alguns elemenos podem ser omitidos em um dispositivo móvel através do "display: none". Por exemplo, imagens desnecessárias.

Em geral, deve-se optar por um layout menos carregado e bem simplista.

---

Considerações

Note que, apesar de existir uma forma de especificar um estilo para mídias de pequeno porte, alguns aparelhos mais modernos optam por utilizar a mídia "screen" e oferece recursos de zoom para garantir a acessibilidade. Isso porque normalmente o site fica mais "bonito" como é visto em dispositivos maiores e serve como um "diferencial" competitivo. Ou seja, o dispositivo assume a responsabilidade de deixar a acessibilidade compatível com o tipo de mídia "screen".

Além disso, algumas funcionalidades (especialmente em sistemas Web) não são viáveis de serem executadas em dispositivos móveis da mesma forma. Neste caso, é possível mesclar as duas abordagens de solução: definir dois links diferentes (uma para screen e outra para handheld), mas mostrar ou omitir estes links de acordo com o tipo de mídia. Ou seja, quem acessa via dispositivo grande vê apenas o link para dispositivo grande e quem acessa via dispositivo pequeno, vê apenas o link para dispositivo pequeno.