A Front-End Checklist é uma lista exaustiva de todos elementos que você precisa ter / testar antes de lançar seu site / página HTML em produção.
Ela é baseada em anos de experiência de desenvolvedores Front-End, com as adições provenientes de outras checklists open-source.
Ajude a compartilhar a Front-End Checklist votando e recomendando-a no Product Hunt
Todos itens na Front-End Checklist são necesários na maioria dos projetos, mas alguns elementos podem ser omitidos ou não são tão essenciais (no caso da administração de um aplicativo web, você pode não precisar de um feed RSS por exemplo). Nós escolhemos três níveis de flexibilidade:
significa que o item é recomendado mas pode ser omitido em algumas situações em particular.
significa que o item é altamente recomendado e pode eventualmente ser omitido em alguns casos realmente particulares. Alguns elementos, se omitidos, podem ter más repercussões em termos de performance ou SEO.
significa que o item não pode ser omitido por qualquer razão. Você pode causar uma disfunção na sua página ou ter problemas com acessibilidade ou SEO. A prioridade dos testes precisa estar nestes elementos primeiro.
Alguns recursos possuem um emoticon para ajudar você a entender qual tipo de conteúdo / ajuda você pode encontrar na checklist:
- 📖: documentação ou artigo
- 🛠: ferramenta online / ferramenta de teste
- 📹: mídia ou conteúdo em vídeo
Notas: Você pode acessar uma lista com tudo que poderia ser encontrado na
<head>de um document HTML.
- Doctype:
<!-- Doctype HTML5 -->
<!doctype html>A próximas 3 meta tags (Charset, X-UA Compatible e Viewport) precisam vir primeiro no head.
- Charset:
<!-- Determine o encoding de caracteres para o document -->
<meta charset="utf-8">- X-UA-Compatible:
<!-- Instrua o Internet Explorer a usar seu mais recente engine de renderização -->
<meta http-equiv="x-ua-compatible" content="ie=edge">- Viewport:
<!-- Viewport para web design responsivo -->
<meta name="viewport" content="width=device-width, initial-scale=1">- Title:
<!-- Título do Document -->
<title>Título de Página menor que 65 caracteres</title>- Descrição:
<!-- Meta Descrição -->
<meta name="description" content="Descrição da página com menos de 150 caracteres">- Favicons:
favicon.ico, ponha-o na raiz do seu site. Normalmente você não precisa usar nenhum markup. Entretanto, ainda é uma boa prática linkar ele usando o exemplo abaixo. Atualmente, o formato PNG é recomendado ao invés do formato.ico(dimensões: 32x32px).
<!-- Favicon padrão -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Formato favicon recomendado -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">- Apple Touch Icon:
apple-mobile-web-app-capableestá presente. (Crie seu arquivo Apple Icon com pelo menos dimensão 200x200px para dar suporte a todas dimensões que você pode precisar)
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">- Windows Tiles:
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />O markup xml mínimo necessário para o arquivo browserconfig.xml é como segue:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>- Canonical:
rel="canonical"para evitar conteúdo duplicado.
<!-- Ajuda a evitar problemas com conteúdo duplicado -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">- Atributo de linguagem:
<!-- Indicamos o idioma definido para a página atual -->
<html lang="pt-br">- Atributo de direção:
<html>(Pode ser usada em outra tag HTML).
<!-- Indicamos a direção de leitura (rtl é sigla para right to left, isto é, da direita para a esquerda) -->
<html dir="rtl">- Idioma alternativo:
<!-- Indicamos o idioma definido para a página atual -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">- Comentários condicionais:
-
RSS feed:
-
CSS Crítico inline:
<style></style>numa linha única (minificado).
- Ordem CSS:
<head>. (Exceto o caso onde, algumas vezes, arquivos JS são carregados assíncronamente no topo da página).
Facebook OG e Twitter Cards são, para qualquer website, altamente recomendados. As outras tags de mídia social podem ser consideradas se seu público-alvo tem uma presença em particular nelas, e você quer se assegurar de exibí-las.
- Facebook Open Graph:
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
- 📖 Um Guia de Compartilhamento para Webmasters
- 🛠 Teste sua página com o Facebook OG testing
- Twitter Card:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Descrição de conteúdo com menos de caracteres">
<meta name="twitter:image" content="https://example.com/image.jpg">
- 📖 Iniciando com cards — Twitter Developers
- 🛠 Teste sua página com o Twitter card validator
- HTML5 Semantic Elements:
-
Páginas de erro:
-
Noopener:
target="_blank", seu link deveria ter um atributorel="noopener"para prevenir tab nabbing. Se você precisa suportar versões mais antigas do Firefox, userel="noopener noreferrer".
- Retirando comentários:
- W3C compliant:
- HTML Lint:
- Verificador de Link:
- Teste Bloqueadores de Publicidade:
- Formato de webfont:
- Tamanho de webfont:
Notas: Dê uma olhada em Guidelines CSS e Guidelines Sass seguidas pela maioria dos desenvolvedores Front-End. Se você tem alguma dúvida sobre propriedades CSS, você pode visitar a CSS Reference.
- Web Design Responsivo:
- CSS Print:
- Preprocessors:
- Unique ID:
- Reset CSS:
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- JS prefix:
<div id="js-slider" class="my-slider">
<!-- ou -->
<div id="id-used-by-cms" class="js-slider my-slider">- CSS embed ou line:
<style>ou inline: apenas utilizado por razões válidas (ex: background-image para slider, CSS critical). - Vendor prefixes:
- Concatenation:
- Minification:
- Non-blocking:
- Unused CSS:
- Stylelint:
-
Responsive web design:
-
CSS Validator:
- Navegadores Desktop:
- Navegadores Mobile:
- SO:
- Pixel perfect:
- Direção de leitura:
Notas: Para um entendimento completo de otimização de imagem, veja o ebook grátis Essential Image Optimization, do Addy Osmani.
- Optimization:
- 🛠 Imagemin
- 🛠 Use ImageOptim para otimizar suas imagens gratuitamente.
- Picture/Srcset:
- Retina:
- Sprite:
- Width e Height:
widtheheightem<img>se a imagem final renderizada é conhecida (pode ser omitido para CSS sizing). - Texto alternativo:
<img>têm um texto alternativo que descreve a imagem visualmente.
Nota: Vários desenvolvedores assumem que altura e largura não são compatíveis com design web responsivo. Absolutamente não é o caso.
- Texto alternativo:
<img>têm um texto alternativo que as descreve visualmente. - Lazy loading:
- JavaScript Inline:
- Concatenation:
- Minification:
.min).
- JavaScript security:
- Non-blocking:
asyncou deferidos usando atributodefer.
- Modernizr:
<html>.
- ESLint:
- HTTPS:
- HTTP Strict Transport Security (HSTS):
- Cross Site Request Forgery (CSRF):
- Cross Site Scripting (XSS):
- Content Type Options
- X-Frame-Options (XFO)
- Weight page:
- Minified:
-
Lazy loading:
-
Cookie size: Se você está usando cookies, certifique-se de que cada não excede 4096 bytes e que seu domain name não tem mais de 20 cookies.
- Componentes de terceiros:
- DNS resolution:
dns-prefetch.
<link rel="dns-prefetch" href="https://example.com">- Preconnection:
preconnect.
<link rel="preconnect" href="https://example.com">- Prefetching:
prefetch.
<link rel="prefetch" href="image.png">- Preloading:
<body>) adiantadamente usandopreload.
<link rel="preload" href="app.js">- Google PageSpeed:
Notas: Você pode assistir a playlist A11ycasts com Rob Dodson 📹
- Melhoramento progressivo:
- Contraste de cor:
- H1:
- Cabeçalhos:
- Role banner:
<header>temrole="banner". - Role navigation:
<nav>temrole="navigation". - Role main:
<main>temrole="main".
- Inputs HTML5 específicos são utilizados:
- Label:
aria-label.
- Testando padrões de Acessibilidade:
- Navegação por Teclado:
- Screen-reader:
- Estilo de Foco:
- Google Analytics:
- Headings logic:
- sitemap.xml:
- robots.txt:
- 🛠 Test seu robots.txt com Google Robots Testing Tool
- Dados Estruturados:
- 📖 Introdução a Dados Estruturados - Search - Google Developers
- 🛠 Teste sua página com o Ferramenta de Teste de Dados Estruturados
- 🛠 Lista completa de vocabulários que podem ser usados como dados estruturados. Schema.org Hierarquia Completa
- Sitemap HTML:
O Front-End Checklist também está disponível em outros idiomas. Obrigado a todos tradutores por seu incrível trabalho!
- 🇯🇵 Japonês: miya0001/Front-End-Checklist
- 🇪🇸 Espanhol: eoasakura/Front-End-Checklist-ES
- 🇨🇳 Chinês: JohnsenZhou/Front-End-Checklist
- 🇰🇷 Coreano: kesuskim/Front-End-Checklist
- 🇻🇳 Vietnamita: euclid1990/Front-End-Checklist
Se você quer mostrar que está seguindo as regras do Front-End Checklist, ponha esta badge no seu arquivo README!
➔
[](https://github.com/thedaviddias/Front-End-Checklist/)Abra uma issue ou uma pull request para sugerir mudanças ou adições.
O repositório original do Front-End Checklist consiste em duas branches:
Esta branch consiste no arquivo README.md que é automaticamente refletido no website Front-End Checklist.
Esta branch será usada para fazer algumas mudanças significativas à estrutura, conteúdo se necessário. É preferível usar a branch master para arrumar erros pequenos ou adicionar um novo item.
Veja todos os incríveis contribuidores.
Se você tem alguma pergunta ou sugestão, não hesite em usar o Gitter ou Twitter:
