Dominando o Outlook: uma retrospectiva dos problemas comuns de renderização

A Microsoft é uma das maiores empresas do setor de e-mail. O Microsoft Outlook e seu equivalente baseado na web Outlook.com detêm uma participação de mercado de mais de 10% coletivamente. Isso é muito grande!

Em um mundo onde os usuários podem escolher entre uma grande variedade de clientes de e-mail, como o Outlook se manteve tão popular? Não apenas o Microsoft Office é comumente instalado em computadores em empresas em todo o mundo, mas muitos computadores domésticos e laptops que executam o Windows vêm com o MS Office pré-instalado. O cliente de e-mail padrão que acompanha o MS Office é… Outlook.

Depois, há o Outlook.com, que começou sua carreira como cliente de e-mail como Hotmail, em 1996. Em 1997, a Microsoft adquiriu o Hotmail por cerca de US $ 400 milhões e lançou o Hotmail como MSN Hotmail. Mais tarde, foi rebatizado novamente para Windows Live Hotmail. Finalmente, em 2013, o Hotmail foi totalmente substituído pelo Outlook.com. Com a história do Outlook.com entrelaçada com o Hotmail, não deveria ser surpresa saber que, em 2015, o Outlook.com tinha mais de 400 milhões de usuários ativos.

Problemas comuns de renderização no Outlook

Criar e-mails para o Outlook sempre foi um desafio. Do Outlook 2007 em diante, a Microsoft parou de usar o Internet Explorer para renderizar e-mails e, em vez disso, optou por usar o Microsoft Word como mecanismo de renderização. Ótimas notícias para usuários do Microsoft Office, que podem copiar e colar itens do Word ou Excel em seus e-mails do Outlook com facilidade. Notícias nada boas para profissionais de marketing por e-mail e desenvolvedores que usam HTML para criar seus e-mails. Tente copiar e colar uma página da web em HTML em um documento do Word e você terá uma ideia de como o Word traduz HTML.

Naturalmente, os talentosos desenvolvedores de e-mail começaram a trabalhar sua mágica no desenvolvimento de uma infinidade de hacks de e-mail para garantir que seus lindos e-mails em HTML fossem renderizados da mesma forma no Outlook. Não é uma tarefa fácil, já que muitos hacks tendem a envolver VML (Vector Markup Language), que não é algo que você tende a aprender na escola de hard-knocks para desenvolvimento de e-mail!

Aqui está um breve resumo de alguns dos problemas mais comuns enfrentados pelos desenvolvedores de e-mail ao desenvolver e-mails para o Outlook:

Usando tabelas no desenvolvimento de e-mail

No desenvolvimento moderno da web, você pode usar contêineres como divs para conter o conteúdo, com tabelas usadas exclusivamente para dados tabulares. No entanto, para posicionar elementos como divs corretamente em uma página HTML, os atributos CSS, como flutuação e posição, geralmente são necessários.

O Outlook não oferece suporte a esses atributos. Para estruturar adequadamente seus e-mails para capacidade máxima de renderização em dispositivos / clientes / navegadores, os desenvolvedores usam tabelas para criar e-mails.

Embora as tabelas tenham trabalhado para desenvolvedores de e-mail por anos, elas são restritivas quanto ao que pode ser realizado em termos de design de e-mail. Os designers devem pensar em termos de linhas e colunas para que seus designs sejam facilmente construídos com tabelas.

Imagens de fundo com VML

Texto ao vivo. Texto ao vivo. Texto ao vivo. É o mantra do profissional de marketing por e-mail. Tenha o máximo de texto ativo que puder em seus e-mails para garantir que cheguem na caixa de entrada (em vez de spam), sejam acessíveis a todos e legíveis com as imagens desativadas.

As imagens de fundo permitem que você sobreponha texto ao vivo em cima de uma imagem, seja um padrão ou uma bela foto. As imagens de fundo podem criar uma bela sensação de profundidade nos designs de e-mail, ao mesmo tempo que permanecem acessíveis.

No entanto, o Outlook não oferece suporte a imagens de plano de fundo com HTML puro. O Outlook requer o uso de VML para fazer as imagens de fundo funcionarem. Felizmente, você não precisa aprender VML por completo para poder usar imagens de fundo em seu e-mail. O Campaign Monitor tem uma ótima ferramenta que irá gerar seu código VML e HTML para que você forneça imagens de fundo à prova de balas em seus e-mails.

Sem suporte para GIFs animados

Com a falta de suporte de vídeo no e-mail e os profissionais de marketing por e-mail que buscam tornar seus e-mails mais dinâmicos e envolventes, o humilde GIF animado é a maneira perfeita de dar vida aos seus e-mails.

No entanto, o Outlook não oferece suporte a GIFs animados. Embora a imagem seja carregada e exibida para o usuário, apenas o primeiro quadro da animação será renderizado.

