Autor: Openwave
URL do original:
http://developer.openwave.com/.../ index.htm
Título original: Best Practices in
XHTML Design
Traduzido com autorização expressa do autor
por
Maurício Samy Silva.
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 é difí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 dispositivos 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.
- Conheça os dispositivos 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.
- 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.
- Pense vertical, não horizontal. A maioria
dos dispositivos móveis tem um layout vertical e os usuários
têm 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.
- 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
mínimo 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 em vertical 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
preciso 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.
- 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 usabilidade. 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.
- Pense pequeno. Dispositivos móveis
têm telas pequenas, processadores pequenos, pouca memória
e mecanismos de entrada restritos.
Mantenha suas páginas pequenas, 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ção da página.
Use imagens para transmitir informação e limite em
1 ou 2 itens 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.
- 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.
- 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.
- Use cores e imagens simples. Lembre-se de que os
dispositivos móveis têm 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. Assim 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
ele.
- 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 Uniform Resource Location - 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.
Disponibilizado em: 04/04/2008.
