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

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

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

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

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

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

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

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

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

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.