Canais: Como criar um e-mail responsivo e compatível com Apple Mail

Criada por Mariana Benites, Modificado em Qua, 13 Mai na (o) 4:28 PM por Brenda Souza

Criar e-mails responsivos é essencial para garantir que sua mensagem seja exibida corretamente em qualquer dispositivo. 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.

Nível de Acesso: Administrador, Administrador de Dados, Editor
Persona: Desenvolvedor Front-end, Profissional de Marketing, Designer

E-mail: Como criar um e-mail responsivo e compatível com Apple Mail

Dicas essenciais para um e-mail responsivo

1. 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">

2. Prefira tabelas (tables) ao invés de divs
E-mails HTML ainda são renderizados com base em tabelas para garantir compatibilidade entre clientes como Apple Mail, Outlook e Gmail.

3. Centralize o conteúdo com a tag <center> e o atributo align="center"
O uso da tag <center> ainda é necessário em muitos clientes antigos para garantir o alinhamento central.

4. Combine max-width 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.

5. Evite margens e larguras fixas
Prefira porcentagens e unidades flexíveis como width="100%" para evitar que o layout fique “espremido” ou desalinhado.

Exemplo de código pronto para uso

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;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 <strong>Apple Mail</strong>.
                </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;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;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;font-size:16px;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>

FAQ – Perguntas Frequentes

1. Pergunta: Como garantir que um e-mail HTML seja responsivo em qualquer dispositivo?
Resposta: O artigo ensina como adaptar o layout para diferentes tamanhos de tela, especialmente em celulares.

2. Pergunta: Por que usar tabelas em vez de divs na criação de e-mails?
Resposta: Porque clientes de e-mail como Apple Mail, Outlook e Gmail ainda renderizam melhor com tabelas.

3. Pergunta: Qual a importância da tag <meta name="viewport"> nos e-mails?
Resposta: Ela é essencial para que o e-mail se ajuste corretamente em dispositivos móveis.

4. Pergunta: Como centralizar conteúdo de forma compatível com clientes antigos?
Resposta: Usando a tag <center> e o atributo align="center".

5. Pergunta: Qual a melhor maneira de definir larguras e margens em e-mails?
Resposta: Usando width: 100% com max-width e evitando valores fixos.

6. Pergunta: Existe um modelo de e-mail responsivo pronto para usar?
Resposta: Sim! O artigo fornece um exemplo validado, compatível com Apple Mail, e pronto para copiar e colar.

Ficou com alguma dúvida ou identificou algum problema? Acione nosso time pelo chat disponível no app dito. (Horário de Atendimento de Segunda a Sexta das 9hrs as 18hrs)

e-mail responsivo, HTML para e-mail, Apple Mail, layout de e-mail, compatibilidade de e-mail, Outlook, Gmail, template de e-mail, código e-mail, meta tag viewport, e-mail para celular, e-mail marketing, como fazer email responsivo, código pronto email, email quebra no iphone, arrumar email apple mail. Como fazer email funcionar no Apple Mail? Meu email está quebrado no celular, o que fazer? Template HTML de email que funciona. Por que meu email não centraliza no Outlook? Código pronto para email marketing.