Cor de fundo do corpo que não funciona para a newsletter de E-mail

Estou a trabalhar num boletim de correio electrónico. Tudo o resto está no lugar e funcionando bem, exceto a cor de fundo do corpo, ou é a largura do corpo a 100% que não está funcionando.

Alguma ideia do que fiz de errado aqui, ou como posso fazê-lo funcionar?

URL da minha newsletter: https://dl.dropboxusercontent.com/u/29654441/Accessibility/New%20folder/newsletter_issue1/newsletter_inline.html

Author: dakab, 2014-05-14
Source

5 answers

O elemento corporal é ignorado pela maioria dos clientes de E-mail. Se você precisar de um fundo, você terá que fazer um elemento de contêiner e adicionar o fundo a isso.

 8
Author: GolezTrol, 2014-05-14 09:33:31

Tenta usar isto: 

<body bgcolor="#efefef" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
              <td width="650" valign="top" align="center" bgcolor="#efefef">
                  ....
              </td>
        </tr>
    </table>
</body>

A marca é agora a sua embalagem para o modelo de E-mail. Como alguns clientes de E-mail removem a tag body, você então tem uma tabela de 100% para cair para trás para que todos os clientes suportam.

Eu também sugeriria a utilização do seguinte na sua etiqueta <head>: 

<style type="text/css">
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
    .ExternalClass {width:100%;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
</style>

Isto faz o seguinte apenas como alguns extras:

  • impedir as plataformas Webkit e Windows Mobile de alterar os tamanhos de letra predefinidos, sem quebrar o desenho do ecrã.
  • forçar o Hotmail a mostrar os e-mails em toda a largura.
  • forçar o Hotmail a mostrar o espaçamento normal das linhas.
 5
Author: Lodder, 2014-05-14 09:42:23

A largura corporal deve ser, idealmente, de 640, uma vez que a maioria dos telemóveis e comprimidos irá redimensionar o e-mail correctamente nessa altura.

 1
Author: indofraiser, 2014-05-14 09:42:20
Cada cliente de E-mail lida com as coisas de forma diferente, por isso alguns tiram o corpo, outros não. Eu faria algumas alterações no teu código. Em primeiro lugar, utilizar em vez de . Embora o div trabalhe na maioria dos clientes, você terá uma maior flexibilidade com as tabelas, pois elas serão redimensionadas com base no tamanho a ser visto. Embrulhe tudo numa única tabela de células e aplique a cor de fundo a esse elemento. Finalmente precisas de fazer alguns testes em telemóveis, pois eles só têm uma largura de 460px em média a sua largura máxima deve ser de 760px, não 860px. O seu e-mail não apareceria num iPad de retrato, por exemplo.

Http://putsmail.com/ é muito útil para testes.

 1
Author: PeteAUK, 2014-05-14 09:42:21

O elemento do corpo nem sempre é ignorado (particularmente no Outlook), no entanto, você também deve emparelhá-lo com uma tabela de largura completa como um recuo. Isso também faz um bom método para ter a cor de fundo de encaminhamento permanecer branco, enquanto o fundo da área html permanece algo mais.

Aqui está uma configuração básica com isto em mente: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    /* Client-specific Styles */
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
    table td {border-collapse: collapse;}
  </style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#FFFFFF" style="padding:30px;">
      Content here
    </td>
  </tr>
</table>

</td></tr></table></td></tr></table></body></html>

Numa nota lateral, se quiser uma imagem backgorund, existem 2 métodos no email html. Veja esta resposta para mais detalhes.

 1
Author: John, 2017-05-23 11:52:52