Uma checklist para ajudar os desenvolvedores Front-end a implementar as boas práticas.
Este repositório não é nenhum tipo de guia definitivo e nem tem a pretensão de ser. O objetivo é ter um bom ponto de partida para que cada um crie seu próprio checklist adaptado a suas necessidades, afinal, cada caso é um caso :D
- Design
- Usabilidade
- Acessibilidade
- SEO
- Web Performance Optimization
- Qualidade de Código
- Cross Browser
- AWD/RWD/Mobile
- Análises
- Workflow
- Mantenabilidade
- Outros Testes
- Créditos
- Autores
- Referências
- Licença
- Adicionar Favicons
- Adicionar página 404 personalizada
- Utilizar URLs amigáveis
- Utilizar um CSS alternativo que seja "Print friendly"
- Adicionar 'Salto de Conteúdo'
- Adicionar WAI-ARIA
- Validar WAI-ARIA
- Utilizar corretamente a estrutura semântica
<header>,<main>,<aside>,<footer>,<nav>etc... - Use os
Headingscorretamente
- Declare corretamente o atributo
lang
- Garantir que os links sempre tenham o evento
:focusatrelado - Garantir que os links sejam reconhecidos como
links
- Adicionar o evento :focus junto a todos os evento de
:hover
- Forneça transcrições de texto.
- Sincronize legendas com o vídeo.
-
Vincular os
labelsa seus respectivos campos através da propriedadefor. -
Relacione os elementos com
fieldsete descreva o grupo com umlegendadequado.
- Adicionar o atributo
altcom descrição coerente em todas as imagens.
- Unobtrusive JavaScript
- Alternativas sem JavaScript - fornecer alternativas para usuários sem JavaScript habilitado.
- Validar Acessibilidade
- Validar Contraste
- Testar navegação apenas com o teclado
- Testar diretamente no leitor de tela
- Submeter URL ao índice do Google
- Adicionar sitemap.xml
- Adicionar robots.txt
- Planejar link building
- Oferecer um conteúdo relevante no elemento
<title> - Oferecer um conteúdo relevante nas
<meta description="">
- [Google Developers - Testing tool](https://developers.google.com/structured- data/testing-tool/)
- Facebook Developers - Debugger
- Twitter Developer - Card validator
- Verificar SEO - Site Analyzer e SEO SiteCheckop
- Google mobile friendly test
- W3C Semantic Validation
- W3C Internationalization Checker
- Google Webmaster Tools
- Bing Webmaster Tools
- Servir arquivos comprimidos através de Gzip
- Concatenar os arquivos CSS
- Concatenar os arquivos JS
- Minificar os arquivos HTML
- Minificar os arquivos CSS
- Minificar os arquivos JS
- Carregar assets estáticos através de um CDN
- Fazer cache do conteúdo estático
- Otimizar imagens
- Usar sprites sempre que possível (incluindo SVG)
- Manter animações na Composite Layer
- Evitar ao máximo utilizar o seletor universal *
- Não utilizar import (ao menos que seja com algum pré-processador)
- Criar expressões de seletores o menor possíveis
- Utilizar uma classe/ID como seletor e evitar selecionar os elementos diretamente (
.header/#header>header)
- Web Page Test
- Page Speed resultados 90+
- YSlow resultados 85+
- CSS Perf Test
- Validar HTML na W3C
- Validar CSS na W3C
- CSS Lint
- JS Hint
- Definir quais browsers serão suportados
- Utilizar Autoprefixer
- Verifique o site/aplicação em todos os navegadores
- Media Queries Mobile First
- Disponibilizar fotos para Retina Display
- Utilizar SVG em tudo o que possivel (SVG > icon fonts)
- Use input types corretos
- Use a meta-tag
viewportda forma correta - Pontuação mobile OK de 75+
- Validar no W3C Mobile Checker
- Teste em emuladores mobile
- Teste em dispositivos reais
- Adicionar análise de tráfego (Analytics)
- Versionar o projeto corretamente
- Automatizar o máximo de tarefas possíveis
- Automatizar deploy
- Nunca usar
!important - Focar o nome de seletores (Classes) sempre na função e nunca no conteúdo
- Verificar links quebrados
- Verificar ortografia e gramática
| 
| 
--- | --- | --- | --- | --- | --- | ---
Afonso Pacifer | Dani Guerrato| Bruno Pulis
MIT Licence © Afonso Pacifer