1º) Mitos/dogmas x Verdades
Quando se fala em desenvolvimento para mobile, as pessoas tendem a reagir de dois modos extremos: acreditam que é complexo demais, pois é completamente diferente da web “convencional”; ou acreditam ser muito simples, por ser uma versão minimalista do site utilizando apenas uma folha de estilos para este tipo de dispositivo. Eu me enquadrava no segundo perfil.

A verdade é que as diretrizes para desenvolvimento mobile compreendem um conjunto amplo de práticas que não se encontram em nenhum dos extremos, mas sim no meio termo.

O objetivo de um site para dispositivos móveis é oferecer informações diretas e sucintas e/ou prover tarefas específicas, geralmente as mais usuais do site/aplicação convencional. Unindo à isso as limitações físicas do aparelho (telas reduzidas, número de cores, utilização totalmente dependente do teclado) e o contexto do usuário (uso em movimento, imediatismo na entrega das informações e acesso fácil), temos a prova de que a interface de websites para mobile não deve ser uma reprodução miniaturizada do site original, como afirma Cybis et.al. (2007), apenas reduzindo cores e tamanhos de fontes, pois os modelos de interação são completamente diferentes. Como veremos abaixo, nem mesmo o HTML deve ser o mesmo. Portanto mediatype=”handheld” não é suficiente para fazer um site acessível via dispositivos móveis.

2º) As regras de ouro

CSS e Apresentação

Utilize porcentagens e medidas relativas como em, ex, bolder, larger e thick.

A utilização de tabelas para o layout é considerada uma prática ruim, principalmente para dispositivos móveis. O layout das páginas é efetuado de modo mais eficiente utilizando CSS e o layout resultante é mais fácil de linearizar e renderizar em um contexto reduzido, como as telas dos dispositivos móveis. Além disso, o uso de tabelas quebra a distinção entre a estrutura sendo representada separadamente do layout.

Não utilize marcação inline como, por exemplo <b>texto</b>, para modificar a apresentação de sua página. O uso de CSS auxilia na consistência de estilo e a centralização ajuda a reduzir o peso da página.

Minimização de custo

O tamanho das páginas (incluindo imagens e folhas de estilo), em kilobytes, deve ser pequeno uma vez que páginas páginas “grandes” demoram para carregar e, em algumas operadoras, aumentam os custos do acesso.

Não utilize marcações para redirecionar páginas, pois isto incorre no custo de carregamento e processamento da página. Ao invés disso, configure o servidor para realizar redirecionamentos utilizando os códigos HTTP 3xx.

Observe que os redirecionamentos devem ser evitados para todos os custos pois cada um aumenta tanto tempo quando custo de visualização da página final.

O uso de informações em cache pode reduzir a necessidade de carregar novamente recursos como imagens e folhas de estilos, reduzindo também tempo e custo de download. Cache é particularmente importante para dispositivos móveis devido à alta latência tipicamente apresentada nas redes móveis.

Usabilidade e Acessibilidade

Uma boa prática a ser utilizada, exceto para pequenos documentos, é indicar a estrutura do mesmo através de tags de título e subtítulos. Utilizar marcação estrutural, no lugar de efeitos de formatação permite uma adaptação fácil do conteúdo onde ele precisa ser dividido em muitas páginas, bem como potenciamente facilitar o acesso a seções do documento nas quais o usuário está interessado. Nos lugares onde as tags de cabeçalho (título e subtítulos) são utilizadas, elas devem ser aplicadas de acordo com a especificação, ou seja, aninhadas corretamente de acordo com o nível de cada uma.

A menos que você saiba que o dispositivo é capaz de submeter um formulário sem um botão de submit (ex.: utilizando javascript), deve ser garantido que cada formulário presente no site tenha um botão de submit. Caso contrário, os usuários poderão não utilizar seu site corretamente.

Valores padrões pré-selecionados para campos de formulários devem ser providos sempre que possível, pois isto reduz a quantidade de entrada de dados que o usuário deve fazer. Dadas as limitações dos dispositivos móveis, a interface interface deve minimizar ao máximo as entradas de dados do usuário. Quando possível, utilize listas de seleção, radio buttons e outros controles que não requerem digitação.

O título da página deve ser curto e descritivo para permitir uma fácil identificação, mas tenha em mente que ele pode ser truncado quando visualizado nos dispositivos móveis. Muitos dispositivos usam o título da página como um rótulo padrão para os bookmarks, então o título deve ajudar a identificar o conteúdo.

Não tente abrir janelas pop-up, pois muitos dispositivos móveis não têm suporte a este recurso. Mesmo quando eles são suportados, mudar a janela atual sem informar o usuário pode causar confusão.

Muitos dispositivos móveis não suportam elementos embutidos (ex.: flash) ou scripts e, em muitos casos, o usuário não tem condições de baixar um plug-in para dar suporte a estes recursos. Por isso, o conteúdo deve ser projetado com isto em mente. Mesmo quando o dispositivo suporta scripts, não os utiliza a menos que não haja outra forma de atingir seus objetivos. Scripts aumentam o consumo de energia e diminuem a vida útil da bateria.

Renderização

Evite medidas absolutas e em pixels, permitindo que os navegadores ajustem o conteúdo à tela. Uma exceção à regra é quando uma imagem foi dimensionada especificamente para um formato de tela. Neste caso, as referência da imagem na marcação podem especificar as dimensões exatas da imagem em pixels para ajudar o navegador a continuar o carregamento da página e evitar o recarregamento depois da página ter sido exibida por completo. Os dispositivos podem perceber melhor as intenções do desenvolvedor se as margens, bordas e espaçamentos forem especificados em pixels.