Blog de Email Marketing

Templates

Tudo sobre templates de email marketing em imagens

Juliana Padron Por Juliana Padron em 04.12.2015

Gerando o HTML automaticamente por programas gráficos

No post anterior, em que falei sobre alguns software que podem ser usados para criar templates de email marketing, citei o fato do Photoshop, assim como outros programas gráficos, serem capazes de gerar, automaticamente, um arquivo HTML já com todos os slices de imagens organizados e seus respectivos links. Citei também que, apesar de ser um recurso muito “mão na roda”, o HTML final ainda precisa de intervenção humana para garantir que o email marketing seja exibido corretamente nos programas de email.

Isso porque, por padrão, o Photoshop gera um HTML que não é da melhor qualidade: não é válido pelo W3C, usa atributos já depreciados e tem trechos comentados parecidos com esses:

Há aplicações antispam que, ao identificar esses comentários, atribuem uma pontuação de spam à mensagem. Claro, é possível removê-las do código depois que ele é gerado pelo software gráfico, mas em vez de fazer isso manualmente a cada vez que o HTML é salvo, dá pra ajustar as preferências de HTML que o Photoshop vai gerar, para que ele saia certo. Na janela de “Salvar para a Web”, clique no cantinho à direita da opção “preset” e, no submenu que aparecer, clique em “Edit Output Settings”.

Photoshop Output Settings

Na caixa de diálogo que abrir, deixe as preferências dessa forma:

Photoshop's Output Settings Dialog Box

Note que a opção “Output XHTML” está habilitada e a inserção de comentários está desabilitada. Clique em OK, e depois em Save” na janela de “Salvar para a Web” (depois de ajustar a qualidade da imagem de cada slice). Na caixa de diálogo onde você vai escolher o caminho onde o arquivo será salvo, escolha o formato “HTML and images”.

Calma que ainda não acabou!

Agora, você vai precisar de um editor de HTML, que pode ser qualquer um daqueles que citei no post anterior, inclusive o Bloco de Notas. Essa é a parte mais importante, porque os ajustes que faremos no HTML vão garantir que os slices não apareçam distantes uns dos outros (nos webmails Gmail, Yahoo! e Outlook.com) e que o email fique centralizado no espaço da mensagem em cada programa de email.

Abrindo o HTML num programa que possa editá-lo, vá em cada tag de imagem e insira esse trecho de código dentro dela (pode ser o último atributo de todos):

style="display:block;"

A sua tag de imagem, depois dessa edição, deve ficar mais ou menos assim:

Esse trecho de código vai evitar que o template fique com suas imagens espaçadas, dessa forma:

Espaço adicional em templates de email marketing no Gmail

Se suas imagens tiverem dentro de uma tag link, também será preciso inserir o atributo border="0" para evitar que, em alguns programas de email, as fatias com link apareçam envoltas por uma borda azul.

Agora, para garantir que o template fique centralizado dentro da área da mensagem nos programas de email, precisamos inserir outros trechos de código. Na tag da tabela que contém todas as suas imagens, insira o seguinte trecho de código:

align="center"

A sua tag de tabela, depois dessa edição, deve ficar assim:

Você também pode remover os atributos id que o programa inserir na tabela e nas imagens, porque eles não servirão para nada.

Se você utilizar uma solução de testes de preview de templates, como a da Litmus, vai perceber que o email ficou centralizado em todos os programas de email, menos no Yahoo!, que já há algum tempo atualizou seu webmail e deixou de suportar o atributo de alinhamento nas tabelas.

Para consertar isso no Yahoo!, precisamos envolver toda a nossa tabela de 600px de largura em uma nova tabela de 100% de largura, que terá um atributo especial. Então, no seu código HTML, imediatamente antes da tabela de 600px de largura, vamos abrir uma outra tabela com esse código:

E, depois da tag </table>, lá no final do HTML, vamos colocar as tags que fecham essa nova tabela:

Revisões finais

