Embora nossos modelos sejam projetados para serem renderizados corretamente em todos os clientes de email, alguns problemas comuns de exibição de campanha podem surgir quando um inscrito visualiza um email HTML no Outlook, especialmente nas versões 2007, 2010 ou 2013. Isso ocorre porque essas três versões do Outlook usam o Microsoft Word para renderizar emails que oferecem suporte limitado a HTML e CSS.
Este artigo discutirá problemas comuns de exibição que os usuários enfrentaram com o Outlook e nossas recomendações para solucionar esses problemas.
As margens não são exibidas
Nenhuma das versões do Outlook (exceto Outlook.com) e do Gmail oferece suporte a margens. Em vez disso, recomendamos usar o bloco de conteúdo do espaçador:
Você também pode tentar usar padding para criar espaço ao redor de seus blocos de conteúdo.
O padding é compatível com todas as versões do Outlook e outros provedores de serviços de email populares. Você pode adicionar padding a um bloco de conteúdo selecionando o contêiner ou a estrutura no editor de emails e ajustando o padding no menu à direita. No entanto, o padding pode fazer com que seu conteúdo pareça estreito quando visualizado em um dispositivo móvel.
A altura da linha não é suportada de forma consistente
O Outlook 2007, 2010, 2013 e Office 365 não dão suporte consistente à altura da linha. Algumas versões do Outlook dão suporte ao valor percentual da altura da linha (por exemplo, 140%), enquanto outras dão suporte a um número inteiro (por exemplo, 4). Recomendamos fornecer ambos os valores se você estiver criando um email do zero e escrevendo seu próprio CSS. Se você estiver usando o editor de emails de arrastar e soltar, isso será definido automaticamente para você.
As imagens aparecem distorcidas
O Outlook não reduzirá verticalmente imagens com 1.000 pixels ou mais de largura. Em vez disso, a imagem será exibida em seu tamanho real, fazendo com que a largura do seu modelo se expanda e fique distorcida. Recomendamos o uso de imagens com largura entre 400 e 650 pixels.
Observe que, no editor, as imagens são dimensionadas automaticamente para 1300 pixels de largura. Isso é no máximo o dobro da largura do email, que tem 650 pixels de largura.
Saiba mais sobre como adicionar imagens às suas campanhas.
GIFs aparecem como imagens planas
Há suporte para GIFs animados no cliente da área de trabalho do Outlook 365, nos aplicativos móveis do Outlook e no Outlook.com.
O Outlook 2007, 2010 e 2013 não mostrará animações. Em vez disso, eles mostrarão apenas o primeiro quadro. Se o seu GIF tiver uma oferta, título ou call to action, certifique-se de que ele esteja incluído nesse quadro. Para obter instruções sobre como adicionar um GIF ao seu email, clique aqui.
Botões duplicados
Serviços de email como Gmail, Apple Mail e Yahoo renderizam o estilo do botão usando CSS e HTML padrão. Como o Outlook não o faz, fornecemos uma correção para que o Outlook renderize o raio da borda, o padding e as bordas ao redor do botão corretamente.
No entanto, depois que um email é encaminhado por um inscrito que clica no botão Encaminhar em seu provedor de serviços de email, ou se o email é redirecionado por meio de um servidor Windows ou Exchange, essa correção será lida como um elemento HTML válido, resultando em um botão duplicado.
Infelizmente, não há uma correção para evitar que isso aconteça. Para contornar isso, você pode criar uma imagem de um botão e enviá-la para o seu email como qualquer outra imagem. Em seguida, você pode adicionar seu link para que, quando os contatos clicarem nessa imagem, eles sejam redirecionados para a URL de sua preferência.
Editor de emails: botões no Outlook
No Editor de emails (lançado em 2022), o botão "Suporte do Outlook" permite melhorar os botões exibidos no Outlook, inserindo um elemento especial de código VML. O botão "Suporte do Outlook" será alternado para "Ativado" por padrão.
Editor de emails e HTML: a imagem de fundo não é exibida
As imagens de fundo não exibidas são um problema comum com muitos provedores de email diferentes. Recomendamos que você forneça uma cor alternativa caso seu email seja exibido em uma versão do Outlook que não ofereça suporte a imagens de plano de fundo.
Isso se aplica se você criar um email com seu HTML e o Editor de emails (lançado em 2022). Observe que, ao usar o Editor de Emails (lançado em 2022), você pode adicionar uma imagem de plano de fundo na guia "Configurações globais" > "Configurações gerais", além de uma cor de fundo alternativa:
O Editor Clássico não oferece suporte a imagens de plano de fundo.
Editor Clássico: alinhamento de texto
O Outlook não dá suporte ao alinhamento de texto "Justificar".
Infelizmente, não há uma correção para forçar o Outlook a dar suporte ao alinhamento de texto justificado.
Observe que o Editor de Emails (lançado em 2022) não tem a opção de justificar e, portanto, não é um problema quando enviado para o Outlook
Editor Clássico: texto quebrado em botões
Botões com texto quebrado ou texto que se divide em uma segunda linha são devido a um problema de renderização do Outlook. Para evitar esse problema, você pode aumentar o padding do botão para ser maior do que o tamanho da fonte. Se o problema persistir, recomendamos criar uma imagem do seu botão e usá-la (consulte "Botões duplicados" acima).
Editor Clássico: os botões exibem fonte incorreta
O Outlook pode renderizar o tipo de fonte incorreto e voltar para Times New Roman. Isso é causado por um espaço adicionado no início e/ou no final do texto do botão. Para evitar esse problema, recomendamos remover esse espaçamento. Se isso não funcionar, você pode criar um novo botão ou criar uma imagem de um botão para usar em sua campanha.
Editor Clássico: os links não são clicáveis
Em relação ao alinhamento da imagem, apenas algumas versões do Outlook renderizarão as imagens da mesma maneira. Se você tiver uma imagem dentro de um bloco de texto com links na mesma linha da sua imagem, esses links não poderão ser clicados no Outlook 2007 e 2013.
Observe que você não pode adicionar imagens a caixas de texto no Editor de Emails (lançado em 2022) e, portanto, observe um problema ao enviar para o Outlook.
Por exemplo, o texto com hiperlink abaixo não será clicável para assinantes que usam qualquer uma das versões do Outlook:
Para evitar isso, com o Editor Clássico, recomendamos remover a imagem do bloco de texto e usar um bloco de imagem para evitar isso.