Se você tem assinantes abrindo e-mails no Outlook e está usando GIFs animados, faça com que o primeiro quadro da animação conte. Mantenha o GIF simples e a animação não parte integrante da mensagem, mas como um benefício adicional para aqueles que podem ver a animação completa.

Sem suporte para preenchimento nas tags p, div e a

Preenchimento é um ótimo atributo CSS que pode dar espaço aos seus elementos. É um atributo CSS útil para posicionar elementos em um e-mail ou criar espaço para respirar em torno dos elementos para aprimorar o design.

Uma solução alternativa fácil para isso é usar os atributos HTML cellspacing e cellpadding na tabela para criar espaço ao redor dos elementos dentro de uma tabela.

Para introduzir o preenchimento em seus parágrafos - a tag p - use o atributo de estilo mso-line-height-rule: exatamente; combinada com a altura da linha para dar a sua cópia e texto algum espaço para respirar, tornando mais fácil de seguir:

 <p>Your text here</p>

Não é apenas Outlook

Embora o cliente de desktop tenha causado problemas para os desenvolvedores de e-mail por anos, agora existe uma nova versão do Outlook.com para os desenvolvedores de e-mail lidar, que por si só gerou sua própria parcela de peculiaridades de renderização. Muitos dos quais são diferentes das peculiaridades encontradas no Outlook. (Claro.)

Uma mudança não foi um passo na direção certa - o Outlook.com remove tudo o que é colocado em um conjunto de consultas de mídia. Portanto, não há como diferenciar entre a versão móvel ou a versão desktop de um e-mail.

No entanto, há algumas boas notícias. Existem alguns bugs de renderização que existiam em versões anteriores do Outlook.com que foram reparados. Mais notavelmente: o hack de flutuação / margem. Para fazer com que a versão anterior do Outlook.com entendesse esses atributos CSS, eles precisavam ser escritos em letras maiúsculas ou uma mistura de letras maiúsculas e minúsculas. Agora, o caso não importa.

Anteriormente, para o Outlook.com entender o atributo de margem, você precisava usar:

 Margin: 10px;

Mas agora você pode usar:

 margin: 10px;

Para uma lista mais completa de mudanças, o desenvolvedor de e-mail Remi Parmentier escreveu um ótimo blog sobre o que você precisa saber sobre o novo Outlook.com e o que os desenvolvedores de e-mail devem procurar.
Dominando o Outlook

Manter seu código relevante

Se você já trabalhou como desenvolvedor de email, muitas vezes pode parecer que as metas da capacidade de renderização de email se movem mais do que deveriam. Conforme o desenvolvimento do e-mail continua a evoluir, sempre haverá novas técnicas que precisam ser “traduzidas” para o Outlook.

Por exemplo, quando o desenvolvimento de e-mail híbrido / esponjoso foi introduzido para garantir que o aplicativo móvel do Gmail renderizasse uma versão móvel de um e-mail, os desenvolvedores de e-mail também criaram novas técnicas para permitir que o Outlook renderizasse esses e-mails.

À medida que os desenvolvedores de e-mail vão além, com muitos aspirando a criar e-mails sem tabela, essas novas técnicas terão que ser simplificadas para as muitas versões do Outlook que ainda estão em uso.

É justo dizer que desenvolvedores de e-mail inovadores e talentosos nunca foram tão procurados. A VML ainda não foi dominada em e-mail e, enquanto o Outlook usar o Word como mecanismo de renderização, essa será uma área importante na qual os desenvolvedores de e-mail podem continuar a expandir seu conhecimento e valor.

Criar e-mails leva tempo

Com todos esses desafios que o Outlook impõe aos desenvolvedores de e-mail, bem como a lista crescente de clientes e dispositivos de e-mail que precisam ser suportados, não é de se admirar que uma parte considerável do tempo gasto em marketing por e-mail seja no desenvolvimento e teste de e-mails em HTML.

Em nosso estado de produção de e-mail de 2016, mais de 44% dos entrevistados relataram ter gasto mais de 3 horas no desenvolvimento de e-mail. Isso não é curto e precisa ser levado em consideração quando se analisa um fluxo de trabalho completo de marketing por e-mail.

O Outlook sempre foi uma besta complicada para os desenvolvedores de e-mail. Infelizmente, isso não pode ser desconsiderado, uma vez que possui uma parcela considerável de mercado de clientes de e-mail, que poderia ser maior se você trabalhar no setor de marketing B2B. Simplesmente, o Outlook não pode ser ignorado.

Está com dificuldade para fazer seus e-mails funcionarem no Outlook?

Fizemos uma parceria com a Microsoft para priorizar bugs de renderização de e-mail no Outlook, identificar problemas mais rapidamente e anunciar melhorias e correções para a comunidade.

Ajude-nos a melhorar o Outlook e envie seu bug de renderização.

Envie um bug de renderização do Outlook →