WF.← Todos os trabalhos
Case 03 / Mercado Livre / Saber52016 · Programação de e-mail

De templates isolados a uma biblioteca operacional.

HTML para e-mail, snippets e marcadores criados para transformar uma produção recorrente em um sistema reutilizável dentro das limitações de 2016.

Papel
Programador
Sistema
4 famílias de template + biblioteca de snippets
Acervo
93 HTMLs analisados · 82 únicos
Estrutura realHTML tabelado
Resultado

O visual era a saída.
O sistema estava no código.

<!-- Linha de produtos 1 - begin -->
<td width="43%" align="center">
  <a href="link_P1_prod" rilt="P1_prod">
    <img src="images/img_2.jpg"
      width="100%" alt="PS4 Slin Sony" />
  </a>
</td>
link_P1_prod
destino parametrizado
rilt="P1_prod"
identificação de tracking
images/img_2.jpg
asset local substituível
width="43%"
proporção da grade tabelada
03 famílias selecionadas600 px / responsivoHTML tabeladoblocos reutilizáveisparametrização por marcadores

Aprender rápido não bastava. Era preciso parar de repetir.

Entrei contratado como programador e aprendi HTML tabelado para e-mail já dentro da operação. Quando a produção começou a se repetir, reorganizei o trabalho em famílias de templates e blocos reutilizáveis.

Marcadores como id@job, link@, feature@, valor@ e benefit@ transformavam planilhas e busca/substituição numa camada simples de parametrização.

  • Templates de categoria, colunas, full e relâmpago
  • Pontos explícitos para inserção de módulos
  • Biblioteca de snippets com legenda operacional
  • Estrutura adaptada às restrições do fluxo de 2016
Oferta RelâmpagoCampanha de maior contraste com GIF e módulos locais preservados.4338_EMKT_RELAMPAGO.htmlInspecionar render ↗
Categoria em colunasDez ofertas distribuídas em pares responsivos.11_24_email_10_ofertas.htmlInspecionar render ↗
Full — 2 + 14 ofertasA família extensa com destaques, produtos e banners de campanha.11_24_email_2_14_ofertas_banner.htmlInspecionar render ↗
01 / Categoria

Estrutura reorganizada

514 → 367

Comparativo de linhas entre os arquivos preservados da mesma família.

02 / Colunas

Menos repetição

588 → 402

Redução estrutural mantendo a composição recorrente de produtos.

03 / Relâmpago

Base mais enxuta

630 → 278

Evidência de reorganização no material histórico, sem atribuir impacto comercial.

Código histórico, princípio atual.

Os renders apresentados são restaurações controladas dos arquivos preservados. Macros de disparo e rastreamento são neutralizadas apenas na cópia de exposição; os originais permanecem intactos.

O case não reivindica o design das campanhas. Mostra o que realmente foi meu: arquitetura do HTML, parametrização, modularização e adaptação às restrições técnicas da operação em 2016.

Próximo caseInfraestrutura Luna ↗