E aí? Lembrou de alguma coisa que não incluímos? Mande uma sugestão para a gente, ou pelo twitter ou por email que nos incluiremos aqui nos créditos. Atualizado em: 18/02.

Se você achou útil
esse checklist, compartilhe.

20Incluir script de notificação de browsers desatualizados

Notifique seus usuários que eles estão utilizando browsers desatualizados, incluindo scripts. Fazendo isso, você contribui para que se tenha uma web capaz de absorver os avanços tecnológicos como: CSS3 e Html5.

Leia mais:
http://www.browser-update.org/

Via (@nicolasiensen)

19Monitoramento de SEO e construção de link back

Após o lançamento, é importante verificar se o conteúdo está sendo indexado corretamente. Caso seja um site dinâmico, é necessário monitorar os plug-ins que foram instalados para a geração de sitemaps. Dependendo dos servidores de hospedagem, pode haver algum bug nessas rotinas. Essa prática facilita que robôs de busca encontrem com maior facilidade as páginas publicadas.

Depois de publicado, é importante monitorar os links que apontam para o projeto (linkbacks) e continuar o trabalho de construção de links no segmento relevante ao projeto.

Via (@RicardoSaavedra)

18Análise de métricas

Antes de utilizar os serviços de análises de métricas como o Google Analytics, é importante ter traçado os objetivos a serem monitorados. A quantidade de dados coletados nestes serviços é imensa, e o foco nesses casos pode ajudar a simplificar a execução de projetos na web.

Via (@RicardoSaavedra)

17 Monitoramento de feedbacks

Depois de todo o trabalho de planejamento e construção de um website, é essencial acompanhar o seu comportamento e crescimento na rede. Com um monitoramento bem feito, é possível identificar problemas na arquitetura de informação, usabilidade e conteúdo.

Ferramentas de métricas são subjetivas e muita vezes não substituem as pessoais. Com o surgimento de redes abertas de informação, como o Twitter e serviços de alertas na web, como o Google Alerts, é possível saber a opinião do público alvo, e talvez ajustar os pontos de um projeto a partir da visão do usuário.

Via (@RicardoSaavedra)

16 Checar links quebrados

O webmaster tools oferece uma ferramenta para o monitoramento de links quebrados. Quando se trabalha com conteúdos dinâmicos, é essencial o acompanhamento das páginas 404.

Via (@RicardoSaavedra)

15 Validação CSS e HTML

O W3C, orgão internacional que regulamenta os padrões de web, disponibiliza um serviço de validação de HTML e CSS. Pode parecer banal, mas fazendo um teste, você verá que 90% dos sites não estão de acordo com as regras e padrões modernos utilizados.

Leia mais:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Via (@RicardoSaavedra)

14 Redirecionamento 301 para evitar conteúdo duplicado

Conteúdo duplicado é quando algum robô de busca identifica o mesmo conteúdo com URLs diferentes. Quando identificados, os registros duplicados são excluídos para que o usuário não se depare com a mesma "página do livro várias vezes".

Normalmente, esse tipo de problema é causado pelo apontamento de múltiplos domínios para uma mesma localidade. Ex: meusite.com.br e meusite.com e meusite.net. O redirecionamento também deve ser feito para da URL www.meusite.com para a URL sem www (caso seja adotado como endereço principal).

O redirecionamento 301 informa ao robô de busca a página principal, e evita confusões dos usuários no acesso ao site. Outro recurso utilizado, recomendado para evitar conteúdo duplicado, é o uso de canonical tags. É um recurso criado pelos robôs de busca em 2009 para ajudar a resolver o problema.

Exemplo:

<head>

<link rel="canonical" href="url-canonica.html" />

</head>

Leia mais:
http://www.mestreseo.com.br/conteudo-duplicado/canonical-tag-acabe-com-o-conteudo-duplicado

Via (@RicardoSaavedra)

13 As URLs amigáveis estão amigáveis?

A URL não é apenas um endereço de acesso a alguma informação dentro de um sistema ou projeto web. Ela é compartilhada em outras plataformas e precisa sintetizar o conteúdo contido nela de forma simples e sugestiva. Que faça sentido para o usuário, para que em uma próxima vez ele consiga acessar aquela área, ou supor o endereço de outras áreas usando a mesma lógica.

