Guia de referência - Boas práticas em Web móvel

Essas são as cartelas de Boas práticas em Web móvel, que resumem as informações do documento Boas práticas em Web móvel 1.0. As cartelas são úteis para recordar os sessenta itens explicados em detalhes nas especificações. Uma versão em PDF das cartelas está disponível para download.

As cartelas Boas práticas em Web móvel estão disponíveis nos seguintes idiomas: em Inglês, em Coreano e em Espanhól.

Boas práticas em Web móvel

Introdução

As "Boas Práticas em Web Móvel 1.0" são padrões web do W3C para ajudar os desenvolvedores Web a desenhar e publicar conteúdos Web que funcionem adequadamente em dispositivos móveis. Estas cartelas resumem, em dez pontos- chave, as boas práticas descritas como padrões. Ao segui-las, será possível aumentar o público com condições de ter acesso aos conteúdos por meio de sítios Web e aplicações, tornando a navegação mais confortável em outros dispositivos.

Mais informações em: http://www.w3.org/TR/mobile-bp/

10 regras básicas para
fazer a Web móvel

Faça seu projeto para uma Web única

Se o seu projeto de conteúdo leva em conta os diferentes dispositivos seus custos serão reduzidos, sua página será mais flexível e atenderá as necessidades de um número maior de usuários

Faça seu projeto para uma Web única

Coerência temática: Certifique-se de que o conteúdo que se obtém a partir de um endereço Web (URI) traz as mesmas informações essenciais ao usuário, independente do dispositivo usado.

Capacidades: Aproveite os recursos dos dispositivos para proporcionar ao usuário uma experiência de navegação mais rica.

Problemas na implementação: Tome as medidas convenientes para evitar problemas na implementação.

Testes: Faça testes em dispositivos móveis e emuladores.

Confie nos padrões Web

Em um mercado tão fragmentado como o dos dispositivos e navegadores, os padrões são a melhor garantia de interoperabilidade.

Confie nos padrões Web

Marcações válidas: Crie documentos que sejam válidos conforme a sintaxe formal amplamente conhecida.

Compatibilidade de formato:Envie o conteúdo em um formato que seja compatível com o dispositivo.

Formato preferido de conteúdo: Sempre que possível, envie o conteúdo no formato desejado pelo usuário.

Compatibilidade da codificação de caracteres: Certifique-se de que a codificação de caracteres do conteúdo é compatível com o dispositivo.

Uso da codificação de caracteres:Indique a codificação de caracteres que se está utilizando.

Uso de folhas de estilo:Utilize folhas de estilo para controle de leiaute e apresentação, a menos que o dispositivo não aceite.

Estrutura:Utilize as facilidades da linguagem de marcação para definir a estrutura lógica do documento.

Mensagens de erro:Garanta que suas mensagens de erro sejam informativas e permitam regressar ao conteúdo anterior.

Evite os riscos conhecidos

Um desenho bem planejado ajuda a reduzir os problemas de usabilidade causados por telas e teclados pequenos ou outras características dos dispositivos móveis.

Evite os riscos conhecidos

Janelas pop-ups: Evite as janelas pop-ups e não mude de janela sem informar o usuário.

Tabelas aninhadas:Tabelas não funcionam bem em telas de tamanho limitado. Não use tabelas aninhadas.

Leiaute com tabelas: Igualmente, não use tabelas para o leiaute das páginas.

Imagens de espaçamento: Não use o recurso imagens de espaçamento pois ele não funciona em vários dispositivos.

Frames: Não use frames, pois são problemáticos e não compatíveis com diversos dispositivos.

Imagens mapeadas:Evite usar imagens mapeadas, a menos que saiba que o dispositivo as interpreta adequadamente.

Seja prudente com as limitações dos dispositivos

Quando escolher uma tecnologia Web em particular, tenha em conta que varia muito a capacidade dos dispositivos móveis em suportá-la.

Seja prudente com as limitações dos dispositivos

Cookies:Não conte com a plena disponibilidade de cookies.

Objetos ou Scripts:Não dependa dos Objetos ou Scripts integrados.

Suporte a tabelas:Não use tabelas, a não ser que esteja certo de que o dispositivo suporta esse recurso.

Alternativa a tabelas:Sempre que possível, utilize alternativas à apresentação tabular.

Suporte a folha de estilos:Organize seus documentos de forma que seja possível lê-los sem folhas de estilo.

Tipografia:Não confie na disponibilidade de suporte aos tipos de letras.

Uso de cores:Certifique-se de que a informação apresentada em cores também pode ser vista sem cor.

Aperfeiçoe a navegação

A simplificação da navegação e do uso do teclado são fatores essenciais quando se utilizam telas e teclados pequenos e se tem uma largura de banda limitada

Aperfeiçoe a navegação

Barra de navegação:Concentre a navegação na parte superior da página e a reduza ao mínimo.

