Criando emails que funcionam com Foundation for Email 2 — backup

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 de email 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 (vai pedir a senha do admin da máquina).

sudo npm install — global foundation-cli

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

A Foundation CLI vai te perguntar que tipo de projeto você está iniciando, se é um Website, um Webapp ou um Email. No nosso caso é um email e com as setas do seu teclado você navega entre as opções e seleciona com o enter.

Depois de selecionado “An email”, a Foundation CLI vai te perguntar o nome do projeto e esse nome será usado como nome da pasta que será criada.

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 .

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.

Montando nosso primeiro Email

Vou demonstrar o uso do Foundation for Emails com um email real que desenvolvemos aqui no Negocie.
A nossa Newsletter semanal foi toda desenvolvida nele e posso demonstrar todo o poder e facilidade de uso por ela.

O Foundation for Emails utiliza uma liguagem de template, assim quando por exemplo escrevemos <row></row>, ao compilar irá ser gerado todo html final. Com isso fica muito fácil escrever nosso código claro e limpo.

A primeira coisa que faço é limpar o código da index.html em pages/ pois vem o exemplo inicial.

Agora vou criar o SASS dos estilos que vou criar para o Email.

Crio o arquivo mystyles.scss dentro de src/assets/scss. Ai vou no arquivo app.scss e importo o mystyles.scss para ser compilado junto ao formar o app.css final de nosso email.

Pronto! Agora é começar a codificar o index.html e o mystyles.scss.

Começo criando os estilos em mystyles.scss e que vou usar no email, vejam que são bem poucos pois nosso email é relativamente simples e não precisa de muitos estilos. Basicamente são cores para fundo e textos e seus tamanhos.

Agora escrevo o início do email, aquela parte antes do Header, que tem os textos legais, o Logotipo do Negocie e qual Newsletter é.
Para o texto legal uso a tag {webview_text}, pois utilizo o Mautic para enviar emails e essa tag é convertida para o texto Versão Web e vem com o link para a versão do email a ser visualizada no Browser.

Veja na imagem abaixo a diferença entre o código que escrevo e o código compilado e perceba como é simples o desenvolvimento de um email com o Foundation for Emails! :)

A primeira janela é o código escrito com o template do Foundation for Emails e a segunda janela é o código compilado.

Explicando o código que escrevi:

<container>
Todo email deve conter um elemento container, é ele que determina a largura total do email para as grandes telas e também centraliza todo conteúdo. Então tudo vai dentro dele.
Ele gera, após compilado, uma tabela cheia, com <table>, <tr> e <td>.Dentro de <table> temos a classe .container.

<spacer>
Esse elemento é para criar um espaço vertical no seu email. Com ele podemos criar o espaço de qualquer tamanho que precisarmos e fica igual em todos dos devices e clientes de email.

<spacer size=”30" class=”fundo”></spacer>

Então, o size é o tamanho do espaço em pixel, nesse caso 30px. A classe que coloquei chamada .fundo é para esse bloco pegar a mesma cor cinza do fundo do email.
Você pode usar o <spacer> entre rows e containers e dentro de wrappers, rows, columns e containers.

<row>
A row é a linha que vamos colocar um conteúdo. Dentro dela é que colocamos as colunas que já vamos falar. Veja que temos também a classe .fundo para esse bloco também pegar a mesma cor cinza do fundo do email.

Ela é uma<table> com um <tbody> e <tr>. Dentro do<tr>, vamos colocar cada coluna que usamos. A<table> tem a classe .row.

<columns>
Dentro das colunas é onde colocamos o conteúdo. Mas para isso temos que falar que tamanho é nossa coluna.

<columns small=”12" large=”12" valign=”bottom”>

No nosso caso em falo que ela é uma coluna full, ou seja usa as 12 colunas do grid, tanto para telas grandes (large) como para telas pequenas (small) como de smartphones.

A estrutura de coluna é um pouco mais envolvente. No nível mais alto ela é um <th> com a classe.columns. Dentro desse<th> existe uma outra tabela cheia. O conteúdo de nossa coluna vai dentro de um <th>. Logo abaixo da tabela deve ter outro <th> com a classe .expander. Esse elemento vazio é o que auxilia a coluna a se expandir para o tamanho total em telas pequenas.

Ai dentro da coluna colocamos um <p> apenas com o texto legal. As classes usadas são para a cor e tamanho do texto.

Basicamente o que expliquei até agora se repete na próxima <row> com a diferença que usamos 2 colunas com o tamanho de 6 colunas do grid, ou seja metade cada uma, tanto para grandes como pequenas telas.
Então o logo e o texto da Newsletter ficam um do lado do outro em qualquer tela.

O valign usado nas colunas serve para o alinhamento vertical dos elementos.

TK Testes

TK Fechamento