Stripo_Outlook Rendering Issues_Featured Image1
23 dezembro 2019

Problemas comuns de renderização de e-mails no Outlook e como o Stripo os resolve

Otimize e-mails para Outlook
Índice
  1. 1. Botões arredondados ficam quadrados em algumas versões do Outlook
  2. 2. Os planos de fundo do contêiner ou da estrutura não são renderizados no Outlook
  3. 3. Os itens de menu perdem seus estilos em algumas versões do Outlook
  4. Conclusão
1.
1. Botões arredondados ficam quadrados em algumas versões do Outlook

O Outlook é um cliente de e-mail bastante popular. Possui 11% de participação de mercado (os aplicativos do Outlook possuem 9% e a versão da Web é usada por 2% das pessoas em todo o mundo).

Diz-se que ele é suficiente para todas as necessidades das empresas.

No entanto, o Outlook também é famoso por suas regras "únicas” de renderização. Os problemas mais comuns que as pessoas enfrentam ao abrir ou enviar e-mails para o Outlook são:

  • botões arredondados ficam com formato quadrado;

  • os fundos para contêineres e linhas individuais não são renderizados;

  • guias de menus perdem seus estilos.

Essas questões são amplamente discutidas na web, o que nos fez querer abordar soluções para elas em nosso blog.

Alguns designers, ao tentar corrigir esses problemas, fazem alterações nos códigos inteiros. Mas, como acontece às vezes, você corrige um problema e outro aparece.

Por exemplo, templates de e-mail com código renovado não mostram corretamente os botões no Outlook, mas não renderizam banners. Ou o que é ainda pior - esses layouts de e-mail podem ficar ruins em outros clientes de email, como Gmail ou Yahoo.

É por isso que pensamos que o problema deve ser resolvido localmente - apenas para os elementos que o exigem, não para os e-mails inteiros.

1. Botões arredondados ficam quadrados em algumas versões do Outlook

Foi comprovado por inúmeras pesquisas que a forma de um botão CTA não afeta a CTR e o CTOR.

A primeira regra fundamental para tornar seus botões eficazes é - torná-lo visível com uma cópia clara e atraente.

No entanto, a forma dos botões é importante para nós, designers, desenvolvedores e profissionais de marketing de e-mail, pois queremos que nossos e-mails sejam consistentes com a marca.

Stripo_Outlook-Rendering-Issues_Buttons1

Então, o que o Outlook faz com os botões?

Primeiro de tudo, algumas versões apenas deixam todos os ângulos retos. Em seguida, ele remove todos os espaços em branco nos botões, o que os torna menos atraentes - mas eles ainda ficam bastante visíveis.

O que causa esse bug?

Existem três métodos principais para layouts de botão nos e-mails:

  1. O método baseado em tabela.

  2. O método Stripo. Vamos dar esse nome a ele porque foi desenvolvido para o nosso construtor de templates de e-mail, pois, em nossa opinião, ele atende melhor às nossas necessidades).

  3. O método VML.

O terceiro foi inventado exclusivamente para o Outlook. Enquanto outros não são suportados por este cliente de email, mas têm um suporte mais amplo entre outros clientes de email.

Como definir um template VML

Se você é um usuário Stripo, para otimizar seus botões no Outlook, você só precisa:

  • abrir "Configurações gerais" no painel lateral;

  • abrir a aba "Botão";

  • ativar o botão "Suporte para Outlook".

Support-for-Outlook_Control-(1)

Agora seus botões no Outlook permanecem arredondados, mantêm seu estilo e as cores.

Outlook-2016

(Outlook 2011, OSX 10.8)

Quer fazer o mesmo? 

Use Stripo

2. Os planos de fundo do contêiner ou da estrutura não são renderizados no Outlook

A maior parte das perguntas sobre o Outlook na Web é "como definir uma imagem de plano de fundo para módulos e elementos separados".

Stripo_Outlook-Rendering-Issues_Background-Images1O e-mail à direita parece bem legal, embora a amostra à esquerda pareça completa.

