Emails de 10 minutos: Como economizo tempo no desenvolvimento

Lembro-me de olhar o primeiro e-mail que me disseram para editar o código e dizer “O quê? Por que eles têm todas essas mesas !? ” E então "consertando" para que funcionasse no meu Apple Mail. De alguma forma, aquele e-mail me rendeu um emprego em uma equipe de marketing que criava e-mails e páginas de destino. Isso pode soar familiar; parece que a maioria das pessoas tropeça no marketing por email.

Uma das coisas que você não percebe que também está tropeçando é a criação de muitos e-mails em um curto espaço de tempo. Como desenvolvedor, isso pode ser uma tarefa assustadora. Usar as ferramentas certas pode fazer a diferença entre levar o dia inteiro para criar um e-mail ou 10 minutos.

Nesta postagem do blog, compartilharei minha jornada pessoal passando de um longo processo de construção de e-mail para um muito mais curto. Espero que inspire você!

Mergulhando em ferramentas que economizam tempo da caixa de ferramentas de um desenvolvedor

Mais recentemente, codifiquei e-mails farmacêuticos (farmacêuticos). Existem algumas indústrias no marketing por e-mail que têm uma grande quantidade de supervisão e muitos requisitos, o que significa que você precisa ser muito criativo ao codificar seus e-mails. Pharma é uma delas. Não sei quantas horas passei tentando fazer com que uma nota de rodapé se alinhasse com exatidão ou para obter o tamanho da fonte certo no Outlook.

Portanto, eu estava sempre em busca de produtos ou maneiras de reduzir meu tempo de desenvolvimento para permitir que eu dedicasse mais tempo às pequenas peculiaridades do e-mail.

Estruturas de e-mail

Uma das primeiras coisas que descobri foram estruturas de e-mail. Eles permitem que você escreva muito menos código usando sua linguagem de marcação especializada que então é compilada e traduzida de volta para HTML e CSS normais para seu e-mail. Sim, isso significa que você precisa aprender uma nova linguagem de codificação. Mas, depois de fazer isso, você pode obter blocos inteiros de código escrevendo apenas algumas linhas. Então. Fácil. Se você não tem tempo para aprender um novo idioma, porém, isso pode não ser para você.

CSS embutidos

Existem várias ferramentas CSS embutidas que você pode usar para que seus estilos possam ser escritos uma vez no cabeçalho de seu HTML e, em seguida, embutidos em todo o corpo mais tarde. Isso é importante porque alguns clientes de e-mail removerão os estilos CSS do elemento head, arruinando a aparência do seu e-mail. Mas ir linha por linha para inserir elementos de estilo para cada parágrafo, link e assim por diante foi uma chatice. Inlining automático para a vitória!

Uma das minhas ferramentas favoritas era um fluxo de trabalho Gulp para construir e-mails que compilavam arquivos HTML e Sass em HTML pronto para e-mail. No entanto, quando mudei para a indústria farmacêutica, essas ferramentas se tornaram menos convenientes. Com todas as nuances nos designs (por exemplo, uma tag <p> pode ser de uma cor enquanto outra tag <p> tem que ser de uma cor diferente), eu não podia mais depender do CSS na tag <style> ou inlining automático. Tive que codificar manualmente os estilos embutidos.

Então, o que fazer diante de tudo isso? No final do dia, armazenei os trechos de código (módulos de e-mail reutilizáveis) em um editor de código enquanto os modelos foram colocados em uma pasta no Dropbox. Este sistema reduziu o tempo de desenvolvimento pela metade. O que é ótimo para uma equipe de e-mail de uma pessoa, mas quando começamos a expandir a equipe, o processo desmoronou.

Aprenda a criar e-mails mais rápido com modelos Mais, mais, mais e-mails. Tempo ou recursos insuficientes. Quem pode se relacionar? Lance um fluxo de trabalho de e-mail mais produtivo e eficiente com modelos de e-mail escaláveis, reutilizáveis ​​e confiáveis. Obtenha seu guia →

O máximo em eficiência de desenvolvimento de e-mail: Litmus Builder

Fiquei muito feliz quando o Litmus Builder entrou na minha vida. O Builder está configurado para lidar com a criação, uso e armazenamento de todos os seus snippets e modelos para facilitar o dimensionamento para as equipes. E seus trechos estão todos alojados em um local na Biblioteca de projetos que pode ser facilmente acessada diretamente do Builder para que toda a sua equipe use.

Quando combinado com o sistema de design de e-mail que criamos no Litmus, somos capazes de criar a maioria dos e-mails em cerca de 10 minutos. E para e-mails novos ou personalizados, a estrutura básica pode ser feita nos mesmos 10 minutos, deixando mais tempo para codificar e testar e-mails personalizados e ficar atualizado com os clientes de e-mail em constante mudança.