Revisando o seu HTML, verifique também se o Photoshop — ou o outro programa de onde saiu o HTML — inseriu os atributos colspan ou rowspan em alguma td. Dependendo do tipo de recorte que você fez na imagem original, o programa vai entender que precisa organizar alguns slices em colunas, e em vez de criar tabelas aninhadas no HTML, ele vai usar colspan e rowspan para mesclar as células da tabela que não têm múltiplas colunas.

O problema é que alguns programas de email, como o Outlook (sempre ele) não suportam esses atributos, o que pode fazer com que a aparência da mensagem fique toda quebrada. O ideal — mais fácil e com menos risco de dar algum problema — é recortar as fatias só na horizontal, evitando deixar uma ao lado de outra.

Por fim, revise o texto que ficou dentro da tag title, porque o padrão desses programas, ao gerar o HTML automaticamente, é deixar o nome do arquivo como title, incluindo a extensão (.psd, .jpg etc). Como nós, designers, temos a tendência de nomear nossos arquivos tipo ARTE_V04_FINAL03_OK_02_AGORA_VAI.psd, o título da página pode ficar bem feio (rs).

No título, evite usar expressões relacionadas a “email marketing”. Só o nome da empresa (ou o assunto que será usado na campanha) já é suficiente.

As últimas etapas são validar o HTML no W3C, para garantir que o código não tem nenhum erro de sintaxe e, se possível, submeter o HTML a aplicação de testes, como a Litmus, para checar como a mensagem será exibida em cada programa de email. Feito isso, o template está pronto para ter suas imagens hospedadas na web e ser enviado por uma plataforma de envios.

Para lhe poupar de todo esse trabalho, a plataforma de envios da Templateria conta com um template chamado “Folder” que tem toda essa estrutura pronta e que precisa apenas ser alimentado com as suas fatias de imagens (que já terão o style="display:block;"). Se você ainda não é cliente da Templateria, crie sua conta online e gratuitamente e faça um teste de até 250 envios, sem custo, por até 15 dias. Depois, é só escolher o melhor plano para sua empresa, de acordo com a quantidade de envios que precisará fazer mensalmente, e contratar também online.

Você também pode baixar aqui a matriz de HTML que usamos na produção de templates de email marketing em imagem.

Por quê fatiar as imagens do email marketing?

Quando a arte do template está toda em imagem — digamos que você tenha um JPEG de um folder ou anúncio que queira enviar por email — é importante avaliar a altura da arte total para saber em quantas fatias precisaremos dividi-la.

Não é recomendado inserir a imagem inteira no HTML porque:

  • isso vai gerar um código muito curto, com poucas linhas, e algumas aplicações antispam tendem a pontuar mensagens assim por serem, possivelmente, spam.
  • quando a arte é muito extensa, uma única imagem dela inteira vai gerar um arquivo pesado (em kb), o que tornará o envio mais lento e, consequentemente, o download da mensagem também mais lento para o destinatário que a abrir.
  • por mais que o template não possa ser responsivo, temos que pensar que muitas pessoas abrirão a mensagem pelo smartphone ou pelo tablet, em uma conexão de qualidade inferior. Uma imagem gigante pode consumir boa parte do tráfego mensal que o destinatário tem com sua operadora.
  • se a imagem não tiver link, o Gmail vai inserir um link próprio nela para que o destinatário faça o download da imagem. Isso acontece com imagens que têm altura igual ou maior do que 150 pixels, conforme demonstramos nesse post.

Portanto, como é muito provável que seu email marketing seja maior do que 150 pixels de altura, é recomendado fatiá-lo em pedaços desse tamanho, caso não tenham link, ou de quaisquer outros tamanhos quando tiverem link, para que cada pedaço de imagem seja relativamente leve.

Qual o peso ideal das imagens no email marketing?

Há plataformas de envio que instituíram para o mercado o limite de 100Kb para o total de imagens de um email marketing. É importante esclarecer que esse número é um parâmetro exclusivo da tal plataforma e nada tem a ver com a qualidade da entrega da mensagem.

