Como criar templates em HTML para Email Marketing

Este artigo traz para você leitor algumas dicas de como criar email marketing em HTML.

Dentre os recursos do marketing digital mais utilizados está o email marketing. São diversos os usos que se pode fazer com esta ferramenta.

Você pode criar conteúdos educativos para seus clientes, pode fazer e-mails com ofertas ou ainda uma newsletter.

Nosso conteúdo da semana do Blog TadTarget é interessante para você que já acompanhou as publicações anteriores sobre automação de email marketing e pretende agora desenvolver um template para prosseguir com sua estratégia de marketing digital.

Por isso é muito interessante pensar em como montar seus emails. É melhor trabalhar com templates em HTML do que apenas transformar todo seu conteúdo em uma imagem a ser exportada.

Transformar tudo e imagem não é o melhor caminho pois a maior parte dos serviços de email tem bloqueadores de imagem. Portanto, as pessoas da sua lista de email podem acabar não vendo o conteúdo que você preparou.

Você já deve ter recebido algum email que como o do exemplo abaixo:

Ao ter o conteúdo da sua imagem bloqueado, você aumenta as chances de ter seu email rejeitado.

Imagens de email quando são bloqueadas também podem impedir que o leitor visualize a mensagem ou oferta, por isso cuidado em deixar o call-to-action em imagens.

Ao montar um template em HTML você se certifica que a mensagem que você quer levar aos seus usuários será transmitida da melhor forma.

Seguindo os passos abaixo, você terá um bom email marketing para apresentar para seus clientes:

1)      Desenvolva seu conteúdo em HTML e separe entre conteúdo de texto e imagens;

2)      Ao separar seu email, veja se ele está proporcionalmente divido entre texto e imagens. Muita imagem pode pesar seu email, e muito texto pode tornar a leitura densa;

3)      Importante: provedores geralmente não aceitam imagens acima de 100kb;

4)      Sempre utilize texto alt para descrever suas imagens;

5)      Links são bem-vindos nas imagens, se não forem exibidas, seu usuário poderá clicar na área para visualizar a imagem;

6)   Pense no mobile, seu email deve atender principalmente quem está no celular, por isso, cuidado com os layouts feitos somente para desktop.

Lembre-se que templates em HTML são modelos de fácil edição. Por isso é importante desenvolver alguns para agilizar seu serviço de email marketing.

No exemplo abaixo, temos um cabeçalho de email em HTML:

<center>
    <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer"
           style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border: 0;">
        <tbody>
        <tr>
            <td align="center" valign="top"
                style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                <!-- BEGIN PREHEADER // -->
                <table border="0" cellpadding="0" cellspacing="0" width="600" id="templatePreheader"
                       style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
                    <tbody>
                    <tr>
                        <td valign="top" class="preheaderContainer"
                            style="padding-top: 9px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock"
                                   style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                <tbody class="mcnTextBlockOuter">
                                <tr>
                                    <td valign="top" class="mcnTextBlockInner"
                                        style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">

                                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="366"
                                               class="mcnTextContentContainer"
                                               style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                            <tbody>
                                            <tr>

                                                <td valign="top" class="mcnTextContent"
                                                    style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #606060;font-family: Helvetica;font-size: 11px;line-height: 125%;text-align: left;">
                                                    {{nome_da_loja}}
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <!-- // END PREHEADER -->

Utilize Ferramentas

Procure por ferramentas modernas que possam te ajudar a editar seus emails.

Uma ferramenta que pode ajudar muito com seus templates é MJML. Tal ferramenta vem para simplificar a forma como as pessoas criam emails responsivos.

Abaixo uma imagem que ajuda você leitor a compreender como uma ferramenta adequada pode auxiliar no desenvolvimento do email.

Com o auxílio das ferramentas certas você cria campanhas e templates para emails responsivos que deixarão seu email marketing profissional.

Seguindo os passos abaixo, utilizando a ferramenta já citada MJML você pode já montar seus template para email responsivo:

1. Adicione um novo projeto clicando em “New project”.

2) Dê o nome que deseja ao seu projeto e depois clique em “Browse” para carregar seu arquivo com o template que gostaria de trabalhar. Por fim, clique em “Choose template”.

3) Assim você terá o HTML do seu template para copiar ou exportar o arquivo, como no screenshot abaixo.

4) Seu template em HTML para Emails responsivos está pronto!

Passar as mensagens certas para as pessoas certas, e com o cuidado ao tratar de imagens e textos do seu conteúdo de email é uma forma inteligente de manter a reputação de sua marca e a boa comunicação do seu e-commerce ou site.

Como no exemplo a seguir:

Recomendamos também, além da escolha de ferramentas que te ajudam no desenvolvimento de templates em HTML, que faça uma boa opção entre as ferramentas de automação de email marketing disponíveis.

Se você está procurando uma ferramenta que pode te auxiliar nesses aspectos, conheça a TadTarget e dispare emails com as mensagens certas para as pessoas certas.