Blog de Email Marketing

Templates

50 fatos sobre email marketing no Outlook

Juliana Padron Por Juliana Padron em 11.12.2015

O Outlook é um dos principais programas de email desktop, comercializado mundialmente tanto para uso doméstico quanto corporativo. Ele é, também, o grande terror dos webdesigners que desenvolvem templates de email marketing e, por isso, uma das principais causas de criarem tantos templates em imagem que poderiam ser reproduzidos em HTML.

A incerteza de como o Outlook vai interpretar o HTML desenvolvido gera um receio nos profissionais, que preferem enviar aquela campanha de última hora toda em imagem, pra evitar problemas. Na tentativa de ajudá-los a fazerem amizade com o Outlook, segue outra lista de #50Fatos sobre email marketing, desta vez toda dedicada a este temido programa de email.

Espero que lhes possa ser útil!

  1. O Outlook desktop teve/tem as versões Express, 2000, 2002, 2003, 2007, 2010, 2011 (apenas para Mac) 2013 e 2016.
  2. Também existem duas versões online: Outlook.com (antigo Hotmail) e OWA (Outlook Web App), que pode ser do Office 365 ou do Exchange Online.
  3. A versão 2011, para Mac, tem uma excelente capacidade de renderização, suportando quase todos os elementos do HTML e CSS.
  4. Até a versão 2003, o sistema de renderização de HTML utilizado era o mesmo que o da versão de Internet Explorer que estivesse instalada no computador. Assim, em uma máquina com Internet Explorer 7 e MS Outlook 2003, os emails em HTML visualizados neste Outlook eram exibidos como se estivessem no IE7 (com suporte às mesmas tags de HTML e propriedades de CSS).
  5. As versões antigas do Outlook (até a 2003) podem exibir algumas imagens do email marketing quebradas.
  6. Essas versões antigas também não suportavam adequadamente imagens em PNG com transparência. A área transparente era exibida em cinza pelo fato das versões antigas do IE (até a 6) não suportarem esse recurso.
  7. A partir da versão 2007, o Outlook passou a usar o mesmo mecanismo de renderização do MS Word (!!!). A Microsoft julgou essa manobra ideal e não pretende mudar as próximas versões.
  8. Sabemos disso porque existiu um movimento na web chamado FixOutlook que recolhia o apoio de inúmeros webdesigners pedindo essa mudança à Microsoft. E ela respondeu que não vai mudar. Insensível.
  9. O fato das versões 2007, 2010, 2013 e 2016 do MS Outlook usar o mecanismo de renderização do Word traz muitos problemas para webdesigners que criam templates de email marketing, pois isso significa que o programa de email não suporta muitos atributos e tags do HTML. Aliás, os fatos de 10 a 40 são apenas sobre essas versões:
  10. Não suportam a propriedade margin do CSS aplicada a nenhum elemento HTML. Para criar espaçamentos, é preciso recorrer à propriedade padding do CSS aplicada às células de tabelas com o conteúdo dentro.
  11. Listas ordenadas (com números) e não ordenadas (com bullets) não podem ser criadas no HTML usando as tags ol e ul. Os elementos li dessas listas serão separados com um distanciamento gigante, que só poderia ser controlado com margem – que o Outlook não suporta. Além disso, o Outlook não suporta as propriedades list-style de formatação de listas em CSS.
  12. Imagens de fundo não funcionam nem com o atributo background do HTML e nem com o background-image do CSS.
  13. Por enquanto, é possível usar um hack em VML para fazer funcionar imagens de fundo em células de tabela do email marketing. Diz-se “por enquanto” porque essa linguagem foi descontinuada pela Microsoft em virtude do SVG ter sido adotado como formato ideal de vetores para a web.
  14. Dá pra construir um template inteiro (não responsivo) no Word que vai funcionar corretamente no Outlook. Só não é garantia de que funcione também nos demais programas de email.
  15. Não suporta GIF animado, apenas o primeiro frame da imagem.
  16. Distorce os elementos de formulário, transformando alguns campos input em caracteres como [ ], ( ) e outros.
  17. Não suporta vídeos ou elementos SWF, quer sejam inseridos usando a tag object ou tags do HTML5.
  18. Em emails de altura maior do que 1790 pixels, aproximadamente, o Outlook insere, neste ponto, uma quebra de página que gera uma quebra grande no layout. Esse bug é chamado de page-break e pode ser evitado usando-se a tag center como container de todo o template.
  19. Esse bug também acontece quando o template é uma só imagem de altura igual ou maior do que 1728px: a imagem será cortada mais ou menos nessa altura. Nesse caso, o ideal é fatiar a imagem grande em pedaços menores e remontá-la no HTML com a ajuda de tabelas.
  20. O Outlook pode alterar a aparência do email marketing ele quando tem plugins de integração com outros software, como o Sales Force, Skype e outros. As alterações impactam principalmente a largura do email, que pode gerar quebras no layout.
  21. Também pode alterar a aparência do email marketing se a área de Acessibilidade do Outlook teve suas configurações modificadas (zoom e tamanho da fonte, principalmente).
  22. Também tem um problema relacionado ao box-model, criando espaçamentos adicionais dentro de células de tabela. Para tentar corrigir, é preciso inserir a propriedade de CSS border-collapse: collapse; para todas as tabelas do template. Ainda assim, podem ocorrer outros problemas de espaçamento com outros elementos.
  23. Tags de parágrafos apresentam margem superior e inferior muito grandes, não podendo ser controladas. Em vez de usar parágrafos, o ideal é inserir os textos dentro de células de tabelas e controlar o espaçamento com padding.
  24. Não suporta webfonts (como as do Google Webfonts).
  25. Em templates que usam webfonts, essas versões ruins do Outlook não entenderão as fontes fallback (declaradas como alternativa à webfont). Nesse caso, é preciso usar a tag font dentro da célula que está formatada com webfont, repetindo as famílias de fontes desejadas para o texto.
  26. Ao criar elementos internos a uma tabela de largura definida, a soma das larguras desses elementos não podem resultar no valor exato da tabela “mãe”. Devido aos espaçamentos adicionais que o Outlook cria, uma tabela de 100% de largura que contenha duas internas com 50% de largura cada terá esses elementos quebrados: será exibida uma tabela embaixo da outra. Considere uma folga de mais ou menos 8% (quando trabalhando com larguras em %) ou 10px (quando trabalhando com larguras em pixels) na soma das larguras das tabelas.
  27. Não suportam elementos do HTML5 e nem propriedades de posicionamento de CSS (float, left, right etc).
  28. Centralizam os textos das células que não têm seu alinhamento definido.
  29. O Outlook 2013 não permite definir altura em célula vazia (para criar espaçamento entre elementos, por exemplo).
  30. As versões 2007 e 2010 estabelecem uma altura mínima de 2px para as células de tabelas, então não é possível criar uma linha de 1px de altura para usar como espaçamento, linha horizontal ou borda.
  31. Não suportam os atributos max-width e max-height, o que altera a forma de desenvolvimento de templates responsivos.
  32. Aceitam conditional comments (comentários condicionais), assim como o Internet Explorer, o que significa que é possível direcionar instruções de CSS e HTML apenas para determinadas versões do Outlook.
  33. Não suportam declarações abreviadas de cores hexadecimais e de CSS, como #666 ou font: Arial, 16px, bold;.
  34. Não suportam padding nas tags p, div e img.
  35. Não suportam javascript.
  36. Não suportam os atributos colspan e rowspan do HTML (que são o equivalente a mesclar células no Excel), e é por isso que precisamos criar várias tabelas, uma dentro da outra, na construção de templates de email marketing.
  37. Precisam que as imagens tenham suas larguras definidas na tag img para que elas não sejam exibidas ocupando toda a largura do template na visualização com as imagens bloqueadas.
  38. Porque sim, o Outlook bloqueia as imagens de emails vindos de remetentes desconhecidos ao destinatário. E não exibe o texto do atributo alt no lugar, apenas um aviso de segurança que é repetido em todas as imagens bloqueadas, independentemente de seu tamanho.
  39. As imagens precisam ter seus tamanhos corretos definidos como atributos do HTML. Não se pode ter uma imagem de 250px salva no servidor web e definir a largura de 200px para ela no HTML do template. Corre-se o risco do Outlook exibir a imagem no seu tamanho original e quebrar o layout.
  40. Aceitam propriedades específicas de CSS da Microsoft, como mso-line-height-rule, mso-line-spacing etc.
  41. O Outlook.com não bloqueia as imagens do email marketing que chega na caixa de entrada, apenas na de spam (e sem exibir o texto do atributo alt).
  42. O Outlook.com também adiciona um espaçamento ao redor das imagens que não tiverem a propriedade de CSS display: block;.
  43. Muitas pessoas ainda usam o Outlook para enviar email marketing pelo fato dele aceitar conteúdo HTML.
  44. Mas isso não deve ser feito porque o servidor de emails do dia-a-dia não é apropriado para o envio de grandes volumes de mensagens. Além dele não ter condições de fornecer um link para o destinatário fazer opt-out. E nem de fornecer relatórios. E nem de avisar sobre todos os emails que deram erro no envio. Na verdade, ele não tem condições para enviar email marketing e ponto.
  45. A versão 2013 do Outlook Web App (que se chama Exchange Connect) é a que melhor exibe templates de email marketing.
  46. As versões 2003 e anteriores são um pesadelo ainda pior do que o Outlook 2007 para exibir emails em HTML, suportando pouquíssimos elementos, atributos e propriedades.
  47. Emails em HTML que são encaminhados para outras pessoas a partir do Outlook são desconfigurados. Especialmente aqueles emails compostos só por imagem, pois o display: block; deixa de funcionar e o destinatário do email encaminhado verá a mensagem com as imagens todas separadas umas das outras. Avise seus departamentos de aprovação de email marketing, que precisam receber a mensagem vinda direto da plataforma.
  48. O Outlook.com exibe, em sua própria interface, um link para opt-out das mensagens de email marketing que foram enviadas por sistemas que usaram o padrão list-unsubscribe para construir o mecanismo do opt-out.
  49. Curiosamente, suporta CSS declarado no head do HTML e até em folha de estilo externa. Mas não é recomendado usar CSS dessas formas porque os outros programas de email não as suportam.
  50. Em último caso, quando não se tem um MS Outlook instalado no computador e nem acesso a uma solução de testes como a Litmus e similares, pode-se abrir o HTML do template no Word para checar os erros que acontecerão no Outlook, já que esses programas compartilham o mesmo mecanismo de renderização. O que aparecer quebrado no Word, aparecerá quebrado nas versões 2007, 2010, 2013 e 2016 do Outlook.

Assine Nossa Newsletter


Por favor informe um endereço de email válido.

Acompanhe Nossas Publicações