A ferramenta de envio de email marketing da Templateria agora se chama Zenmail e tem um site dedicado a ela.

Insights de email marketing

Software para criar templates de email marketing

Qual software escolher para criar o design de um template de email marketing? E para programar o seu HTML? Veja as dicas aqui!

Para criar templates de email marketing, geralmente, usa-se dois software: um para o design e, outro, para o HTML.
Quando o tempo é curto, até dá pra pular a etapa do design e criar o conteúdo e layout direto no HTML, mas isso exige plenos conhecimentos da linguagem e dos programas de email, para não correr o risco de usar recursos que não são suportados.

Primeira etapa para criar templates de email marketing: o design

Quando há tempo hábil para criar templates de email marketing pensando nos mínimos detalhes de design, usa-se, claro, qualquer software bitmap ou vetorial que ofereça as ferramentas necessárias para edição de texto e imagem.
Podem entrar nessa lista:

  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe InDesign
  • CorelDraw
  • Inkscape
  • Affinity
  • GIMP (open source)
  • Adobe Fireworks
  • e até mesmo soluções de escritório como Power Point, MS Word, Keynote e Pages (equivalentes da Apple ao Power Point e Word, respectivamente).

  • Existem muitos outros software gráficos por aí, inclusive open source, como o já citado GIMP, e cada pessoa se adequa melhor a uma solução, tanto em termos de recursos e usabilidade quanto de custo.
    Nessa fase do design dos templates de email marketing, o importante é obter um resultado visual que agrade, não importando muito o software utilizado para esse desenho.

    O Adobe Illustrator é meu eleito

    Na Templateria, nós usamos as soluções do Adobe Creative Cloud, em que podemos usar todos os software originais da Adobe, sempre atualizados, por uma mensalidade de R$ 175 por usuário.
    Eu, particularmente, sou uma estranha no ninho e uso o Illustrator para criar templates de email marketing, em vez de usar o Photoshop, como 98% dos designers costumam fazer.
    Não é nada específico ao email marketing, é que no meu passado como designer de embalagens, eu usava muito o Illustrator e quase nada de Photoshop, e não me envergonho de dizer que mal sei usá-lo.
    Mesmo sendo fã, reconheço que o Illustrator é um software muito complexo para ser usado só para criar templates de email marketing, que têm aparência limitadíssima, e sei que eu subutilizo o software, já que não sou ilustradora para explorar os demais recursos dele.
    Para quem também pretende apenas criar templates de email marketing, use o Affinity, um concorrente da Adobe à altura. É uma suite de dois software (bitmap e vetor) muito mais baratos: um custo fixo de USD 49,99 (sem mensalidades).
    Criar templates de email marketing é, basicamente, diagramar caixas de texto e de imagens, e existem muitos programas que permitem uma boa manipulação desses elementos. Só é importante ficar atento às dimensões dos elementos gráficos do template.
    É que dependendo do software escolhido para a criação do layout do template, não há controles precisos das dimensões em pixels (principalmente quando se escolhe o Word), e o resultado final (quando o HTML for programado) pode ficar fora das proporções imaginadas anteriormente.

    Particularidades dos templates responsivos

    O conceito de mobile-first do universo responsivo derrubou a recomendação da largura máxima de 600px para criar templates de email marketing, afinal, ser responsivo significa adaptar-se a qualquer tamanho de tela.
    O Illustrator, por exemplo, tem um recurso muito útil que, com apenas um clique, permite exportar todas as imagens do layout em diversos tamanhos e tipos de arquivo, tudo de uma vez.
    Isso é muito prático para criar templates de email marketing responsivos, que precisam de imagens salvas em tamanho até 4x maior do aquele em que realmente estarão inseridos no código, já que poderão ser ampliados para melhor visualização na “versão” responsiva.

    Segunda etapa para criar templates de email marketing: o HTML

    Depois do design aprovado, é hora de programar o HTML.

    Recortes das fatias de imagens

    Dependendo do layout do template, será preciso recortá-lo em fatias para remontá-lo dentro de uma tabela no HTML.
    Se sua agência ou designer lhe enviou um JPEG que é a arte inteira do template, é importante fatiá-la em pedaços menores e remontar o layout no HTML.
    Mesmo que você não queira fatiá-lo, vai ter que colocar o JPEG num arquivo HTML, que é o formato final em que o email marketing deve estar para ser enviado por uma plataforma de envios.
    Nessa hora, ter um programa gráfico com a capacidade de recortes precisos, como é o Photoshop, o Illustrator, o GIMP e o Affinity, por exemplo, ajuda muito.
    Os outros programas que citei antes, como o InDesign e as soluções de escritório, até têm os recursos de criação gráfica, mas não têm os recursos de salvar arquivos otimizados para a web.
    Se você for responsável por criar templates de email marketing – apenas o design – e tiver que enviar o layout para outro profissional desenvolver o HTML, garanto que el@ irá preferir receber a arte em *.bmp do que em Word.
    Essa é só uma dica para lhe alertar de que, por mais que seja possível criar templates de email marketing em software de escritório como o Power Point ou o Word, essa não é a melhor solução, mas se for a única que você tiver, o mundo não acaba.
    Se o template tiver um layout que não precise ser inteiramente fatiado, isto é, se os elementos tiverem sido formatados e diagramados de forma que consigamos reproduzir os mesmos resultados usando tags e propriedades de HTML e CSS, então vamos programar um template mais complexo, ou seja, vai demorar mais pra ficar pronto – principalmente se você o quiser responsivo.

    “Ain, mas HTML não é programação…” zzzzz…

    Eu digo “programar” porque nós vamos escrever código, mas os programadores podem não gostar desse verbo porque HTML não é uma linguagem de programação, como é o PHP, Ruby, Python e outras.
    O HTML, assim como o XML, é uma linguagem de marcação. O que isso importa para nós? Nada. Vamos adiante.
    Para escrever o HTML, você pode usar desde um software simplíssimo como o Bloco de Notas (que salva arquivos *.html, não apenas *.txt) até um bem mais complexo como o Adobe Dreamweaver.
    Como eu disse antes que, na Templateria, nós usamos as soluções do Adobe Creative Cloud, para escrever o HTML nós usamos o próprio Dreamweaver.
    O que diferencia um software de HTML do outro são os recursos que eles oferecem para facilitar o nosso trabalho.

    Sobre o Dreamweaver

    O Dreamweaver, por exemplo, conta com um editor de código e um editor visual, que deve ser evitado a todo custo porque gera um código muito poluído.
    O editor visual do Dreamweaver é como se fosse o Word, com botões e itens de menu para fazer coisas como negrito, itálico, mudar cor de fonte etc. Enquanto isso, o código, que é reflexo dos atalhos usados no editor visual, vai ficando meio porcamente escrito ali atrás.
    Prefiro usar apenas o editor de código do Dreamweaver, escrevendo tudo à mão, do início ao fim, mas isso, é claro, exige muito conhecimento de HTML e de CSS. Como faço isso há mais de 10 anos, acho tranquilo, mas é o que recomendo a todos desde já.
    A prática leva à perfeição!
    Mesmo no editor de código, o Dreamweaver tem uns recursos que agilizam a vida:

    • autocompletar o que escrevemos (você digita “t” e ele já sugere “table”);
    • fechar as tags assim que se digita a abertura;
    • exibir o número de linhas;
    • fazer indentações (quantidade de espaços que corresponde a um tab) decentes;
    • diferenciar por cores tags de HTML, atributos de HTML, propriedades e valores de CSS (se eu esqueço de fechar uma aspas, imediatamente vejo esse erro repercutir nas cores do código, que ficaram bagunçadas);
    • fazer múltiplas alterações de uma única vez selecionando facilmente os locais onde a mesma declaração se repete;
    • criar bibliotecas de trechos de código prontos, como atalhos para trazer ao arquivo.

    Outros editores de HTML

    O Bloco de Notas, claro, não tem nada disso, mas é um editor possível de ser usado.
    O trabalho só demorará um pouco mais para ser concluído e terá que ser revisado com mais cuidado, já que o editor não é capaz de apontar os erros.
    Mas como nosso objetivo é gerar um arquivo HTML, qualquer editor que suporte essa linguagem pode ser usado para criar templates de email marketing.
    Outros exemplos, fora o Dreamweaver e o Bloco de Notas, são:

    • Aptana
    • Adobe Edge
    • Brackets
    • Coda (para Mac)
    • Litmus Email Builder, que fica dentro do painel da Litmus, aquela que faz os testes de preview nos programas de email

    HTML gerado automaticamente por certos software gráficos

    O Photoshop, assim como outros software gráficos, é capaz de gerar um HTML da arte, automaticamente, na opção “Salvar para a Web” de seu menu.
    Quando você precisar criar templates de email marketing baseados apenas em recortes de imagens, ou seja, quando o design não der possibilidades de ser reproduzido com elementos do HTML, pode usar essa opção do HTML automático, mas será preciso ajustar suas configurações e, ainda assim, fazer ajustes manuais importantes no arquivo HTML final.
    Como esse trabalho manual ainda precisa ser feito depois do HTML ser gerado pelo software, prefiro manter um HTML padrão salvo em meus arquivos, que uso como base sempre que tenho um template só em imagens pra fazer.
    Dessa forma, eu pego esse HTML padrão só para inserir as fatias das imagens que gerei no programa gráfico. Mesmo que o volume de trabalho seja o mesmo que gerar o HTML automático e ajustá-lo manualmente, ainda prefiro esse método.

    Enfim

    Teste os software indicados, avalie seus prós e contras e também para procure outras soluções que sempre surgem por aí para resolver certos problemas que aqueles mais tradicionais apresentam.
    Nenhum desses software é perfeito para email marketing. É preciso conhecer os programas de email e suas limitações para saber como criar o design da melhor forma e, consequentemente, como programar o HTML de acordo com o que funcionará melhor em todos os apps.
    Se puder contribuir com outras sugestões, comente este post com as ferramentas que você usa e o que acha delas!

Receba nossa newsletter

Cadastre-se e fique por dentro das nossas novidades e do universo do email marketing! Nossa newsletter é enviada, no máximo, uma vez por mês, você pode se descadastrar a qualquer momento e seu endereço de email está seguro conosco.

Newsletter da Templateria

Receba em seu email conteúdos exclusivos sobre email marketing: