Estratégias XHTML para dispositivos móveis

Autor: Openwave
URL do original: https://developer.openwave.com/.../index.htm
Título original: Best Practices in XHTML Design
Traduzido com autorização expressa do autor

Se você optou por iniciar uma carreira como designer ou desenvolvedor para dispositivos móveis usando XHTML, você fez uma boa escolha. Você provavelmente conhece as ferramentas os truques e a maneira de projetar com XHTML. Contudo gostaríamos de fazer um alerta: projetar para dispositivos móveis é diferente de projetar para dispositivos com telas grandes. As diferenças incluem:

• A digitação de textos é dífícil . O teclado DTMF e os mecanismos do tipo ponteiro para entrada de textos dos dispositivos móveis são bem mais simples e difíceis de operar do que os teclados de mesa tipo QWERTY. Sempre que possível, evite fazer com que os usuários tenham que digitar textos.
• A transferência de dados tem seu custo. Usuários de dispositivos móveis pagam o acesso, quer seja por minuto ou por kilobyte. Não desperdice o dinheiro dos usuários.
• As telas são pequenas . 120 pixels de largura é muitíssimo menor do que 800 ou 1024 a que você está acostumado a usar.
• As velocidades de processamento e de transferência são lentas. Mesmo os disposivos móveis de ponta com suas velocidades altas são lentos quando comparados com computadores de alta velocidade - e até mesmo - quando comparados com computadores em conexões discadas.
• Os usuários estão em condição móvel. Assim, eles (usuários) tem necessidades, tarefas e limitações diferentes dos usuários usando um computador. O seu (dos usuários) objetivo primário é o de encontrar uma determinada informação e não de navegar na web.
• Para a maioria dos dispositivos não existe "upgrade". Você deve respeitar as limitações existentes quando são lançados no mercado.
• Cada "teclada" compromete a usabilidade. Usuários de dispositivos móveis terão que rolar uma página muito mais vezes do que se estivessem visualizando a página em um computador. Reduza o tamanho da janela do seu browser e comece a rolar a página para você ter uma idéia como aumenta o número de rolagens. Cada vez que você aciona a tecla tab para rolagem, equivale a um toque na tecla seta para baixo no telefone, seu site é muito mais difícil de navegar.

Estratégias de projeto

A seguir algumas estratégias globais para criar um XHTML fácil de ser interpretado por dispositivos móveis.

1. Conheça os dipositivos alvo do seu site. Dispositivos e browsers são muito diferentes:
   • Dispositivos da Openwave oferecem suporte para XHTML perfil móvel e extensões WML. Nokia oferece suporte somente para XHTML perfil móvel. Access e AU Systems suporta somente XHTML Básico, que é um subconjunto do XHTML perfil móvel. Ambos usam XHTML Básico, ou através de detecção do tipo de browser servem o conteúdo apropriado. (XHTML perfil móvel é XHTML Básico acrescido dos elementos style, hr, b, i, big, e small)
   • Alguns dispositivos renderizam o título do documento e outros não. A maioria deles contudo utiliza o título como rótulo para bookmarks (favoritos).
   • O conhecimento do tipo de browser utilizado não oferece informações suficientes para você saber como será renderizado o documento. Samsung, por exemplo, usa o browser da AU System, mas internamente possui sua engine própria.
   • Alguns dispositivos (Openwave, Access) honram a diretiva nowrap, outros (Nokia, AU Systems) só as reconhece em determinadas circunstâncias.
   • Existem outras diferenças na renderização.
2. Conheça os gateways para seus dispositivos alvo. Os gateways, fornecidos pelas prestadoras do serviço móvel, podem afetar a maneira como são renderizados os conteúdos. Eles (gateways) devem aceitar somente XHTML Básico válidos, interpretar gráficos, e processar outras coisas. Ou, até mesmo podem (os gateways) nem existir. Verifique isto com a prestadora do serviço móvel do seu dispositivo alvo.
3. Pense vertical, não horizontal. A maioria dos dispositivos móveis tem um layout vertical e os usuários tem que rolar a tela verticalmente para acessar os conteúdos. Esqueça qualquer conceito que você tenha sobre usuários visualizando primeiro o meio da tela: eles verão primeiro o topo da tela em dispositivos móveis. Assim, evite barras e tabs de navegação, bem como posicionamentos lado a lado. Projete de cima para baixo.
4. Use listas e não tabelas. Inúmeros são os problemas com tabelas:
   • Para renderizar uma tabela, um dispositivo móvel tem que processar cálculos com pontos flutuantes que tornam lenta a renderização da tabela.
   • Diferentes dispositivos renderizam tabelas de maneira diferente; no minímo alguns browsers renderizam tabelas com a mesma largura para as colunas; independentemente do que você tenha projetado.
   • Diferentes dispositivos comportam-se de modo diferente para os mecanismos de navegação; os usuários terão que percorrer as células de uma linha completa antes de poder passar para a próxima com rolagem vertical.
   • Tabelas com largura maior que a largura da tela são renderizadas de maneira inconsistente.
   As listas permitem projetar verticamente como prescrito anteriormente. Exceção: Dados tabulares devem ser apresentados em tabelas. Um calendário do mês é um excelente exemplo de dado tabular que deve ser apresentado com uso de uma tabela. Dicas para uso de listas:
   • Use listas ordenadas (ol) para as listas que necessitam de uma referência numérica para acesso e onde não seja necessário controle sobre o formato dos números. (não esqueça as teclas de atalho).
   • Use listas de definição (dl) para as listas que necessitam de uma referência numérica onde seja necessário controlar o formato dos números (ou seja necessário um item 0). Você precisa renderizar o número bem como definir uma tecla de atalho.
   • Use listas de definição (dl) para situações onde haja necessidade de sub-seções. Os itens dt serão alinhados à esquerda; os itens dd serão indentados. Não há necessidade de definir um item dd para cada item dt.
   • Use ul ou dl para as demais listas. ul é renderizada com bullets e dl sem bullets.
5. Faça uso de toda marcação suportada. Embora muitos dispositivos não suportem determinadas extensões do XHTML Básico, suas características podem incrementar a usabibilidade. Por exemplo, Nokia e alguns dos dispositivos da Openwave suportam a biblioteca WTAI, permitindo que chamadas telefônicas possam ser feitas diretamente de sua página. Alguns browsers suportam extensões CSS como -wap-format-input, possibilitando restrições para entrada de dados em um campo. Openwave suporta as tags do WML incrementando a navegação. Estes tipos de extensão podem incrementar a usabilidade.
6. Pense pequeno. Dispositivos móveis tem telas pequenas, processsadores pequenos, pouca memória e mecanismos de entrada restritos. Mantenha suas páginas pequena, entradas de textos reduzidas, uso mínimo de tabelas e de CSS, elimine os comentários, etc. Dicas:
   • Não use grandes arquivos CSS. Isto pode causar em uma confusão visual, reduzindo a legibilidade. Também exigem grande tempo para download, resultando em uma re-renderização na tela depois que o usuário já estiver começado sua leitura. Defina no máximo regras CSS para 4 elementos.
   • Não use gráficos (imagens) grandes. Elas precisam de um tempo longo para download e devem ser usadas somente quando o assunto principal na página for gráfico.
   • Não use gráficos (imagens) para layout. Imagens do tipo "spacer" e outras imagens para layout tomam tempo de download e atrasam a renderizaçãa da página. Use imagens para transmitir informação e limite em 1 ou 2 items por página.
   • Evite telas de entrada ("splash screens"). Elas não agregam qualquer tipo de benefício e tomam tempo e dinheiro ao usuário.
   • Use estilos simples para os textos. O tamanho reduzido da tela faz com que o uso de uma variedade de estilos para textos tornem a compreensão confusa e difícil. Use no máximo 3 estilos por página. Limite-se a um só tipo de estilo para enfatizar. Mantenha consistência nas fontes (a maioria dos telefones adotam uma só fonte padrão). Evite o uso de fundo colorido para textos.
   • Use poucas cores. As diferenças entre as telas bem como as diferentes situações em que se encontram os usuários fazem com que o uso de cores não causem o efeito que você está esperando podendo tornar confusa a diferenciação das cores. Escolha um reduzido (de 1 a 3) conjunto de cores para usar em uma página.
   • Mantenha conteúdos reduzidos. Não coloque grandes quantidades de conteúdo no seu site.
