Blog de Email Marketing

Templates

HTML de email marketing brasileiro vs. HTML de email marketing estrangeiro

Juliana Padron Por Juliana Padron em 28.11.2016

Com o recente anúncio do Google de que suas aplicações de email – Gmail e Inbox, ambos webmails e com aplicações mobile – suportarão media queries, designers do mundo todo comemoram o fato de que, em breve, será muito melhor criar layouts de email marketing responsivos, visto que o Gmail app sempre foi uma pedra no sapato para tornar os emails responsivos bonitos justamente devido à falta de suporte a media queries.

Os métodos de desenvolvimento de HTML para email marketing responsivo que se conhecem hoje levam em consideração o fato do Gmail e do Inbox não suportarem media queries e suas instruções para as mudanças de diagramação do layout conforme com a largura da viewport – essencialmente, a quebra de linha de blocos de conteúdo para produzir uma diagramação em coluna única.

As instruções de quebra de blocos, nesse caso, são feitas no corpo do HTML, usando elementos do HTML (e não CSS, como nas media queries) mas de maneira limitada, o que produz uma versão responsiva dos emails com aparência mais prejudicada do que nas aplicações de email iOS, por exemplo, que suportam media queries e permitem-nos o controle perfeito de todos os elementos do layout.

Essa pequena gambiarra para fazer o Gmail quebrar blocos não nos permite controle total sobre o alinhamento dos elementos nos blocos empilhados, causando grande frustração em designers e clientes que precisam aprovar o layout antes do envio para o mailing completo.

Como o Gmail é uma das aplicações de email mais utilizadas no mundo, a mudança – que foi anunciada em setembro de 2016 – representa uma grande evolução para a comunidade de email marketing, que poderá produzir emails que se apresentam no Gmail app e no Inbox app da mesma forma que nos programas de email iOS.

Para os designers de boa parte do mundo, o Gmail era o único programa de emails que os obrigava a adotar certo formato de programação HTML, mais demorado e trabalhoso para fazer. Passando a suportar media queries, esse método antiquado poderá ser abandonado e a produção de HTMLs ficará mais rápida.

Para desenvolver o HTML de templates de email marketing, nós, brasileiros, usamos as seguintes técnicas:

  • media queries para controlar a aparência responsiva nos programas de email que entendem media queries;
  • grid flexível para fazer a largura do email se ajustar aos diversos tamanho de tela;
  • comentários condicionais para o Outlook, que não suporta o grid flexível;
  • elementos div com largura fixa e propriedades de alinhamento específicas para o Gmail, que não suporta media queries;
  • CSS inline;

O trabalho dos webdesigners estrangeiros é um pouquinho mais fácil porque eles não precisam usar CSS inline: os principais programas de email internacionais suportam estilos declarados no head do HTML. Como nossos programas de email nacionais Terra, BOL, UOL e R7 não suportam esse tipo de declaração (eles removem tudo o que estiver dentro do head do HTML), ainda precisamos usar CSS inline, o que aumenta tanto o tempo de desenvolvimento dos templates quanto o tamanho final dos HTMLs, devido às declarações repetidas de formatações.

Agora, com o Gmail e o Inbox passando a suportar media queries, nossos amigos estrangeiros poderão abandonar também a técnica dos elementos div com largura fixa e propriedades de alinhamento que serviam apenas para o Gmail sem media queries.

Dessa forma, a criação de templates de email marketing deles passa a ficar cada vez mais parecida com a criação de landing pages simples, limitando-se apenas à falta de suporte adequado a elementos mais interativos como GIF animado (no Outlook) e vídeos (em quase todos os programas de email).

Os programas de email que removem todas as instruções do cabeçalho do HTML, como UOL, BOL, Terra e R7, não apenas deixam de permitir a visualização adequada de emails responsivos como também reduzem a interatividade dos emails não responsivos, pois é apenas no cabeçalho do HTML que podemos criar efeitos como o :hover – mudança de aparência de um elemento ao passar o mouse sobre ele.

A principal mudança no cenário de email marketing atual já foi conquistada: Gmail e Inbox passarão a suportar media queries. Agora, a comunidade brasileira de email (e não apenas de email marketing) precisa se unir para tornar melhores os nossos programas de email brasileiros.

Também recentemente, a Litmus anunciou uma importante parceria com a Microsoft para lhes ajudar a melhorar o Outlook na renderização de emails em HTML. A Microsoft julgou essa parceria importante porque ela está, agora, interessada em fazer com que as pessoas amem ler seus emails no Outlook, e melhorar a forma como o Outlook renderiza emails em HTML é um passo gigantesco para isso.

Portanto, fazemos aqui um apelo para os gerentes de produto dos webmails de UOL, BOL, Terra e R7 seguirem o mesmo caminho do Gmail e da Microsoft e permitirem que seus usuários também tenham uma boa experiência com os emails que recebem. Estamos à disposição para sugerir as melhorias necessárias, já que temos um mapeamento completo de suas capacidades de renderização de emails! 🙂

Assine Nossa Newsletter


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

Acompanhe Nossas Publicações