Melhores práticas para estilizar e-mails HTML [fechado]
7 answers
O Monitor de campanha tem uma excelente matriz de suportedetalhando o que é suportado e o que não está entre vários clientes de E-mail.
Pode usar um serviço como Litmus para ver como aparece um e-mail entre vários clientes e se são apanhados por filtros, etc.
Inline styles és o teu melhor amigo. Absolutamente não ligue folhas de estilo e não use uma tag
<style>
(GMail, por exemplo, tira essa tag e todo o seu conteúdo).Contra o seu bom senso, tabelas de utilização e abuso . O s não o corta. Perspectiva).
Não uses imagens de fundo, elas são manchadas e vão irritar-te.
Lembre-se que alguns clientes de E-mail irão automaticamente transformar hiperligações digitadas em links (se você mesmo não anotar
<a>
). Isto pode às vezes alcançar efeitos negativos (digamos se você está colocando um estilo em cada um dos hiperlinks para parecer uma cor diferente).Tenha cuidado ao ligar uma ligação real com algo diferente. Por exemplo, não digite
http://www.google.com
e depois ligue - o ahttps://gmail.com/
. Alguns clientes marcarão a mensagem como Spam ou Lixo.Grava as suas imagens como poucas cores possíveis para gravar o tamanho.
Se possível, insira as suas imagens no seu e-mail. O e-mail não terá que chegar a um servidor Web externo para baixá-los e eles não vão aparecer como anexos ao E-mail.
E, por último, teste, teste, teste! Cada cliente de E-Mail faz coisas muito diferente do que um navegador faria.
Http://kb.mailchimp.com/article/common-html-email-coding-mistakes
Em geral, todas as coisas que você aprendeu que são uma má prática para web design parecem ser a única opção para html email.
O básico são:
- tem caminhos absolutos para as imagens (exemplo. https://stackoverflow.com/random-image.png)
- usar tabelas para a disposição (nunca pensei Eu recomendaria isso!)
- usar estilos incorporados (e css da velha escola também, no máximo 2,1, box-shadow não funcionará, por exemplo;) ([15]}
Basta testar em quantos clientes de E-mail você pode obter suas mãos, ou usar Litmus como alguém sugeriu acima! (Crédito ao Jim)
Editar:
O chimpanzé do correio fez um grande trabalho ao colocar esta ferramenta disponível para comunidade.
Aplica as suas classes de CSS à sua linha de elementos html para si!
Além das respostas aqui publicadas, certifique-se que lê este artigo:
O recurso que acabo sempre por voltar aos e-mails HTML é o guia CSS do CampaignMonitor .
Como o seu negócio está orientado apenas para a entrega de E-mails, eles sabem das suas coisas, bem como qualquer um vai para a ...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]);
});
}
Então copie o DOM e use isso no e-mail.
Dependendo se estiver a copiar conteúdo de uma palavra ou compartilhado google Doc certifique-se de (comando+F) encontrar todos os (') e (") e substituí-los dentro de seu software de edição (especialmente dreemweaver), porque eles vão aparecer como código e simplesmente não é bom.
A ALT é a tua melhor amiga. use a etiqueta ALT para adicionar em texto a todas as suas imagens. Porque as probabilidades são que eles não vão carregar direito. E esse texto ALT é o que leva as pessoas a clicar no botão (Veja imagens). Defina também a largura, a altura das suas imagens e faça com que o hóspede seja 0 para que você não fiques com frases estranhas à tua imagem.Considere editar todas as imagens no Photoshop com um varredor de 15px de cada lado (tornar o fundo transparente e gravar como um PNG 24) da imagem. Às vezes, os clientes de E-mail não ler Nenhum Estilo de preenchimento que você aplica às imagens para que ele evite qualquer formatação estranha!
Também achei a linha por baixo das ligações particularmente irritante, por isso, se aplicar irá remover a linha e dar - te o olhar desejado.
Há muita coisa que pode mexer com todo o aspecto e sensação.