A definição das URLs e os padrões de uso a serem adotados devem ser definidos em conjunto pelos profissionais de arquitetura de informação, desenvolvimento e SEO. Pois todos eles, de alguma forma, se apropriarão em alguma etapa do projeto do que foi definido.

Via (@RicardoSaavedra)

12 Otimize carregamento e performance

Em média, 80% do tempo de carregamento de um site é pelo front-end. Além favorecer ao usuário a otimização de performance, ajuda com que o site seja melhor indexado em páginas de busca, já que o Google leva em consideração o tempo de carregamento para formar o pagerank.

Entre as boas práticas estão:

  • O uso de sprite para background e ícones.
  • Links de Javascripts no final do documento html
  • Minimizar requisições de servidor
  • Evitar o uso de CSS e Javascript Inline no código
  • Divida os arquivos fontes em domínios diferentes
  • Otimize as imagens na hora de exportá-las e restrinja o uso de png-24 bits apenas quando necessário

Leia mais:
http://developer.yahoo.com/performance/rules.html

Via (@RicardoSaavedra)

11 Crie um sitemap em xml com todos os links do seu site

Por mais que o Google e outros robôs de busca sejam evoluídos, é sempre bom colaborar com eles e indicar a URL das páginas no projeto. Isso ajuda com que sejam indexadas mais rápido e que nenhuma página seja "esquecida". O arquivo .xml no webmasrtertools (acima) também não deve ser esquecido.

Leia mais:
http://www.xml-sitemaps.com/

Via (@RicardoSaavedra)

10 Adicione o seu projeto ao Google Webmastes Tools.

Esta ferramenta possibilita a configuração da exibição do seu site em mecanismos de busca, análise de keywords buscadas, redirecionamento 301 de páginas, possibilidade de informar ao Google sobre um novo site, inclusão de sitemap e outras opções.

Leia mais:
http://google.com/webmasters/tools

Via (@RicardoSaavedra)

9 Titles e metatags estão otimizadas para mecanismos de busca ?

Metatags, quando existentes, são exibidas pelos robôs de busca para descrever a página. Caso ela não seja incluída no html, o robô de busca, neste caso, destacará as palavras-chave presentes no texto.

Uma metatag bem redigida pode aumentar o seu CTR, ou seja, descrevendo bem o conteúdo da sua página, mais pessoas irão clicar no seu link.

Leia mais:
http://www.mestreseo.com.br/tags-seo/meta-tags-seo-quantidade-qualidade

Via (@RicardoSaavedra)

8Foram definidos os objetivos do projeto para a análise de métricas?

Ferramentas de métricas geram apenas dados. É importante identificar, o quanto antes, os objetivos a serem alcançados pelo projeto para que seja possível analisar exatamente os dados importantes e traçar a segmentação necessária, se for o caso. Não fique restrito apenas ao Google Analytics. Existem outras ferramentas, que também são grátis, que permitem outros tipos de análises e monitoramento em tempo real de visitas, por exemplo.

Definir previamente os objetivos ajuda a escolher corretamente as ferramentas a se trabalhar em cada projeto. Outro ponto importante é configurar o track code nas páginas corretas para facilitar a checagem das conversões.

Leia mais:
http://webdesignledger.com/tools/10-useful-website-analytics-tools

Via (@RicardoSaavedra)

7 Favicon

O ícone é usado pelos browsers para salvar algum site como favorito, e também é usado para a navegação entre as abas abertas.

Via (@RicardoSaavedra)

6Prever o atributo mark para seleção de texto

Poucos utilizam, mas hoje já é possível, através do CSS3, editar a cor da seleção do texto e a cor da fonte. Muitas pessoas, no momento de leitura, têm o costume de selecionar o parágrafo para manter a referência de posicionamento no texto.

Via (@RicardoSaavedra)

5Nada de texto justificado. O ideal para a web é alinhar à esquerda

