Por que os e-mails renderizam de forma diferente no Outlook

Você deve ter notado que os e-mails da SharpSpring podem, eventualmente, aparecer com layout diferente no Outlook, quando comparado com outros serviços de e-mail - Gmail, Apple Mail, entre outros. Quando se trata de carregamento de e-mails, todo serviço de e-mail possui uma abordagem específica, baseada em seus próprios padrões. Este artigo fornece informações sobre o carregamento de e-mails no Outlook.

Sobre a renderização HTML no Microsoft Outlook

A SharpSpring não tem controle sobre o modo como o Outlook ou outros serviços de e-mail carregam os e-mails HTML. Tendo isso em vista, a SharpSpring possui uma ferramenta (paga) chamada Litmus Test, dentro do editor de e-mail, que permite que você veja como os seus e-mails aparecerão no Outlook e em outros serviços. Enquanto seus e-mail podem parecer perfeitos no Gmail, em outros serviços podem aparecer de forma irregular.

As versões do Microsoft Outlook 2007, 2010 e 2013 utilizam o Microsoft Word para renderizar o HTML de seus e-mails. Isso faz com que a formatação de e-mails seja carregada de forma diferente que no Gmail, por exemplo, pois o Microsoft Word é feito para print design e não para HTML. Essas versões do Microsoft Outlook não suportam o seguinte:

• Botões

• Imagens centralizadas

• Fontes incorporadas

• Preenchimento/espaçamento

• Altura de linha

Para maiores informações acerca das inconsistências na renderização de e-mails entre as diferentes plataformas, confira o artigo Email Standards Project (em inglês).

Importante: a Microsoft não suporta mais o Outlook 2007. Assim, a SharpSpring não garante que os templates de e-mail e os e-mails criados no editor de e-mail sejam carregados de forma correta nessa versão. Além disso, devido à forma como o Outlook renderiza seus e-mails, os templates com layout de duas colunas (com imagem e texto) aparecem invertidos ao serem recebidos pelos leads.

E-mails Legados: acessando o HTML do e-mail

Para que os e-mails sejam renderizados de forma adequada no Outlook, você precisará editar o HTML do e-mail criado na SharpSpring:

Para acessar o HTML de um e-mail, faça o seguinte:

1. Na barra de ferramentas superior da SharpSpring, clique em Conteúdo > E-mails.

2. Crie um novo e-mail, ou edite um já existente.

3. No editor de e-mail, clique em visualizar código.

Nota: isto serve somente para os e-mails legados (legacy). Não precisa ser feito em e-mails simples ou designer.

E-mails Legados: adicionando botões via HTML

Para adicionar um botão, você precisará mexer no HTML. O seguinte código é um exemplo de HTML de um botão. Copie e cole ele onde você quer que o botão apareça no e-mail:

 <div class="editable" data-editable="standard">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <a href="www.sharpspring.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #EB7035; border-top: 12px solid #EB7035; border-bottom: 12px solid #EB7035; border-right: 18px solid #EB7035; border-left: 18px solid #EB7035; display: inline-block;">

Click Here!

</a>
      
      </table>
    </td>
  </tr>
</table></div>

Ao usar este código, considere o seguinte quando for adicionar botões:

• Ajuste os códigos hex e os atributos de fonte na seção a href do código, a fim de ajustar a aparência do botão.

• Substitua o www.sharpspring.com pelo o link que você deseja usar no botão.

• Substitua o Click Here! pelo texto que você gostaria que apareça dentro do botão.

Nota: isto serve somente para os e-mails legados (legacy). Não precisa ser feito em e-mails simples ou designer.

E-mails Legados: centralizando imagens via HTML

Centralizar uma imagem no editor de e-mail nem sempre resulta na correta renderização por parte do Outlook.

Para garantir que as suas imagens sejam centralizadas, envolva as suas imagens com uma das seguintes tags:

<center><img src="http://www.sharpspring.com/test.jpg"></center>

ou

<p style="text-align: center;"><img src="http://www.sharpspring.com/test.jpg"></p>

Nota: isto serve somente para os e-mails legados (legacy). Não precisa ser feito em e-mails simples ou designer.

E-mails Legados: adicionando quebras de página

Se o seu e-mail exceder 1800 pixels, o Outlook automaticamente criará uma quebra de página para você. Essa quebra pode afetar como o seu e-mail é lido pelos seus leads. Assim, é chave controlar como a quebra de página ocorre. Para criar uma quebra de página, faça o seguinte:

1. Em seu e-mail, posicione o mouse onde deseja a quebra de página.

2. No Editor de Conteúdo, clique em + Inserir > Quebra de Página.

Nota: isto serve somente para os e-mails legados (legacy). Não precisa ser feito em e-mails simples ou designer.

E-mails Legados: ajustando o espaçamento e o preenchimento

Se você possui uma imagem e um parágrafo próximos um do outro, o espaçamento entre os dois elementos pode ser renderizado de forma diferente no Outlook. Para adicionar espaço complementar entre dois conteúdos diferentes, você deve criar uma tabela de três colunas, sendo a coluna do meio o espaço entre as outras duas.

Para criar tal tabela, faça o seguinte:

1. Em seu e-mail, posicione o mouse onde deseja a tabela.

2. No Editor de Conteúdo, clique em Tabela.

3. Na grade de dimensões que aparecer, selecione três colunas e quantas linhas forem necessárias.

4. Na tabela que aparece, ajuste o tamanho geral dela.

5. Na tabela, adicione conteúdo nas células da esquerda e da direita.

6. Ajuste a largura da célula do centro, para modificar o espaçamento entre os conteúdos.

Nota: as tabelas estão disponíveis apenas em e-mails legados (legacy). Não precisa ser feito em e-mails simples ou designer.

Enfatizando Fontes Incorporadas

O Outlook, frequentemente, substituirá a sua fonte pela Times New Roman, ou por alguma outra fonte padrão. Caso esteja utilizando uma fonte personalizada, uma tag  !important  no final da lista de fontes é essencial.

O posicionamento da tag deve ficar da seguinte maneira:

<style>
    body {
      font-family: Georgia, serif !important;
    }
</style>
<br><br><br><br><br>

Modificando a Altura da Linha

As versões mais antigas do Outlook não suportam a altura de linha designada sem uma porcentagem. 

Você precisa declarar uma altura de linha como uma porcentagem, para que o Outlook respeite o espaçamento entre os textos.

Correto: mso-line-height-rule: exactly;line-height:110%;

Incorreto: line-height:13px