Não acredita em mim? Fiz um vídeo mostrando a criação de nosso e-mail de atualização de produto recente. Todo o e-mail demorou pouco mais de 10 minutos para ser criado usando snippets, parciais e Editor Visual no Litmus Builder.

Veja como demorou para você mesmo (e descubra qual música eu toquei no processo):

Como se preparar para economizar tempo também

“Está tudo muito bem”, você diz, “mas quanto tempo você demorou para configurar todos esses snippets, parciais e modelos?” Fico feliz em informar que não demorou muito! Eu vou te dizer como.

Estrutura principal

Primeiro, você deve construir a estrutura principal que usará para cada e-mail. Esse é o código CSS e esqueleto padrão da sua empresa ao qual os snippets e parciais serão adicionados. Provavelmente, você já tem uma versão disso em algum lugar.

Em seguida, você salva como um modelo para que seja fácil de acessar. Esse padrão ou modelo inicial é o ponto de partida para qualquer e-mail personalizado que você criar e que não tenha um modelo já configurado.

Parciais x snippets

Em seguida, decida o que criar como parcial e o que criar como snippet.

No nível básico, parciais e fragmentos são blocos de código reutilizável que você irá inserir no clichê à medida que cria cada e-mail. Eles são inseridos no Litmus basicamente da mesma maneira, embora os snippets precisem de uma palavra-gatilho, enquanto os partials não.

A grande diferença é que as parciais não serão editáveis ​​no código. Portanto, descubra quais blocos você não vai mudar muito e faça essas parciais. Aqui no Litmus, esses são cabeçalhos e rodapés. Todo o resto são fragmentos.

Criação dos blocos de código

Depois de decidir como dividir seus blocos de código, você pode criá-los escolhendo criar um novo parcial ou fragmento no Litmus. É tão simples quanto colar seu código, dar a ele um nome e - no caso de snippets - uma palavra de gatilho.

Para criar um snippet:

Na Biblioteca de projetos, abra a biblioteca de trechos e clique no botão “Novo trecho” no canto superior direito. Na próxima tela, você pode nomear o snippet, atribuir uma palavra de gatilho e colar o código para o snippet.

Você pode criar mais trechos com o botão “Criar novo trecho” no canto superior direito, ou pode voltar para a biblioteca de trechos para encontrar seu novo trecho. Se você clicar em seu snippet, você abrirá a janela de detalhes à direita, onde poderá ver todas as informações e editar o snippet novamente.

Dica profissional: não se contenha com seus fragmentos. Sim, eles podem ser blocos de código, mas também podem ser menores do que isso. Temos snippets para valores hexadecimais das cores da marca, bem como snippets para emojis e headshots. Os snippets podem ser tão grandes ou tão pequenos quanto você quiser. Qualquer coisa que você usar com frequência deve ser um snippet.

Para criar um parcial:

Na Biblioteca de Projetos, você abre a biblioteca de parciais e, a seguir, clica no botão “Novo Parcial” no canto superior direito. Dê um nome ao seu parcial e você será levado a uma tela que se parece com o Builder. Codifique a parcial que você deseja (se você codificar seus snippets primeiro, poderá usá-los para criar as parciais). Clique em “Salvar”.

Para voltar à biblioteca parcial e encontrar sua nova parcial, clique no link “Parciais” no canto superior esquerdo sob o nome da parcial. Se clicar nele, você abrirá a janela de detalhes à direita, onde poderá ver todas as informações e editar a parcial novamente, caso tenha esquecido algo.

A partir daqui, você pode facilmente inserir fragmentos e parciais em seu e-mail no Litmus Builder. E é isso!

A jornada continua ...

Quando penso em como costumava criar e-mails, quase não consigo acreditar o quão longe cheguei. Eu nunca teria pensado que poderia construir um e-mail em algumas horas - mesmo com todas as minhas melhores dicas e truques - para fazê-lo em apenas 10 minutos!

Litmus Builder carregou o meu fluxo de trabalho de e-mail. Temos mais de 170 fragmentos e parciais que criamos no Litmus em cerca de três dias. Mas meu trabalho aqui ainda não terminou. À medida que nosso sistema de design de e-mail continua a evoluir, podemos editar nossos snippets e parciais ou adicionar mais conforme necessário. Depois de adicionados, eles estão prontos para uso imediatamente.

E com meu tempo economizado, agora posso me concentrar em fazer animações divertidas, aprender a linguagem de marcação de vetor (VML) e tentar descobrir exatamente o que está acontecendo no modo escuro do Gmail.

Então, o que você está esperando? Comece a enviar e-mails rapidamente (como eu!) Com o Litmus.

Comece seu teste grátis →

Cliente Litmus? Vá direto →