No meio impresso pode até funcionar, mas na web, o que funciona mesmo é o texto alinhado à esquerda. Quando se trabalha com textos para mídia impressa, é possível usar o alinhamento justificado, pela inexistência de programas que separam as sílabas corretamente por idioma. Nos browsers, até mesmo nos mais modernos, ainda não temos essa funcionalidade. O que acaba acontecendo, nesse caso, é a inserção de tamanhos diferentes para cada linha, o que prejudica a dinâmica da leitura. Na web, o usuário lê 25% mais lentamente do que no papel. O texto alinhado à esquerda ajuda com que o usuário não se perca ao mudar para a próxima linha.

demostracao-alinhamento-fonte

Leia mais:
http://css-tricks.com/css-font-size/
http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

Via (@RicardoSaavedra)

4 Escolha com cuidado a tipografia, espaçamento e teste a leitura dos textos

Cada vez mais, a tendência das pessoas consumirem conteúdos através de interfaces simples (Greader e leitores de RSS em geral) evidencia uma demanda por simplicidade e menos distração na hora da leitura. A dica é escolher cuidadosamente uma família de fontes a se trabalhar e testar diferentes tamanhos de corpo de fonte para diminuir o esforço do usuário. Normalmente, para a leitura de textos corridos, é recomendado o tamanho mínimo de 12px e máximo de 16px.

É importante avaliar se há a necessidade de incluir, ou não, algum widget em javascript para aumentar a fonte, pois pessoas com dificuldade de leitura normalmente já utilizam essa funcionalidade dentro do browser. Para facilitar a ampliação da página e evitar quebras de layout, é necessário evitar o uso de tamanhos das fontes em px, e utilizar, neste caso, os tamanhos em "em" que é uma medida proporcional e ajuda na acessibilidade do texto em outros dispositivos.

Tanto a entrelinha (line-height), (letterspacing) e (wordspacing) são propriedades de CSS que podem ajudar a aumentar a qualidade da experiência do usuário nesse momento. Vale a pena dedicar algum tempo escolhendo os tamanhos certos.

Outra preocupação que se deve ter com fontes é a adequação dos contrastes para daltônicos e para pessoas com algum outro tipo de deficiência visual (link abaixo).

Leia mais:
http://pxtoem.com/
http://snook.ca/technical/colour_contrast/colour.html

Via (@RicardoSaavedra)

3 Prever títulos grandes e elementos fluidos

Para evitar esse problema, é interessante que o designer exagere de propósito no tamanho dos títulos e dos textos com mais caracteres do que ele imagina para conseguir antecipar e prever o comportamento dos outros elementos na página. Isso é importante para que, na hora da implementação do front-end (html+css), o desenvolvedor saiba que aquele elemento é fluido e pode aplicar as propriedades corretas aos outros elementos para evitar erros futuros de CSS.

Via (@RicardoSaavedra)

2 Validação de formulários

Mais comum do que se pensa, designers se esquecem de prever a validação de um formulário (sucesso e erro) e o comportamento das pseudo-classes nos inputs fields (:focus). Estes atributos são essenciais para a boa experiência da interface.

validacao-formulario Exemplo Formulário

Leia mais:
http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/

Via (@RicardoSaavedra)

1 Página 404

Mesmo tomando cuidado para checar links quebrados, em um sistema de gerenciamento de conteúdo, inevitavelmente acabará acontecendo, ou por erro de edição, ou por alguma migração de página. Se essas páginas estiverem com links externos de outros sites, como mecanismos de busca, a página 404 é a única forma de orientar o usuário para que ele encontre o conteúdo que está sendo buscado.

Leia mais:
http://www.webdesignerdepot.com/2009/07/50-creative-and-inspiring-404-pages/
http://css-tricks.com/404-best-practices/

Via (@RicardoSaavedra)

A equipe de criação e de desenvolvimento da agência KAUS reuniu, em um documento, uma série de pontos importantes para checar antes do lançamento de um projeto digital.

De maneira alguma este documento tenta ser um conteúdo definitivo. Contamos com a colaboração e ajuda dos usuários para acrescentar informações. A ideia é reunir diferentes pontos de vista de diversos profissionais.*

Boas práticas de produção web

DESIGN CHECKLIST

Asteróide Galaxia Mundo