Criando emails que funcionam com Foundation for Email 2

Email é uma parte vital, se não uma das mais importantes em um sistema online. Através dele, você comunica, ensina, incentiva e atualiza o usuário sobre tudo que ocorre na “vida paralela” de um sistema.

Para nós não podia ser diferente, temos uma preocupação muito grande com essas “correspondências” que chegam na inbox de milhares de pessoas diariamente através do Negocie.

Sempre estamos buscando maneiras e ferramentas que nos auxiliem a melhorar o desenvolvimento dessa parte no sistema, testar para os diversos clientes de emails que existem e também devices, já que o usuário, do outro lado, pode receber e visualizar esses emails a qualquer momento e em qualquer dispositivo, como seu computador ou seu smartphone.

E vamos ser sinceros! Desenvolver emails é bem chato e burocrático. Primeiro por que voltamos a Web dos anos 90. Sim, não temos flexibilidade pra desenvolvê-los como uma página web, tudo é em tabelas, mil restrições, clientes que “comem” determinadas tags e muito mais.

Hoje estamos utilizando o framework Foundations for Emails da Zurb e quero mostrar pra vocês nas próximas linhas como tornar gostoso o desenvolvimento de email com ele.

Escolhendo por onde começar

O Foundations for Emails possui dois modelos para uso, uma versão em CSS que você baixa o Starter Kit com o boilerplate HTML, o Foundations for Emails CSS e você pode começar com alguns modelos de emails que vem junto.

O outro modelo é a versão SASS, desenvolvida em Node.js, onde você tem um melhor controle sobre os estilos visuais do email e conta com algumas automações muito interessantes como compilação do SASS, compressão de imagens, partials e produção da versão inline do HTML (na versão CSS eles tem uma página para gerar a versão inline).

Nós aqui no Negocie utilizamos a versão SASS justamente por essas vantagens de poder ter mais controle nos estilos e todas essas automações, vamos falar com detalhes como utilizar essa versão.

Starting your Engines

Para utilizar a versão SASS do Foundations for Emails você precisa do Node.js instalado em sua máquina. Se você não tem, vá ao site do Node.js, baixe o instalador para o seu sistema operacional e o instale.

Instalando o Foundations for Emails
Toda instalação ocorre via terminal e é bem tranquila de fazer.

A primeira coisa a fazer é instalar a Foundation CLI que é a base para criarmos futuros pacotes de emails. Esse passo é feito apenas uma vez, depois para futuros projetos de emails não e mais preciso rodá-lo, vamos lá:

npm install — global foundation-cli

Se ocorrer algum erro de permissão no Linux ou macOS, tente colocar o prefixo sudo.

sudo npm install — global foundation-cli

PS.: Se precisar instalar o npm, nesse link tem como fazer isso.

Bom, com a Foundation CLI instalada em seu computador, fica super tranquilo criar novos projetos de emails. A primeira coisa é você ir para a pasta onde você quer guardar seus projetos de emails, para isso digite cd [espaço] e arraste a pasta para cima do terminal e ele vai autocompletar com a linha do caminho da pasta, depois tecle enter.

cd [arraste a pasta dos projetos de email]

Estando na pasta digite a linha abaixo para criar uma nova pasta de um novo projeto de email:

foundation new — framework emails

Primeiro ele vai perguntar o que você vai criar hoje, com as setas do teclado você vai até a última opção que é “An email”, ou seja, um email.

E depois de selecionado, ele vai te perguntar o nome do projeto e esse nome será usado como nome da pasta que será criada.

Foundation CLI perguntando o nome do projeto

Após isso, todo o projeto e suas dependências serão criadas na pasta. Esse processo demora por volta de 1 minuto, dependendo da velocidade de sua internet.

Iniciando o Servidor
Com tudo instalado é hora de subir o servidor para começarmos a trabalhar. No terminal digite cd project, onde project é o nome que você acabou de digitar para o projeto. Depois inicie o Servidor digitando:

