Por que os E-mails Apresentam Renderizações Diferentes no Microsoft Outlook

Quando se trata de renderização de e-mails, cada cliente de e-mail tem uma abordagem diferente com base em seus próprios padrões únicos.

Este artigo fornecerá informações sobre a renderização de e-mails no Microsoft Outlook.

---

Conteúdo do Artigo

• Sobre Problemas de Renderização com Microsoft Outlook 2016 e 2019
• Sobre Valores de Border-Radius para Botões
• E-mails Legados: Acessando o HTML do E-mail
• E-mails Legados: Adicionando Botões via HTML
• E-mails Legados: Centralizando Imagens via HTML
• E-mails Legados: Colocando Quebras de Página e Padding
• Enfatizando Fontes Embutidas
• Modificando a Altura da Linha
• Sobre Renderização Consistente

Disponível com:

Teste	✓
Essencial	✓
Avançado	✓
Ultimate	✓

Barra de Ferramentas:

E-mail

 

Usuários:

Administradores	✓
Gerentes de Empresa	✓
Gerentes de Marketing	✓
Gerentes de Vendas
Vendedores
Vendedores Jr.

Sobre Problemas de Renderização com Microsoft Outlook 2016 e 2019

O Lead Gen & CRM não pode influenciar como os clientes de e-mail renderizam e-mails HTML. O Lead Gen & CRM possui um recurso de Teste Litmus integrado ao designer de e-mail que permite que você veja como seus e-mails aparecem em diferentes clientes de e-mail.

Isso ocorre porque os clientes de e-mail não renderizam e-mails HTML da mesma forma, entre outras razões. Pode haver momentos em que seus e-mails variam entre os clientes de e-mail. Por exemplo, eles podem parecer ótimos no Gmail, mas aparecer distorcidos no Microsoft Outlook. 

O Microsoft Outlook não renderiza corretamente as imagens dos e-mails em alguns momentos. E-mails criados no Lead Gen & CRM exibirão imagens de fundo estáticas regulares para Outlook 2016 e 2019. No entanto, devido a essas limitações de renderização por parte do Microsoft Outlook, o conteúdo dinâmico em seções com imagens de fundo não será renderizado corretamente. 

Isso significa que os layouts de e-mail do Lead Gen & CRM que contêm conteúdo dinâmico não renderizarão imagens de fundo no Outlook 2016 ou Outlook 2019, mas renderizarão corretamente de outra forma.

Sobre Valores de Border-Radius para Botões

O Microsoft Outlook tem problemas com a renderização de botões. No passado, botões com um valor de border-radius modificado não eram renderizados em e-mails no Microsoft Outlook. Isso significava que os e-mails no Microsoft Outlook seriam renderizados com botões quadrados, independentemente do tempo investido em modificá-los. No final, isso se deve às dificuldades do Microsoft Outlook em renderizar CSS.

O Microsoft Outlook agora pode renderizar botões com um valor de border-radius modificado, mas há um porém: botões em layouts com imagens de fundo não renderizarão border-radius. Para renderizar border-radius e manter os problemas de renderização ao mínimo ao usar botões no Microsoft Outlook, certifique-se de que eles estejam em layouts sem imagens de fundo.
 

E-mails Legados: Acessando o HTML do E-mail

Para que os e-mails sejam renderizados corretamente no Microsoft Outlook, você precisará editar o HTML de um e-mail criado no Lead Gen & CRM. 

Para acessar o HTML de um e-mail crie um novo e-mail ou edite um existente na página E-mail  na barra lateral esquerda. 

Clique   Opções >    visualizar código no designer de e-mail.

E-mails Legados: Adicionando Botões via HTML

Para adicionar um botão, você precisará criar o HTML. O seguinte código é um exemplo do HTML de um botão. Copie e cole o seguinte código onde você gostaria que o botão aparecesse no e-mail:
 

<div  data-editable="standard">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <a href="www.mywebsite.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:#EB7035; border-top: 12px solid #EB7035; border-bottom: 12px solid #EB7035; border-right: 18px solid #EB7035; border-left: 18px solid #EB7035; display: inline-block;">

Clique Aqui!

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

Ao usar o código anterior, considere o seguinte ao adicionar botões:

• Ajuste os códigos hexadecimais e os atributos de fonte na seção a href do código para ajustar a aparência do botão.
   
• Substitua www.mywebsite.com pelo link que você gostaria de usar para o botão.
   
• Substitua Clique Aqui! pelo texto que você gostaria que aparecesse dentro do botão.

E-mails Legados: Centralizando Imagens via HTML

Centralizar uma imagem no designer de e-mail nem sempre se traduz quando renderizando no Microsoft Outlook.

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

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

E-mails Legados: Colocando Quebras de Página e Padding

Se seu e-mail exceder 1800 pixels, o Microsoft Outlook criará automaticamente uma quebra de página para você. Essa quebra de página pode afetar como seu e-mail é lido pelos seus leads. Portanto, controlar onde a quebra de página ocorre é fundamental. 

Para criar uma quebra de página, faça o seguinte:

1. Coloque o cursor onde você deseja a quebra de página no seu e-mail.
2. Clique em + Inserir > Quebra de Página na barra de ferramentas do Editor de Conteúdo.

E-mails Legados: Ajustando Espaçamento e Padding

Se você tiver uma imagem e um parágrafo lado a lado, o espaçamento entre os dois elementos pode ser renderizado de forma diferente no Microsoft Outlook do que em outros clientes de e-mail. Para adicionar um espaçamento adicional entre duas partes de conteúdo, 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. Coloque o cursor onde você deseja a tabela no seu e-mail.
2. Clique    Tabela na barra de ferramentas do Editor de Conteúdo.
3. Selecione três colunas e quantas linhas forem necessárias na grade de dimensões que aparece.
4. Ajuste o tamanho geral da tabela na tabela que aparece.
5. Adicione conteúdo às células da esquerda e da direita na tabela.
6. Ajuste a largura da célula central para modificar o espaçamento entre o conteúdo.

Enfatizando Fontes Embutidas

O Microsoft Outlook frequentemente substituirá sua fonte por Times New Roman ou outra fonte padrão. Se você estiver usando uma fonte personalizada, uma tag !important no final da lista de fontes é essencial.

A colocação da tag deve parecer semelhante ao seguinte código:

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

Modificando a Altura da Linha

Versões mais antigas do Microsoft Outlook não suportam altura de linha designada sem uma porcentagem. Você precisa declarar uma altura de linha como uma porcentagem para que o Microsoft Outlook respeite o espaçamento entre o texto.

Sobre Renderização Consistente

Mantenha estas melhores práticas em mente ao projetar e-mails para Outlook no Lead Gen & CRM:

• Use um modelo do Lead Gen & CRM. Todos os modelos de e-mail do Lead Gen & CRM foram projetados para parecer ótimos na maioria dos clientes de e-mail comuns.
   
• Use fontes “seguras para a web” em seu e-mail. Algumas das fontes padrão seguras para usar em páginas da web e e-mails são Helvetica, Arial e Courier New.
   
• Teste minuciosamente. Abra seu e-mail em vários clientes de e-mail para garantir que ele pareça como você deseja, ou considere usar uma ferramenta como Litmus para testar o e-mail em todos os principais clientes.
   
• Não confie em imagens para transmitir sua mensagem. Muitos dos clientes de e-mail de hoje não renderizam imagens por padrão. Se você está contando com leads para clicar em um link de imagem para acessar seu site, você pode estar sem sorte.