Práticas recomendadas para estilizar emails em HTML [fechado]

Estou criando um modelo HTML para um boletim informativo por email. Aprendi que muitos clientes de email ignoram folhas de estilo vinculadas e muitos outros (incluindo o Gmail) ignoram completamente as declarações de bloco CSS. Os atributos de estilo embutido são minha única opção? Quais são as práticas recomendadas para estilizar emails em HTML?

O Campaign Monitor possui uma excelente matriz de suporte, detalhando o que é suportado e o que não está entre os vários clientes de correio.

Você pode usar um serviço como o Litmus para ver como um email aparece em vários clientes e se eles são capturados por filtros, etc.

Eu lutei a batalha de email em HTML antes. Aqui estão algumas das minhas dicas sobre estilo para obter a máxima compatibilidade entre clientes de email.

• Estilos inline você é o melhor amigo. Absolutamente não vincule folhas de estilo e não use uma <style>tag (o GMail, por exemplo, retira essa tag e todo o seu conteúdo).

• Contra seu melhor julgamento, use e abuse das tabelas . <div>s simplesmente não funciona (especialmente no Outlook).

• Não use imagens de fundo , elas são irregulares e o incomodam.

• Lembre-se de que alguns clientes de email transformam automaticamente hiperlinks digitados em links (se você não os ancorar <a>). Às vezes, isso pode causar efeitos negativos (por exemplo, se você estiver colocando um estilo em cada um dos hiperlinks para exibir uma cor diferente).

• Tenha cuidado ao vincular um link real a algo diferente. Por exemplo, não digite http://www.google.come depois vincule-o https://gmail.com/. Alguns clientes sinalizam a mensagem como spam ou lixo eletrônico.

• Salve suas imagens com o mínimo de cores possível para economizar no tamanho.

• Se possível, incorpore suas imagens no seu email. O email não precisará entrar em contato com um servidor da Web externo para fazer o download e eles não aparecerão como anexos ao email.

E, finalmente, teste, teste, teste ! Cada cliente de email faz as coisas de maneira diferente do que um navegador faria.

O chimpanzé de correio tem um artigo bastante interessante sobre o que não fazer. (Eu sei que parece errado o que você quer)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

Em geral, todas as coisas que você aprendeu e são práticas inadequadas para o design da web parecem ser a única opção para email em html.

O básico é:

• Tenha caminhos absolutos para imagens (por exemplo, https://stackoverflow.com/random-image.png )
• Use tabelas para o layout (nunca pensei que eu recomendaria isso!)
• Use estilos inline (e o CSS da velha escola também, no máximo 2.1, box-shadow não funcionará por exemplo;))

Basta testar o número de clientes de e-mail que puder usar ou usar o Litmus como alguém sugerido acima! (crédito para Jim)

EDIT:

O chimpanzé de correio fez um ótimo trabalho ao disponibilizar essa ferramenta para a comunidade.

Ele aplica suas classes CSS aos seus elementos html embutidos para você!

Além das respostas postadas aqui, leia este artigo:

http://24ways.org/2009/rock-solid-html-emails

O recurso para o qual sempre acabo voltando aos emails em HTML é o guia CSS do CampaignMonitor .

Como seus negócios são voltados exclusivamente à entrega de e-mail, eles sabem o que querem e todo mundo vai

- Receio que sim. Eu faria uma página HTML com uma folha de estilo e usaria o jQuery para aplicar a folha de estilo ao atributo de estilo de cada elemento. Algo assim:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

Em seguida, copie o DOM e use-o no email.

Acho que o mapeamento de imagens funciona muito bem. Se você tiver cabeçalhos ou rodapés que sejam imagens, aplique um bgcolor = "preencha o espaço em branco" porque o outlook na maioria dos casos não carrega a imagem e você fica com um cabeçalho transparente. Se pelo menos você designar uma cor que funcione com a sensação geral do email, será menos chocante para o usuário. Nunca tente usar folhas de estilo. Ou CSS! Apenas evite isso.

Dependendo se você estiver copiando conteúdo de uma palavra ou do Google Doc compartilhado, certifique-se de (comando + F) Encontre todos os (') e (") e substitua-os no seu software de edição (especialmente o dreemweaver), pois eles aparecerão como código e simplesmente não é bom.

ALT é seu melhor amigo. use a tag ALT para adicionar texto a todas as suas imagens. Porque as probabilidades são de que eles não vão carregar direito. E esse texto ALT é o que leva as pessoas a clicar no botão (ver imagens). Defina também as imagens Largura, Altura e faça com que a fronteira seja 0, para que você não tenha linhas estranhas ao redor da imagem.

Considere editar todas as imagens no Photoshop com uma borda de 15px de cada lado (torne o plano de fundo transparente e salve como PNG 24) da imagem. Às vezes, os clientes de email não leem nenhum estilo de preenchimento aplicado às imagens, evitando assim qualquer forma estranha!

Também achei a linha nos links particularmente irritante, se você aplicar <style = "text-decoration: none; color: #qualquer cor que você quiser aqui!" > ele removerá a linha e fornecerá a aparência desejada.

Há muita coisa que realmente pode mexer com a aparência geral.