npm start

Esse comando vai criar todo o processo incluindo os parsing dos HTML, SASS, compressão das imagens e levantar o servidor. Quando tudo isso acontecer, no final, em seu browser vai abrir e apontar para seu projeto, mostrando a imagem abaixo que é o arquivo index.html .

index.html

Como você pode ver na imagem, o Foundations for Emails traz algumas páginas modelos que você pode aproveitar para iniciar.

Estrutura de arquivos

Estrutura de arquivos com a index.html e a default.html (boilerplate)

A pasta do projeto possui duas pastas principais, a src/ e a dist/. A primeira é onde vamos trabalhar e a segunda é onde ficam os arquivos HTML e CSS compilados e que usamos para enviar para as ferramentas de envio como o Mautic, MailChimp, Campaign Monitor, etc…

Abaixo a estrutura da pasta src/ que usamos:

• assets/: pasta com os arquivos SASS e as imagens.
• layouts/: Boilerplate HTML ou seja, a master de tudo com o <head>, <html> e <body> onde vai entrar o layout do email que estará na pasta pages/.
• pages/: Arquivos HTMLs dos emails, são os arquivos que vamos trabalhar o email.
• partials/: “Pedaços” reusáveis de HTML que podemos injetar nas páginas dos emails.

Partindo para a prática

Dentro da pasta pages/ o Foundations for Emails traz vários templates para auxiliar no desenvolvimento, como mostramos acima. Com eles você pode estudar e desenvolver muito tipos de emails rapidamente.

Por isso, vou demonstrar como montamos nosso modelo de Newsletter, partindo do zero, sem utilizar esses templates. Mostrando assim e flexibilidade que o Foundations for Emails nos dá. :)

Newsletter enviada semanalmente

Na imagem acima temos nosso Newsletter, ele é formado por blocos que podem variar de quantidade a cada email dependendo das notícias que temos para informar ao usuários do Negocie.

Essa montagem facilita a modularização do email, que dividimos assim:

• Header
• CTAs (call to actions)
• Artigo em destaque
• Artigos recentes
• Dica rápida
• Footer

O GRID

O Foundations for Emails possui sua estrutura de Grid, onde você estrutura o conteúdo para que ele fique ajustado a cada tipo de tela que vai visualizar seus emails e com o primeiro bloco de nossa Newsletter vou mostrar como ele é montado.

Basicamente o GRID do Foundations for Emails funciona assim:

Container:

Todo email deve contar um Container. É ele que determina a largura máxima do email em telas grandes e deixa o conteúdo no centro.

<container>All the rows go here</container>

Rows

Uma Row é a <table> com o <tbody> e <tr>. Dentro da <tr>, vamos colocar as colunas do nosso conteúdo.

<container> 
   <row>
     Columns go here
   </row>
</container>

Columns

A estrutura de uma coluna é um pouco mais envolvente. Em um primeiro nível, uma coluna é um <th> com a classe .columns.

Dentro desse <th> existe outra full table. O conteúdo da coluna vai dentro de um <th>. Logo abaixo vem outro <th> com a classe .expander. Esse elemento vazio é para auxiliar a expansão da coluna para sem da largura total em pequenas telas com de smartphones.

<columns>This is a column. Columns contain your content.</columns>

Tamanho da coluna

Uma coluna pode ter o tamanho de 1 a 12, que é o tamanho do Grid.

Setamos o tamanho das colunas com classes .large-n e .small-n, onde o n o tamanho em largura da coluna. A classe .small- é usada para os clientes de email mobiles, enquanto a classe .large- é aplicada nos clientes de email desktop.

Então, setamos apenas os atributos small e large com o tamanho que queremos para a coluna. Se não colocarmos o atributo small, automaticamente será usado o tamanho 12 por padrão. Agora se setarmos o atributo small e nada para o large, large vai pegar o mesmo tamanho do small.

