AvançadoNewslettersAberto

Design de template de newsletter responsivo e acessível

Guia completo para criar templates de newsletter que funcionem em todos os clientes de email e sigam boas práticas de acessibilidade.

templatedesign responsivoacessibilidadeHTML emailmobile

Objetivo do Prompt

Projetar um template de newsletter modular, responsivo e acessível que maximize a taxa de clique e funcione corretamente no Gmail, Outlook e Apple Mail.

Exemplo Real de Uso

A Natura Casa, loja de decoração online com 22 mil assinantes, descobre que 34% dos emails estão quebrando no Outlook e que a versão mobile tem taxa de clique 60% menor que desktop. Precisam de um template robusto.

Prompt

Projete um template de newsletter completo e responsivo para [NOME DA EMPRESA], do setor de [SETOR], considerando que [PERCENTUAL]% da base abre emails no mobile.

**Especificações técnicas:**
- Largura máxima: 600px
- Compatibilidade obrigatória: Gmail (web + app), Outlook 2019+, Apple Mail, Yahoo
- Ferramenta de envio: [FERRAMENTA: RD Station/Mailchimp/ActiveCampaign]

**Estruture o template com:**

1) **Header**:
   - Logo (dimensões e peso recomendados)
   - Preheader text estratégico
   - Barra de navegação (máx. 4 links)

2) **Hero section**:
   - Imagem principal (ratio, alt text, fallback)
   - Headline + subheadline
   - CTA button (dimensões mínimas para mobile: 44x44px)

3) **Corpo modular** (3 layouts intercambiáveis):
   - Layout A: Texto + imagem lateral
   - Layout B: Cards em grid (2 colunas desktop, stack mobile)
   - Layout C: Lista com ícones

4) **Footer**:
   - Links obrigatórios (LGPD compliance)
   - Redes sociais
   - Link de descadastro claro
   - Endereço físico (obrigatório por lei)

**Para cada seção, inclua:**
- Código HTML inline (sem CSS externo)
- Hacks específicos para Outlook (conditional comments)
- Fallbacks para imagens bloqueadas
- Alt texts descritivos para acessibilidade
- Hierarquia tipográfica (font-family stacks seguros)

**Boas práticas adicionais:**
- Paleta de cores da marca: [COR PRIMÁRIA] e [COR SECUNDÁRIA]
- Peso máximo do email: 102KB (limite Gmail clipping)
- Ratio texto/imagem: mínimo 60/40
- Dark mode compatibility

Apresente o wireframe em ASCII art + trechos de código HTML para cada módulo.

Como usar este prompt

  1. 1Cole o prompt diretamente no ChatGPT, Claude, Gemini ou qualquer assistente de IA.
  2. 2Personalize os campos entre colchetes [assim] com suas informações específicas.
  3. 3Para melhores resultados, forneça contexto adicional sobre seu caso de uso.
  4. 4Combine múltiplos prompts em uma conversa para resultados mais completos.
  5. 5Salve os prompts que mais usa para acesso rápido no futuro.

Prompts relacionados

Ver todos

Explore outras categorias de prompts

Assine o AulasDeIA para desbloquear

Acesse 10.000+ prompts prontos para usar em qualquer profissão, além de todos os cursos da plataforma.

Assinar por R$ 49,90/mês

Cancele quando quiser. Sem multas.