Melhores práticas para estilizar e-mails HTML [fechado]

Já lutei na batalha do E-mail HTML antes. Aqui estão algumas das minhas dicas sobre estilo para máxima compatibilidade entre os clientes de E-mail.

• 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 a https://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.

O chimpanzé do correio tem um belo artigo sobre o que não fazer. (Eu sei que parece o caminho errado para o que você quer)

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:

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

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

Receio que sim. Eu faria uma página HTML com uma folha de estilo, em seguida, usar jQuery para aplicar a stylesheet para o estilo attr de cada elemento. Algo do género:

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.

Acho que o mapeamento de imagens funciona muito bem. Se tiver alguns cabeçalhos ou rodapés que sejam imagens certifique-se de que aplica um bgcolor="preencha o espaço em branco" porque o outlook, na maioria dos casos, não irá carregar a imagem e ficará com um cabeçalho transparente. Se você pelo menos designar uma cor que funciona com a sensação geral do email será menos de um choque para o usuário. Nunca tente usar folhas de estilo. Ou CSS de todo! Evita-o.

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.