Navegação: Utilize mecanismos de navegação consistentes.

Identificação do destino:Identifique claramente o destino de cada link.

Formato do destino:Indique o formato do arquivo de destino, a não ser que saiba com segurança que o dispositivo é compatível.

Tecla de acesso rápido: Associe teclas de acesso rápido aos links nos menus de navegação e nas funções mais utilizadas.

URIs:Mantenha as URIs curtas.

Equilíbrio:Procure encontrar um ponto de equilíbrio entre ter muitos links em uma página e levar o usuário de um sítio a outro até chegar ao que ele está buscando.

Teste antes os gráficos e cores

As imagens, as cores e o estilo dão destaques ao conteúdo, porém existem dispositivos com telas de baixo contraste ou com problemas de compatibilidade com alguns formatos.

Teste antes os gráficos e cores

Redimensione as imagens: Redimensione as imagens no servidor se ela tiver um tamanho intrínseco (ex. bitmap).

Gráficos grandes: Evite imagens que não podem ser mostradas no dispositivo. Evite imagens grandes ou de alta resolução, a menos que haja perda de informação relevante.

Tamanho de imagem especificado:Especifique o tamanho da imagem na marcação se ela tiver um tamanho intrínseco.

Alternativas aos elementos não-textuais: Forneça um equivalente em forma de texto para cada elemento não-textuais.

Contraste de cores: Certifique-se de que haja suficiente contraste entre cor de fundo e do primeiro plano.

Legibilidade da imagem de fundo: Quando utilizar imagens de fundo, certifique-se de que o conteúdo continua sendo legível no dispositivo correspondente.

Medidas: Não utilize medidas em pixels nem em unidades absolutas nos valores dos atributos de linguagem de marcação. Também não use nos valores das propriedades das folhas de estilo.

Faça em tamanho reduzido

Um sítio Web de tamanho reduzido resultará em economia de tempo e dinheiro para os usuários.

Faça em tamanho reduzido

Minimizar: Utilize uma marcação concisa e eficaz.

Limite no tamanho da página: Certifique-se de que o tamanho total de página é apropriado para as limitações de memória do dispositivo.

Tamanho das folhas de estilo: Utilize folhas de estilo pequenas.

Rolagem de tela: Limite a rolagem de tela a uma só direção, a não ser que seja impossível evitar um deslocamento secundário.

Economize o uso da rede

As funções dos protocolos Web podem melhorar a experiência do usuário ao reduzir os gargalos e tempo de espera na rede.

Economize o uso da rede

Atualização automática: Não crie páginas com uma atualização automática e periódica, a não ser que tenha informado o usuário e que esse possa desativá-la.

Redirecionamento: Não use marcação para redirecionar páginas automaticamente. Configure o servidor para que execute redirecionamento por meio de códigos HTTP 3cc.

Recursos externos: Procure reduzir ao mínimo o número de links externos.

Cache: Forneça informações para a cache nas respostas HTTP.

Facilite a entrada de dados

Nos dispositivos móveis, os teclados e outras maneiras de entrar com dados podem ser descon-fortáveis para o usuário. Um projeto adequado minimiza as dificuldades.

Facilite a entrada de dados

Uso do teclado:Reduza ao mínimo o uso do teclado.

Evite a entrada de texto: Sempre que possível, evite que o usuário tenha que entrar com texto.

Valores pré-definidos: Sempre que possível, forneça valores pré-definidos para serem usados.

Modo de entrada de dados pré-definido: SSe o dispositivo for compatível, prefira usar modo de entrada de texto, linguagem e/ou formato de entrada pré-definidos (defaults).

Ordem de tabulação: Crie uma ordem lógica no uso de links, controles de formulários e objetos.

Rótulos em formulários: Rotule adequadamente todos os controles de formulários com a marca <label>, associando-os explicitamente.

Posição de controles em formulários: Posicione os rótulos com a marca <label> de modo que eles apontem adequadamente os controles de formulário.

Pense nos usuários da Web móvel

Os usuários da Web móvel necessitam de informação resumida porque dispõem de pouco tempo e ao mesmo tempo se ocupam de muitas outras coisas.

Pense nos usuários da Web móvel

Título da página: Escolha um título para a página que seja curto, mas auto-explicativo.

Clareza: Utilize uma linguagem simples e clara.

Conteúdo relevante: Certifique-se de que o conteúdo relevante da página venha na frente do conteúdo que não é.

Conteúdo limitado: Forneça somente o conteúdo que lhe for solicitado pelo usuário.

Adequação: Certifique-se de que o conteúdo está adequado para ser usado em um dispositivo móvel.

Tamanho de página utilizável: Divida as páginas em seções utilizáveis, mas de tamanho limitado.

W3C Mobile Web Initiative SPONSOR

(MWI Sponsors)

World Wide Web Consortium