Esse é o principal objetivo de todos os planos de fundo - fazer com que os designs de e-mail pareçam completos.

O fato mais surpreendente e mais interessante sobre isso é que o Outlook renderiza planos de fundo definidos para e-mails inteiros em sua versão web, em todas as versões de seu aplicativo de desktop e no Office 365.

Então, e se você precisar definir um plano de fundo para um determinado elemento no seu e-mail?

Antes de tudo, lembremos que você pode definir planos de fundo para o template inteiro na guia Aparência na seção Configurações gerais - ele será renderizado corretamente em todos os clientes de e-mail de desktop.

Como definir uma imagem de plano de fundo para uma estrutura / linha que é renderizado corretamente no Outlook

Isso é muito fácil de fazer - basta construí-lo como um banner. Como todas as camadas do banner que você cria com o Stripo, ao serem exportadas para qualquer lugar ou baixadas como arquivo HTML, elas formam uma única imagem. E, como sabemos, todas as imagens funcionam bem em todos os clientes de e-mail.

Stripo_Outlook-Rendering-Issues_Background-Image-for-Structure1

Para criar um banner, você precisa:
  • fazer upload de uma imagem de banner que servirá como plano de fundo da estrutura;

  • fazer upload da imagem “adicional” que servirá como imagem principal para o seu módulo de conteúdo ou fazer upload da imagem do botão - lembre-se de usar nossa opção “Sticky notes” para colocar imagens adicionais a distâncias iguais de todos os lados da imagem do banner;

  • coloque seu texto do CTA sobre as imagens;

  • adicione um hiperlink a essa estrutura.

Importante notar:

Esse truque funciona apenas se você adicionar apenas um item de produto nessa estrutura/linha.

Como definir uma imagem de plano de fundo para uma container/elemento que é renderizado no Outlook

Em alguns casos, pode ser necessário definir um plano de fundo para um contêiner separado ou uma coluna em uma linha.

Nosso plano de fundo de contêineres é renderizado corretamente em todas as versões do Outlook:

Stripo_Outlook-Rendering-Issues_Background-for-Containers-and-Elements1

Existem duas maneiras de fazer isso:

Maneira 1. Criando um banner

Sim, você precisará criá-lo da maneira descrita na seção acima, mas precisará usar uma estrutura de 2 colunas.

Stripo_Outlook-Rendering-Issues_2-Coumn-Structure1

Maneira 2. Construindo um plano de fundo baseado em VML

Você precisa preparar a estrutura e o elemento em que deseja adicionar um plano de fundo.

Uma vez feito isso, você precisa trabalhar com o código do template.

  • coloque o cursor do mouse sobre o elemento necessário diretamente no template;

  • acima desse elemento, encontre o rótulo "container";

Stripo_Outlook-Rendering-Issues_Container-Label

  • clique neste rótulo para ativar as configurações do container;

  • agora abra o editor de código;

Stripo_Outlook-Rendering-Issues_Opening-Code-Editor1

  • insira esse código logo acima da linha que começa com "largura da tabela" 

<!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:327px;height:100%;">  
  <v:fill type="frame" src="https://iiqf.stripocdn.email/content/guids/CABINET_b696bac619e2a6fd60a2c756b8b7c9c5/images/26661559905688877.png" color="#7bceeb" ></v:fill>  
  <v:textbox inset="0,0,0,0"> 
 <![endif]-->

(A fonte do código: backgrounds.cm. Otimizamos esse código para melhor atender os requisitos do nosso editor);

  • insira este exemplo de código abaixo da mesma linha:

<!--[if gte mso 9]>  
 </v:textbox> 
 </v:rect> 
 <![endif]-->
  • substitua os links sublinhados pelo seu URL pela sua imagem de plano de fundo;

Outlook_Rendring-Issues_Inserting-Code-Samples-for-Backgrounds

  • no código de incorporação, edite a largura da imagem de acordo com a largura do container - você pode vê-lo na linha superior após a tag "largura". No nosso caso, é 600 px.

