O Gmail é apenas um cliente, existem vários como Thunderbird (Desktop), outlook.com (web), mail.yahoo.com (web) e cada sistema de email pode renderizar de uma forma, uma das maiores dores de cabeça dos desenvolvedores sem duvidas é o Outlook para Desktop.
Alguns detalhes importantes para obter uma melhor compatibilidade entre os clientes de e-mail:
É necessário usar estilos inline, assim:
<div style="color: #fc0;">Exemplo</div>
No Outlook para desktop mesmo na versão mais recente não reconhece HTML5, então as tags devem ser as mesmas do HTML4.01, portanto ao invés de tags como section
use somente <div>
, <span>
No outlook também é necessário declarar o DOCTYPE para HTML4 como:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
ou:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Lembre-se, para que ele funcione não pode haver nenhum tipo de espaço antes dele, nem quebras de linhas.
Ainda no Outlook para Desktop é necessário eventualmente usar a tag <meta http-equiv="X-UA-Compatible" content="IE=edge">
para melhor compatibilidade, já que ele usa o mesmo motor de renderização do HTML
Emails as vezes desabilitam propriedades CSS como position:;
, então preferencialmente nunca faça seus layouts baseados nisto
Não use propriedades CSS3 avançadas para criar algum efeito especifico, é provável que não funcione em todos clientes de email
Teste em todos cliente de email possíveis e se ainda tiver problemas, mesmo não sendo o indicado use sim tabelas.
Alguns detalhes:
Tabelas e HTML5 não são duas coisas diferentes, sites feitos em HTML4 não são feitos em tabelas, na verdade tabelas era uma maneira de fazer layouts um "pouco errada" desde o começo, o objetivo delas é serem usadas para dados tabulares, tanto no HTML4 quanto no HTML5.
HTML5 somente inseriu tags e atributos novos e removeram outras e uma maneira mais simplificada e "unificada" de se criar HTML, antes tínhamos vários DOCTYPES e ainda tínhamos o XHTML, agora é praticamente tudo uma coisa só. Hoje o HTML5 suporta várias coisas (para não dizer tudo) que o XHTML suportava, basicamente ele pode ser HTML ou XHTML, bastando ajustar o content-type
Dicas extras
- Não use
<link href="http://...">
, estilos externos serão bloqueados
- Não use
<script>
, isto não funciona de maneira alguma
Crie uma versão alternativa da mensagem em formato de texto, isto ajuda leitores de email mais obsoletos que não conseguem ler html ou as vezes servem de "fallback", PHPMailer
e System.Net.Mail
já fazem isto (creio eu), manualmente a estrutura seria algo como:
Mime-Version: 1.0
Date: Sat, 03 Dec 2016 12:46:10 +0000
Content-Type: multipart/mixed;
boundary="----=MAIN"
Subject: teste
------=MAIN
Content-Type: multipart/alternative;
boundary="----=INNER"
------=INNER
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 7bit
Olá, mundo!
------=INNER
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 7bit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div style="color: #fc0;">
Olá, <strong>mundo</strong>!
</div>
</body>
</html>
------=MAIN--