7. Cuidado com as CSS externas. Teoricamente o uso de folha de estilo externas permite aplicar estilos ao site inteiro e ao mesmo tempo reduz o tempo de download. Na prática muitos browsers não trabalham com memória cache fazendo com que haja necessidade de download das CSS a cada página visualizada. E, mais ainda, quando nova página é carregada o XHTML já renderizado, é descarregado para ser renderizado com o novo download das CSS. Embora não fazendo parte do XHTML Básico standard, as folhas de estilos incorporadas (declaradas dentro do elemento head ) são suportadas por browsers dos dispositivos da Openwave, Nokia, AU Systems, e Access.
8. Mantenha a navegação simples e consistente. Use somente um método primário para acessar conteúdos. mantenha seu site sem grandes sofisticações - 3 layers é uma boa medida. Navegação consistente nas páginas permitem fácil identificação e facilitam seu uso. Dicas de navegação:
   • não use menus drop-down (listas select ) para navegação. Usuários não saberão como acioná-los.
   • Não use tabs. Eles requerem o uso de imagens e tabelas, aumentando o tempo de download. Além disso, ainda requerem percorrer todos os itens até atingir o ponto de acesso ao conteúdo que interessa.
   • Não coloque navegação linear no topo da tela. Para conseguir isto você terá que se utilizar de gráficos (e provavelmente de tabelas). Os usuários terão que percorrer todos os itens até atingir o ponto de acesso ao conteúdo que interessa. Se você decidir usar, coloque no fim da página.
   • Não coloque um mecanismo de busca no topo da página. Isto poderá induzir o usuário a fazer uma busca antes de ler o conteúdo da página, requerendo dele uma digitação. Se você tem um dispositivo de busca, coloque no fim da página.
   • Use um gráfico simples no topo da página com um ícone de navegação indicando em qual site e qual parte do site o usuário se encontra e uma breve descrição da página presente.
   • Coloque um link para a home page do site, preferencialmente no fim da página.
9. Use cores e imagens simples. Lembre-se de que os dispositivos móveis tem dimensões reduzidas, suas telas nem sempre apresentam boa renderização para cores e que são usados em uma grande variedade de condições de luminosidade e ambiente. Assin sendo,
   • Use cores altamente contrastantes para imagens e fontes. Aqui não é lugar para nuances de cores. Os usuários não perceberão distinção de tonalidades próximas, mesmo que seus dispositivos suportem 65,000 cores.
   • Evite o uso de imagens de fundo sempre que possível. Se você tiver que usar uma imagem de fundo, escolha uma imagem pequena e faça uso da repetição da imagem no fundo. Esteja ciente de que certos dispositivos não suportam imagens de fundo, assim assegure-se de que as cores escolhidas para o fundo ofereçam contraste suficiente quer com imagem de fundo quer sem elas.
   • Não use imagens ou fundos na cor preta ou escura inclusive para regiões sombreadas na página. Alguns browsers não suportam cores para textos e tal prática poderá tornar sua página ilegível.
   • Evite usar a cor azul ou púrpura para fontes. Estas são as cores tradicionalmente utilizadas para os links. Tal sugestão é muito importante quando se trata de dispositivos móveis, mais do que para telas de computador, uma vez que dispositivos móveis não sublinham os links e a única maneira de identificá-los é através da cor.
   • Use a mesma paleta de cores para toda a parte gráfica do seu site. Isto assegura um visual consistente e fixa uma identidade para o site.
10. Use com cuidado gerenciadores de cache, de sessão e de segurança. Especificamente, esteja ciente de que:
    • Cookies podem não funcionar como esperado. Por exemplo, algumas combinações gateway/dispositivos resultam em cookies que nunca expiram.
    • Alguns dispositivos não fazem cache, ou só fazem em uma quantidade reduzida.
    • Gerenciadores de sessão devem ficar restritos a variáveis de URL. Isto é especialmente importante para operadoras que atribuem ID randômica para cada novo clique do usuário, tornando impossível saber que o usuário é o mesmo a cada novo clique. Você terá que obter com a operadora, os dados estatísticos sobre ID de usuários.