O legal de tudo isso é que você sé precisa saber a teoria de como o Foundations for Emails monta a estrutura html, por que para montarmos nosso email utilizamos um código muito mais simples e o Foundations for Emails compila tudo pra gente! :)

Veja como fica uma estrutura completa com o Foundations for Emails:

<container> 
   <row>
     <columns small="12" large="12">This is a column. Columns contain your content.</columns>
   </row>
</container>

Esse código compilado pelo Foundations for Emails fica assim:

:-O

Agora na imagem abaixo, você pode ver o código completo de nosso Newsletter #17. Repare nos blocos como citei acima. Isso facilita muito a manutenção do Newsletter, ou seja, criá-las semanalmente ficou muito simples.

Outro ponto que facilita muito a manutenção do código são os Partials. Veja na imagem alguns pontos onde temos assim {{> nomedopartial}}. Essa instrução vai buscar na pasta partials/ o html com o nome e ele tem um trecho de código que será inserido quando compilado o email.

Por exemplo, {{> rodape01}} tem o seguinte código:

<row class=”fundo”>
  <columns small=”12" large=”12">
   <p class=”text-center textos-fora textos-legais”>Somos contra SPAM! <span>{unsubscribe_text}</span></p>
   <spacer size=”7" class=”fundo”></spacer>
   <p class=”text-center textos-fora textos-legais”><a href=”http://mkt.negocieapp.com.br/asset/7:site-via-emails">www.negocieapp.com.br</a></p>
   </columns>
</row>

{{> cta01}} e {{> cta02}} são exemplos de partials que podemos colocar nos emails. De maneira rápida podemos colocar call to actions diferenciados nos emails de acordo com as estratégias definidas.

Como você pode ver no código, a estrutura fica bem simples e clara. Outro componente muito bom que possui o Foundations for Emails é o Spacer. Ele nos ajuda a criar os espaços verticais, que por natureza são inconsistentes nos emails. Com o spacer ele fica o mesmo em todos os tipos de tela e clientes de email. Repare que usamos bastante o spacer com vários tamanhos no nosso Newsletter.

Testes de compatibilidade

O Foundations for Emails tem excelente compatibilidade com os clientes de email. Para os testes usamos o Litmus e também criamos um email em cada um dos principais clientes web que são Yahoo, Gmail, Outlook e iCloud, enviamos o email para essas contas para testar como fica em cada uma delas.

Abaixo a tabela de compatibilidade do Foundations for Emails:

Inline email

Por fim, a última etapa de um email é torná-lo inline. Isso significa declarar todos os estilos em cada uma das marcações do html. Isso se deve ao fato de que alguns clientes de email, como por exemplo o gmail, não considera ou remove os estilos declarados na head e por isso se não tiver declarado no html ele é perdido e seu email fica zuado.

Mas não se desespere, pois você não vai precisar fazer isso na mão. Como citei la no início desse artigo, se você estiver usando a versão CSS, existe uma página onde você copia seu código e ele gera a versão inline.

Como usamos a versão SASS, podemos fazer isso direto. :)
Para isso, ao iniciar o servidor de email digite assim:

npm run build

Esse processo é similar ao npm start mas ao final ele gera o código inline e minimificado, otimizando ainda mais o email.

No link abaixo tem o ZIP do index.html com o código inline da Newsletter #17 do Negocie para você ver e estudar como fica.

http://mkt.negocieapp.com.br/medium/index-nl-17-inline.zip

Qualquer dúvida envie para meu email alex@negocieapp.com.br que terei o prazer em ajudar. :-D

E se você ainda não conhece, o Negocie (www.negocieapp.com.br) é o aplicativo web mais completo para a gestão de propostas comerciais. Crie, envie, saiba se seu cliente abriu o email e visualizou a proposta, negocie em tempo real e otimize suas vendas.

Até a próxima!

Ahhhhh! Gostou do artigo? Clica no coraçãozinho pra dar like nele e ajudar mais pessoas acharem! :D