O fato de seu email marketing ter um total de imagens de 130 kb, por exemplo, não significa que a mensagem chegará como spam só porque ultrapassou o “limite” de 100 kb. Esse valor mais tem a ver com a capacidade de hospedagem de imagens que a plataforma limitou a seus usuários, portanto, trata-se de uma limitação interna.

Não há um número certo para fixar o peso total que as imagens do email marketing devem ter. Usando o bom senso, não devemos enviar uma mensagem de 1 Mega pensando na usabilidade do destinatário ao lidar com essa mensagem: o download vai demorar e, se o indivíduo estiver em uma conexão 3G no smartphone ou celular, adeus tráfego pelo resto do mês.

O certo é pensar que, quanto menor, melhor. O Photoshop e outros programas gráficos que permitem salvar imagens especificamente para a web têm recursos para o controle da qualidade da imagem, o que nos permite reduzir o tamanho do arquivo sem perder muita estética.

Além dos programas gráficos, existem também os compressores de imagem que só fazem isso. Há diversos software desse tipo com capacidade de compressão até maior do que o Photoshop, basta testar. Anteriormente, publicamos um post com alguns compressores recomendados, veja as dicas lá!

Mas não tem problema ter um email marketing todo em imagens?

Não tem.

Hoje, o que define a entrega de uma mensagem de email marketing é a reputação do remetente e o comportamento do destinatário (que tipos de mensagem ele costuma ler). O template ainda tem participação na pontuação da mensagem pelas aplicações antispam, mas a responsabilidade dele é cada vez menor. Se fosse o conteúdo o grande responsável pela entrega do email marketing, convenhamos que sex shop nenhuma conseguiria colocar um email na caixa de entrada de seus contatos.

Um remetente com boa reputação, que usa uma plataforma de envios adequada (para o controle dos opt-outs, erros, reportes de spam e reputação de seus IPs) e tem as configurações de autenticação corretas, consegue bons resultados até com templates inteiramente em imagem.

O que nos faz recomendar que os templates continuem tendo um bom equilíbrio entre imagens e textos no HTML é, principalmente, o fato das pessoas usarem cada vez mais outros dispositivos e conexões para acessar seus emails.

Um template que permite formatar os textos direto no HTML pode ser programado responsivo, para que seja exibido nos devices menores de uma forma mais confortável para leitura. Como não se tem controle sobre o conteúdo que está dentro de uma imagem, esses templates inteiramente gráficos não podem ser responsivos.

Bloqueio de imagens em programas de email

Outra desvantagem do template todo em imagens é ser entregue em programas de email que ainda as bloqueiam.

Gmail Image Block in Spam Folder

O bloqueio de imagens acontece por razões de segurança: se o email do remetente não estiver gravado nos contatos do programa de email do destinatário, as imagens serão bloqueadas porque o programa de email vai entender que aquele remetente é desconhecido e suas mensagens podem não ter conteúdo adequado. Além disso, por ser de remetente “desconhecido”, o programa de email não vai baixar as imagens (consumindo tráfego do usuário) de uma mensagem sem autorização.

Há algum tempo, o Gmail eliminou o bloqueio de imagens por padrão, mas as pessoas ainda podem solicitar que as imagens de certos remetentes sejam bloqueadas. O Outlook.com só bloqueia as imagens das mensagens que estão no lixo eletrônico, assim como o próprio Gmail e o webmail do R7. UOL, BOL e Yahoo! não bloqueiam as imagens, mas as versões desktop do Outlook sim, e nesse aspecto o template todo em imagens sai perdendo.

Outlook Image Block

Se o template tivesse alguns textos escritos no próprio HTML, com uma formatação atraente, esse conteúdo ficaria visível mesmo enquanto as imagens permanecem bloqueadas, o que pode ser um incentivo para que o destinatário habilite sua exibição, caso se interesse pelo conteúdo que pôde visualizar.

Assine Nossa Newsletter


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

Acompanhe Nossas Publicações