Por que meus e-mails parecem ruins com o Outlook Client?
Publicados: 2018-07-04Vamos encarar a verdade. Criar e-mails é uma tarefa bastante fácil. Mas formatar esses e-mails para serem compatíveis com o Outlook é uma tarefa e tanto. Na verdade, mais difícil do que você pensa.
O Outlook é o cliente de e-mail mais usado, mas antigo, que você encontrará. No entanto, ele não oferece suporte a vários avanços encontrados em outros clientes de e-mail, como o Gmail.
Exemplo disso:
Se você usou uma imagem PNG com transparência de fundo, o Outlook vai pirar! Ele não sabe como renderizar tais imagens. Da mesma forma, você pode se perguntar por que seus botões arredondados (criados usando a propriedade CSS border-radius) parecem quadrados no cliente Outlook. Porque o Outlook não oferece suporte a border-radius e várias outras propriedades CSS.
Aqui estão as razões pelas quais seus e-mails do Outlook parecem terríveis e o que você pode fazer para melhorar o design do seu e-mail.
Por que meus e-mails ficam ruins com o Outlook?
O maior desafio para os profissionais de marketing por e-mail agora é criar um modelo de e-mail para o Outlook. Isso ocorre porque, a partir do Outlook 2007, a Microsoft parou de usar o Internet Explorer para renderizar e-mails e passou a usar o Microsoft Word como mecanismo de renderização. Essa mudança é mais adequada para usuários do Microsoft Office, pois permite que eles apenas copiem ou colem conteúdo do Word ou Excel em e-mails do Outlook. Mas, tornou o cenário difícil para o construtor de e-mail baseado em HTML. Como o e-mail HTML parece diferente na perspectiva, para superar certos desafios, siga as etapas abaixo para melhorar as campanhas de e-mail.
Desafios na renderização de email com o Outlook
Um profissional de marketing por e-mail precisa levar muito em consideração antes de criar uma campanha de e-mail. Ele precisa conhecer sua assinatura de cliente que usa o Outlook. A versão desktop, a versão móvel e a versão web do Outlook diferem completamente uma da outra na renderização de um email. Quando se trata de renderização de email com o Outlook, veja a seguir.
Por que a imagem está sendo cortada e carregada lentamente
Quando se trata de inclusão de imagens em emails, o Outlook tem certas limitações no tamanho da imagem.
Os boletins informativos por e-mail desempenham um papel importante nas campanhas de marketing por e-mail. Eles são tornados dinâmicos adicionando imagens nele. Às vezes, quando uma imagem longa é adicionada ao modelo da campanha, ela é cortada ou redimensionada na extremidade receptora. Isso ocorre porque o Outlook corta a parte superior da imagem que excede a altura de 1728px. Portanto, neste caso, precisamos redimensionar a imagem em 1728px para que ela apareça sem recorte.
Em situações em que a imagem não pode ser redimensionada, a melhor alternativa é cortar a imagem em duas imagens separadas e depois usá-la na campanha.
A imagem não está sendo redimensionada
O Outlook não funciona bem com imagens restritas a HTML. Ou seja, se o modelo de email for adicionado com uma imagem redimensionada usando HTML, o Outlook exibirá a imagem apenas no tamanho original e não no valor redimensionado. Portanto, precisamos garantir que a imagem seja redimensionada bem antes de ser usada em qualquer automação de e-mail.
Imagens de fundo
A melhor estratégia para impressionar um cliente é criar um e-mail com uma imagem de fundo com a marca. Podemos tornar as imagens de fundo mais objetivas sobrepondo textos ao vivo na imagem. O texto ao vivo também nos ajudará a transmitir o objetivo do e-mail mesmo nos momentos em que o cliente não é exibido com a imagem.
No entanto, o Outlook não oferece suporte a imagens de plano de fundo com HTML. Precisamos usar VML (Vector Markup Language) para que as imagens de fundo sejam visualizadas pelo assinante.
Insira o código abaixo na tag <body> do seu HTML para que a imagem de fundo cubra toda a janela de email
<div> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="/IMAGE.png" color="#000000"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="IMAGE.png">O código acima funcionou perfeitamente na exibição da imagem de fundo com emails abertos no Outlook 2007, 2010 e 2013. Mas o Windows Mail 10 precisou de alguma modificação no código para adicionar a imagem com sua fonte permitindo a imagem de fundo.
O código abaixo permitirá que a camada superior da imagem seja transparente e ajude a corrigir a imagem de fundo.
<td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" src="/Image Live URL Here" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"> <v:fill opacity="0%" color="#f7901e" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <!-- HTML Content Here --> </div> <!--[if gte mso 9]> </v:textbox> </v:fill> </v:rect> </v:image> <![endif]--> </td>GIFs animados não cabem
Vídeo fala mais que palavras.
Mas, tecnicamente falando, um modelo de e-mail precisa de codificação complexa para suportar vídeos. Pensando em alternativas, como profissional de marketing por e-mail, vejo o GIF como uma opção dinâmica. GIFs são imagens animadas para transmitir uma mensagem da forma mais simples. O Outlook não suporta GIF.
A imagem GIF é carregada, mas apenas o primeiro quadro do GIF é renderizado para o cliente.
Se você tiver assinantes do Outlook na lista de e-mail, certifique-se de que o primeiro quadro da imagem compartilhe o contexto principal do GIF.
Considere usar a parte de animação para ser uma vantagem adicional para assinantes com outros clientes de e-mail.
Propriedade do raio da borda
Falando em email marketing, o botão Call to action é um recurso que faz com que o email gere um lead. Quantas vezes clicamos no botão CTA com ponta redonda?
A propriedade Border radius é uma propriedade CSS comum, mas isso não funciona bem com o Outlook. Com o Outlook, os assinantes recebem botões de CTA com bordas quadradas.
Espaços em branco adicionais
Às vezes, espaços em branco acima da imagem, como costumávamos ver na opção de visualização de impressão, após o email ser renderizado com o Outlook.
Como dito anteriormente no blog, isso ocorre porque o Outlook 2007 usa o Microsoft Word para renderizar emails em HTML.
Portanto, o e-mail parece um pouco diferente do design real.
Problema de fonte principal
Se o dispositivo do assinante não tiver o estilo de fonte principal, o Outlook renderizará o email inteiro em Times New Roman, ignorando a fonte de fallback mencionada no código.
<!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->O modelo de e-mail deve ser perfeito
Você executa uma campanha de e-mail para uma loja de comércio eletrônico. O modelo que você projeta deve ajudar no envio de e-mail eficaz, porque este não é o antigo marketing de campo tradicional, onde os clientes podem conhecê-lo pessoalmente.
A aparência do profissional de marketing define a credibilidade da marca. Então, o que estamos enviando agora para representar nossa marca?
E-mails. O template de design do seu email dá a primeira impressão da sua marca ao cliente. Quanto melhor um email parecer com o conteúdo, melhor é a marca
No entanto, não temos a liberdade de usar opções avançadas de formato para tornar nosso e-mail atraente. Podemos ver que o email parece perfeito no Outlook, mas esse não será o cenário quando for renderizado por outros destinatários de email.
Você deve usar tabelas em seu html de e-mail. Não tente usar elementos div com posição e floats, pois o Outlook não oferece suporte a isso. Infelizmente não há solução para isso a partir de agora.
A opção de cancelamento de inscrição é obrigatória
Gerenciando uma loja de comércio eletrônico, sempre queremos manter nossos clientes engajados com nossa marca.
Como fazer isso?
Boletins informativos. Dê aos clientes informações potenciais sobre a tendência e atualizações em seu nicho de negócios.
Mas, em última análise, é o cliente que decide seguir sua marca ou não. Uma vez que um cliente se inscreveu conosco, deve ser fornecida a opção de optar por sair da lista de assinaturas a qualquer momento.
O botão Cancelar inscrição é obrigatório em todas as newsletters que enviamos aos nossos clientes e, se nossos clientes não conseguirem ver esse botão,
Esperar o quê?
Podemos receber Spam!
O envio de e-mails do Outlook coloca nossa marca nesse risco, pois não oferece essa opção padrão.
Os links são alterados para texto sublinhado em azul/roxo
Como profissionais de marketing por e-mail, precisamos fazer o uso completo do e-mail que enviamos aos clientes.
Podemos incluir links de assinatura, links para nossos blogs de tendências, links de redirecionamento para nosso site para alcançar o envolvimento do cliente.
Quando um email HTML é enviado do Outlook, esses links aparecem em texto azul/roxo sublinhado quando visualizados em diferentes clientes de email.
Para evitar esse problema, use a tag <font> e envolva o texto com uma tag <span> e um atributo style.
Tente usar o seguinte código-
<a> <span> <font color="#E3A216"> Click me </font> </span> </a>O Outlook pode ser bom para preencher sua caixa de entrada pessoal.
Mas, falando de negócios, procure fora da caixa.