Criar e-mails responsivos é essencial para garantir que sua mensagem seja exibida corretamente
Neste artigo, vamos mostrar os principais cuidados e boas práticas para garantir a responsividade dos seus e-mails, com foco na compatibilidade com Apple Mail e outros clientes populares.
✅ Dicas essenciais para um e-mail responsivo
Use a meta tag viewport
Ela define como o e-mail deve se comportar em dispositivos móveis.
Sem ela, o conteúdo pode aparecer pequeno ou quebrado.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Evite divs e prefira tables
E-mails HTML ainda são renderizados com base em tabelas para garantir compatibilidade entre clientes como Apple Mail, Outlook e Gmail.
Centralize o conteúdo com <center> e align="center"
O uso da tag <center> ainda é necessário em muitos clientes antigos para garantir alinhamento central.
Use max-width junto com width: 100%
Essa combinação permite limitar a largura em telas grandes e garantir que o conteúdo se expanda corretamente em telas pequenas.
Evite margens e larguras fixas
Prefira porcentagens e unidades flexíveis como width="100%" para evitar que o layout fique “espremido” ou desalinhado.
? Exemplo pronto para copiar e colar
Você pode usar o HTML abaixo como base. Ele já está pronto, validado e funcionando perfeitamente no Apple Mail.
Código HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<!-- ESSENCIAL: A tag viewport garante que o e-mail seja escalado corretamente em dispositivos móveis -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Responsivo</title>
</head>
<body style="Margin:0;padding:0;background-color:#f2f2f2;">
<!-- ESSENCIAL: usar <center> garante centralização em clientes antigos (ex: Outlook) -->
<center style="width:100%;background-color:#f2f2f2;">
<!-- ENVOLVENDO TODA A ESTRUTURA: largura total para garantir que o e-mail ocupe toda a tela -->
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td align="center">
<!-- CONTAINER PRINCIPAL: max-width limita a largura em telas grandes e garante expansão em telas pequenas -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;background-color:#ffffff;" role="presentation">
<tr>
<td style="padding:20px;text-align:center;">
<!-- LOGO: largura em % e display:block para adaptar ao tamanho do container -->
<img src="https://carreiras.dito.com.br/images/logo.svg" alt="Logo Dito"
style="max-width:200px;width:100%;height:auto;display:block;margin:0 auto;">
<p style="font-family:Arial, sans-serif;font-size:16px;color:#333333;line-height:1.5;margin:20px 0 0;">
Olá! Este é um exemplo de e-mail totalmente responsivo e centralizado e que funciona no <b>Apple Mail</b>.
</p>
<!-- BOTÃO: feito com tabela para compatibilidade total entre clientes -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin:30px auto 0;">
<tr>
<td align="center" bgcolor="#007BFF" style="border-radius:4px;">
<a href="#" style="font-family:Arial, sans-serif;font-size:16px;color:#ffffff;text-decoration:none;padding:12px 24px;display:inline-block;">
Clique aqui
</a>
</td>
</tr>
</table>
<!-- ASSINATURA -->
<p style="font-family:Arial, sans-serif;font-size:16px;color:#333333;line-height:1.5;margin:30px 0 0;">
Abraços,<br><strong>Equipe Dito</strong>
</p>
<!-- DESCADASTRO: link com estilo consistente -->
<p style="font-family:Arial, sans-serif;font-size:14px;color:#999999;margin:16px 0 0;">
Caso queira cancelar nossos e-mails,
<a href="[unsubscribe]" style="color:#007BFF;text-decoration:underline;">clique aqui</a>.
</p>
</td>
</tr>
</table>
<!-- /CONTAINER PRINCIPAL -->
</Td>
</tr>
</table>
<!-- /WRAPPER -->
</center>
</body>
</html>
❓ O que esse artigo responde?
Como garantir que um e-mail HTML seja responsivo em qualquer dispositivo?
→ O artigo ensina como adaptar o layout para diferentes tamanhos de tela, especialmente em celulares.Por que usar tabelas em vez de divs na criação de e-mails?
→ Porque clientes de e-mail como Apple Mail, Outlook e Gmail ainda renderizam melhor com tabelas.Qual a importância da tag
<meta name="viewport">nos e-mails?
→ Ela é essencial para que o e-mail se ajuste corretamente em dispositivos móveis.Como centralizar conteúdo de forma compatível com clientes antigos?
→ Usando a tag<center>e o atributoalign="center".Qual a melhor maneira de definir larguras e margens em e-mails?
→ Usandowidth: 100%commax-widthe evitando valores fixos.Existe um modelo de e-mail responsivo pronto para usar?
→ Sim! O artigo fornece um exemplo validado, compatível com Apple Mail, e pronto para copiar e colar.
? Caso de uso do artigo:
O artigo é voltado para profissionais de marketing, desenvolvedores front-end ou designers que precisam criar e-mails HTML que funcionem bem em todos os dispositivos, especialmente em clientes de e-mail como o Apple Mail.
Ele é útil quando:
? Você está criando uma campanha de e-mail marketing e precisa garantir que ela fique bonita tanto no desktop quanto no celular.
?️ Você quer evitar quebras de layout ou elementos desalinhados nos principais apps de e-mail (Apple Mail, Gmail, Outlook...).
? Sua empresa quer melhorar a taxa de leitura e conversão dos e-mails, oferecendo uma boa experiência para todos os usuários.
? Você precisa de um modelo base de e-mail responsivo já testado e pronto pra usar.
Este artigo foi útil?
Que bom!
Obrigado pelo seu feedback
Desculpe! Não conseguimos ajudar você
Obrigado pelo seu feedback
Feedback enviado
Agradecemos seu esforço e tentaremos corrigir o artigo