Blog de Email Marketing

Mercado

Software recomendados para desenvolver templates de email marketing

Juliana Padron Por Juliana Padron em 03.12.2015

Templates de email marketing são criados em duas etapas: primeiro o design e, depois, o HTML. Quando o tempo é curto, até dá pra pular a etapa do design e criar direto no HTML, mas isso exige plenos conhecimentos da linguagem e dos programas de email, para não usar recursos que não são suportados.

Design

Quando há tempo hábil para criar o design com todos os detalhes, usa-se, claro, qualquer software gráfico, bitmap ou vetorial, que ofereça as ferramentas necessárias para edição de texto e imagem, então podem entrar nessa lista: Adobe Photoshop, Adobe Illustrator, Adobe InDesign, CorelDraw, Inkscape, Affinity, GIMP, 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, e cada pessoa se adequa melhor a uma solução, tanto em termos de recursos e usabilidade quanto de custo.

Aqui, na Templateria, nós usamos as soluções do Adobe Creative Cloud, em que podemos usar todos os software originais da Adobe, sempre atualizados, mais o espaço do Adobe Cloud, por uma mensalidade de R$ 109 por usuário. Eu, particularmente, sou conhecida por ser estranha e usar o Illustrator para criar nossos templates, em vez de usar o Photoshop, como 98% dos designers fazem.

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. Consigo fazer pequenas coisas nele, como cortar, redimensionar e apagar um elemento ou outro. Me ensinaram a fazer máscara ainda esses dias, mas eu já esqueci. Sei que é bem diferente de fazer isso no Illustrator, talvez por isso meu cérebro não registrou. 😛

Até o Illustrator é um software muito complexo para ser usado só para criar templates de email marketing, que têm aparência limitadíssima, e confesso que eu o subutilizo. Para quem pretende só fazer isso também, recomendo experimentar o Affinity, um concorrente da Adobe à altura. É uma suite de dois software, um de bitmap e um de vetor que, a meu ver, não deixam em nada a desejar em relação a Photoshop e Illustrator, com a vantagem de serem muito mais baratos: um custo fixo de USD 49,99 (sem mensalidades).

Mas nessa fase do design do template de email marketing, o importante é obter um resultado visual que agrade, não importando muito o software utilizado para esse desenho. Templates de email marketing são, basicamente, caixas de texto e de imagem, e existem muitos programas que permitem uma boa diagramação com esses elementos.

Só é importante ficar atento às dimensões do template em geral e de seus elementos internos. A largura máxima recomendada para a arte continua sendo 600px, um tamanho que é exibido no iPad sem ser redimensionado. 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.

HTML

Depois do design aprovado, é hora de programar o HTML. Dependendo do layout do template, será preciso recortá-lo em fatias para remontá-lo dentro de uma tabela no HTML. Mesmo que sua agência tenha lhe enviado um JPEG contendo a arte do template inteiro, é importante fatiá-lo em pedaços menores para remontá-lo no HTML. E, 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, têm os recursos de criação gráfica mas não têm os recursos de salvar arquivos para a web, então nesse ponto pode ficar um pouco mais complicado utilizá-los.

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 os mesmos resultados em HTML, então vamos programar um template mais complexo.

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, aqui 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.

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, em que contamos com botões e itens do menu para fazer as coisas enquanto o código, reflexo dos botões que apertamos, vai sendo escrito automaticamente ali atrás.

Prefiro usar apenas o editor de código do Dreamweaver, escrevendo tudo à mão, do <body> ao </body>, mas isso, é claro, exige pleno conhecimento de HTML e de CSS. Como já faço isso há mais de 10 anos, acho tranquilo, mas é o que recomendo a todos desde já. A prática leva à perfeição!

O Dreamweaver tem uns recursos, mesmo no editor de código, que agilizam a vida. Ele tem uma função de autocompletar as coisas que escrevemos, de fechar as tags assim que se digita o &rt; da abertura, controle de número de linhas, da indentação (quantidade de espaços que corresponde a um tab), diferencia por cores o que é tag de HTML, atributo de HTML, propriedade de CSS e seu respectivo valor. Então, se eu esqueço de fechar uma aspas, imediatamente eu vejo o reflexo nas cores do código, que ficaram bagunçadas.

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. Outros exemplos, fora o Dreamweaver e o Bloco de Notas, são: Aptana, Adobe Edge, Brackets, WebPlus, Coda (para Mac) e Litmus Email Builder. Este último fica dentro do painel da Litmus que já traz 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 o HTML precisa ser todo em recorte de imagens, ou seja, quando o design não dá possibilidades de ser reproduzido com elementos do HTML, é possível usar essa opção do HTML automático, mas é preciso ajustar as configurações do HTML a ser gerado e, ainda assim, fazer ajustes manuais importantes no arquivo HTML final. (O próximo post será sobre isso)

Então, como esse trabalho manual ainda precisa ser feito depois do HTML ser gerado automaticamente pelo software, eu 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. Acho que o volume de trabalho é o mesmo do que gerar o HTML automático e depois ajustar manualmente, mas eu prefiro esse método para trabalhar.

Enfim

Sintam-se à vontade para testar esses software individualmente, um combinado ao outro, avaliando prós e contras e também para procurar outras soluções, que surgem a cada dia para tentar resolver certos problemas que aquelas mais tradicionais apresentam.

Nenhum desses software, tanto de design quanto de HTML, é 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 todas as aplicações de email.

Se puder contribuir com outras sugestões, comente este post com as ferramentas que você usa e o que acha delas!

  • aaaa

    aaaaaaaaaaaaaaa

Assine Nossa Newsletter


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

Acompanhe Nossas Publicações