Se a imagem estiver hospedada em nossos servidores, você poderá obter a URL aqui:
  • no seu template de e-mail em HTML, clique na imagem de fundo que você escolheu;

  • no painel de configurações, clique no botão "URL";

  • No campo Caminho da imagem, copie o link.

Outlook_Rendering-Issues_Copying-URL-links

Importante notar:

Se você adicionou anteriormente o botão com base em VML ao contêiner ou a uma estrutura, seu plano de fundo com base em VML não funcionará. O Outlook exibe apenas um dos dois objetos VML - aquele que foi definido primeiro.

Em breve:

Fico feliz em anunciar que, em breve, adicionaremos um controle, semelhante ao controle de botão, às imagens de plano de fundo. Isso significa que você não precisará lidar com o código - precisará escolher apenas se deseja definir planos de fundo especiais para os usuários do Outlook.

3. Os itens de menu perdem seus estilos em algumas versões do Outlook

Nossos usuários raramente enfrentam esse problema, mas decidimos colocá-lo também na lista:

menus e botões podem perder seu estilo, incluindo cores, tamanhos de fonte etc.

Ao criar meu e-mail, defino o tipo de fonte: Trebuchet e tamanho da fonte 18 px.

Mas no Outlook, vi o seguinte:

Stripo_Outlook-Rendering-Issues_Menus-Lose-Their-Styles.1Se você olhar atentamente, verá que o primeiro item do menu está escrito em Times New Roman, 12px e em preto. 

O que causa esse bug:

Você simplesmente esquece de adicionar um hiperlink a esses elementos. Quando o elemento que deve ter um link não tiver um, ele perderá seus estilos.

Solução:

Verifique se você adicionou links a todos os elementos antes de testar ou enviar seus e-mails aos destinatários.

Importante notar:

Ao criar templates de e-mail, adicionamos links a todos os elementos que os devem conter. Se você não remover um intencionalmente, mas simplesmente esquecer de substituí-lo pelo seu, seu menu não perderá o estilo, pois possui todos os links necessários.

Conclusão

O Outlook é realmente suficiente para as necessidades de muitas empresas. E não precisamos ter medo disso. Muito pelo contrário - precisamos aprender a lidar com isso. Além disso, o Outlook agora suporta GIFs animados e, a partir deste verão, suportará conteúdo AMP para e-mails. Não é ótimo?

Devido ao nosso editor de código HTML aberto, permitimos que nossos usuários incorporem elementos de código especiais para que possam enviar e-mails sofisticados a todos os destinatários, incluindo aqueles que usam versões antigas ou novas do Outlook.

No curto prazo, você não terá que lidar com códigos - faremos isso por você.

Você só precisará ativar as respectivas opções.

Leia esta postagem do blog sobre como criar e exportar templates de e-mail para o Outlook com Stripo. 

Otimizar meus e-mails para Outlook
Este artigo foi útil?
Tell us your thoughts
Obrigado pelo seu feedback!
12 comentários
MisterIz há 2 anos
Unfortunately the banners resize entirely on mobile devices making any text or CTA buttons very small.
nicoletta arena há 2 anos
quando scarico l'html sui computer appaiono le immagini caricate, mentre la stessa mail letta sui cellulari non ha le immagini, Perchè?
Lea Simpkins há 3 anos
The problem I am having when I export email templates to outlook is that they are not mobile friendly. From a laptop or computer the emails look fantastic but on mobile they are WAY TOO SMALL to read. Is there a fix to make them adapt to mobile?
Hanna Kuznietsova há 3 anos
Hello, Lea. Sorry for the late reply. Unfortunately, Outlook removes the styles that make email design responsive. Thus, those users who see your emails on mobile devices will see the desktop version of it. Of course, there is no horizontal scroll on mobiles. But all the containers from one row that are normally moved to the second/third row on mobiles, will all remain in the same row. https://stripo-cdn.stripo.email/photos/shares/Blog//Containers-Get-Moved-to-Next-Rows.png -- email sent via an ESP https://stripo-cdn.stripo.email/photos/shares/Blog//Email-Sent-Through-Outlook.png -- email sent via Outlook.
Alaa Abdelrahim há 4 anos
17620 views meaning so many people is having this problem and sorry to say this , but some of suggested solution is not working :(
Hanna Kuznietsova há 4 anos
Alaa Abdelrahim, We're sorry to hear some solutions did not work for you. Could you clarify please which solutions did not work? We will try to find the reason why and provide you with a new way out. Thank you
GERWIN RUSSELL FARROÑAN ALBORNOZ há 4 anos
Hola, tengo problemas para que la imagen de fondo del contenedor se pueda ver en outlook. Estoy siguiendo las indicaciones de insertar el código (https://stripo.email/photos/shares/Blog//Outlook_Rendring-Issues_Inserting-Code-Samples-for-Backgrounds.png) pero no me resulta. Adjunto el enlace de la plantilla que hice. https://viewstripo.email/f9949d8f-3dd3-4452-ab85-a2f603d0360e1599420348110 Agradecería que me digan que tengo que corregir para que resulte.
Hanna Kuznietsova há 4 anos
Hola. Intente utilizar "New Email Copy 3" y este contenedor http://prntscr.com/ucvqve como se muestra en el ejemplo. Así es como se ve el fondo de este contenedor en nuestro Outlook: https://prnt.sc/ucvp5o Si necesita más ayuda, envíenos un correo electrónico a support@stripo.email oa través de nuestro chat que puede encontrar en la esquina inferior derecha de su pantalla en nuestro sitio.
Francis Monier há 4 anos
Bonjour, Bravo pour votre article. Une remarque cependant car je suis toujours confronté au problème de l'image de fond sur Outlook. Problème récurrent qui me fait perdre énormément de temps. Vous avez dit "Nous sommes heureux d’annoncer que bientôt nous ajouterons un contrôle, similaire au contrôle des boutons, pour les images de fond. Cela signifie que vous n’aurez plus à jouer avec le code — vous n’aurez qu’à choisir si vous voulez un arrière-plan spécial pour les usagers d’Outlook ou non, nous sommes aujourd'hui en 2020 et cette option n'est toujours pas disponible. Où en êtes-vous par rapport à ce sujet là ? Cordialement (Problème mentionné étant "L’arrière-plan des conteneurs ou structures ne s’affiche pas dans Outlook")
Hanna Kuznietsova há 4 anos
Francis, Bonne journée. Merci pour votre question. Malheureusement, la sortie de cette option est reportée au début de 2021. Lorsque la sortie aura lieu, nous en parlerons certainement sur notre site Web. Nous espérons que cette méthode d'ajout d'un arrière-plan vous a été utile et n'a causé aucun inconvénient. Nous vous souhaitons sincèrement des campagnes efficaces
Олег Темпов há 4 anos
Метод stripo приводит к тому, что колонки в браузерном клиенте Gmail начинают скакать, чего бы не было при табличной вёрстке...
Hanna Kuznietsova há 4 anos
Олег, Добрый день. Нам очень жаль, что у Вас возникли проблемы с отображением письма в Gmail. Метод верстки у нас табличный, и никакие контроллы, которые мы применяем для адаптации писем под Outlook, его не отменяют. Подскажите, пожалуйста, какое именно действие привело к тому, что колонки начали скакать в Gmail. Напишите, пожалуйста, здесь или на почту support@stripo.email, и мы постараемся помочь устранить данную проблему. Спасибо
Tipo
Indústria
Estações
Integração
Editor da Stripo
Simplifique o processo de produção de e-mail.
Plug-in da Stripo
Integre o editor arrastar e soltar da Stripo ao seu aplicativo da web.
Solicite um modelo personalizado
Nossa equipe pode criá-lo e programá-lo para você. Basta preencher o briefing, e entraremos em contato com você em breve.

Editor da Stripo

Para equipes de marketing por e-mail e criadores solo.

Plug-in da Stripo

Para produtos que poderiam se beneficiar de um desenvolvedor de e-mails integrado de white-label.