6. Decisões EL — sistema de layout
| # | Decisão | Racional | Alternativas descartadas |
|---|---|---|---|
| EL1 | Grade de 600px, coluna única como padrão; multi-coluna é exceção justificada | Largura canônica com melhor comportamento no painel de leitura do Outlook | 640/680px (risco de corte lateral) · fluido sem teto (o Outlook não colabora) |
| EL2 | Técnica híbrida: max-width/min-width com largura fixa condicional para Outlook, empilhando sem media query; media query apenas como aprimoramento progressivo |
Garante base legível onde a media query não existe (Outlook Windows) ou é parcial (Gmail). É a técnica do canon: o layout empilha sem media query, com largura fixa para o Outlook, que está preso ao desktop de qualquer forma | Media-query-only (quebra exatamente no cliente corporativo que o público da SEED usa) · mobile-first puro (perde controle do desktop no Outlook.com) |
| EL3 | role="presentation" em toda tabela de layout, inclusive aninhadas. Tabela de dados real mantém semântica (<table>, <caption>, <th scope>) — herda o §40 |
Layout de e-mail aninha tabelas; marcar só a externa deixa o leitor de tela anunciando linhas e colunas das internas | Marcar apenas a tabela raiz |
| EL4 | Botão bulletproof por padding + VML para Outlook; alvo com altura ≥44px; texto real, nunca imagem | Herda o §1 e a régua de escada de mecanismos: cor nunca é o único portador de significado | Botão como imagem (morre com bloqueio) · <button> (não existe em e-mail) |
| EL5 | Preheader obrigatório com espaçador, tratado como microcopy de primeira classe | Sem ele o cliente preenche sozinho com o começo do corpo — inclusive com texto alternativo de imagem | Deixar o cliente decidir |
| EL6 | lang="pt-BR" no <html> · um único <h1> · hierarquia semântica real · ordem de leitura linear |
Critério WCAG 3.1.1 e navegação por cabeçalho no leitor de tela | Marcação puramente visual |
| EL7 | Cabeçalho e rodapé canônicos como módulos únicos: logo raster com placa, assinatura institucional, endereço da matriz, gestão de preferências | Rodapé compartilhado é o que impede a deriva peça a peça | Rodapé por template (garante versões divergentes em meses) |
| EL8 | Contraste medido por script sobre os hex resolvidos, nos pisos da seção 4.2, com a isenção declarada de 4.3 | Régua permanente do projeto: nenhum número não-medido entra em arquivo canônico | Herdar os pares do DS sem remedir — foi o que a errata do rodapé provou ser perigoso |
| EL9 | Corpo de texto em 16px, não nos 14px da escala de interface | E-mail é lido em condições piores que uma interface — tela pequena, luz ruim, de relance, sem zoom fácil; 16px é o padrão da indústria para corpo de e-mail | Herdar os 14px por consistência numérica — consistência que produz texto difícil de ler é teimosia, não consistência |
| EL10 | Espaçamento vertical entre blocos por linha espaçadora com height, nunca margin em tabela | O motor Word ignora margin em tabela; o bloco flui para o lado do vizinho (defeito 5 do gate, §7.2) | Margin na tabela (falha no Outlook) · padding no td do conteúdo anterior (acopla o espaço ao bloco errado) |
Fronteira declarada — largura mínima de teste. No e-mail o piso é 320px, não os 360px usados no DS web. É divergência deliberada: o pior caso histórico do e-mail é mais baixo que o do navegador. Registrada aqui para não ser lida no futuro como inconsistência.