Como usar a estrutura do Foundation for Emails para criar designs de e-mail responsivos

Existem muitas ferramentas de marketing que permitem criar designs de e-mail responsivos com facilidade. A questão é que você pode preferir ter mais controle sobre a aparência de seus e-mails, e a melhor maneira de fazer isso é projetá-los do zero. Usar uma estrutura como a Foundation for Emails oferece um compromisso excelente. Você não vai precisar para projetar cada componente a partir do zero, mas você obter o controle total sobre como, quando e onde usá-los.

Neste artigo, vamos primeiro explicar o que são estruturas de e-mail e como elas podem ajudá-lo. Em seguida, passaremos a discutir o Foundation for Emails e como você pode usá-lo para criar suas próprias campanhas de e-mail personalizadas e responsivas. Vamos ao trabalho!

O que são estruturas de email (e como elas podem ajudá-lo a criar emails melhores)

Os frameworks ainda exigem que você faça alguma codificação, mas o processo é muito simples para e-mails.

Em geral, uma estrutura é uma compilação de práticas, arquivos e códigos projetados para auxiliar no desenvolvimento de tipos específicos de produtos. Pense neles como blocos de construção de código que podem ajudá-lo a criar projetos complexos com mais rapidez, permitindo que você não reinvente a roda todas as vezes.

Existem estruturas para e-mail também, e é sobre isso que falaremos neste artigo. Vamos explorar alguns dos benefícios:

• Os elementos pré-construídos ajudam a criar e-mails com mais rapidez. Hoje em dia, a maioria dos e-mails inclui elementos além de imagens e texto, como botões e menus. Incluir esses elementos pode ser demorado, mas uma estrutura permite que você os insira e personalize instantaneamente.
• Responsivo fora da caixa. À medida que mais e mais pessoas recorrem a dispositivos móveis, você precisa garantir que seus e-mails sejam exibidos bem em suas telas. A maioria dos frameworks modernos são responsivos por padrão, o que significa que você tem uma coisa a menos com que se preocupar.
• Os modelos podem ajudá-lo a iniciar seus projetos. Muitas estruturas de e-mail modernas incluem uma variedade de modelos para ajudá-lo a criar campanhas rapidamente.

Como você pode ver, o tema comum aqui é que as estruturas permitem que você economize tempo. Há muitos casos em que você deseja codificar seus projetos do zero, mas vale a pena usar uma estrutura que pode permitir que você faça as coisas com mais rapidez e qualidade.

Uma introdução à estrutura do Foundation for Emails

Antes de prosseguir, é importante observar que há dois frameworks Foundation disponíveis online - Foundation for Sites e Foundation for Emails - e vamos nos concentrar no último ao longo deste artigo. O principal ponto de venda é sua grade responsiva. Este tipo de sistema não é revolucionário, mas a popularidade da Foundation é baseada em sua facilidade de uso.

Pegar a estrutura é bastante simples (mesmo se você não tiver nenhuma experiência em codificação) e você pode escolher entre duas versões - uma baseada em Cascading Stylesheets (CSS) e outra no Sass. Naturalmente, a versão Sass permite-lhe poupar ainda mais tempo, eliminando a necessidade de repetir stylings CSS, mas requer alguma familiaridade com Node.js.

Por fim, o Foundation for Email também oferece muitos 'padrões', como botões e menus, para tornar seu trabalho ainda mais simples. Para economizar mais tempo, você pode até usar um modelo em vez de criar um layout do zero.

Características principais:

• Usa uma grade responsiva para criar campanhas de e-mail modernas.
• Oferece uma versão CSS ou Sass da estrutura.
• Permite aproveitar os padrões para adicionar elementos comuns a seus e-mails rapidamente.
• Usa layouts para agilizar ainda mais o processo de criação de e-mail.

Preço: Grátis | Mais Informações

Como usar o Foundation for Emails para criar designs modernos (em 4 etapas)

Como mencionamos, existem duas versões do Foundation for Emails. Para esta seção, vamos usar a variação CSS, pois requer menos trabalho para configurar. Além disso, os resultados finais devem ser iguais - todas as mudanças são como você chega lá.

Se você quiser ver a versão do Sass em ação ou aprender mais sobre como usá-la, comece com este ótimo tutorial.

Etapa 1: Baixe o Foundation for Email Files

Em primeiro lugar, vá para a página Foundation for Email Getting Started e clique no botão Download Starter Kit no subtítulo CSS Version :

Depois de obter o arquivo, descompacte-o e extraia seu conteúdo em uma nova pasta. Neste estágio, sua pasta deve conter um arquivo index.html e duas subpastas - uma para seu CSS e outra para seus modelos.

Por enquanto, execute seu editor de texto favorito e abra o arquivo index.html com ele. Deve estar bem vazio, mas vamos consertar isso em um momento.

Etapa 2: familiarize-se com o sistema de grade

A capacidade de resposta do Foundation for Email é baseada em seu sistema de grade flexível. Se estiver criando um e-mail do zero, você desejará criar sua própria grade para segmentar as seções de seu e-mail. Para fazer isso, vamos usar três componentes diferentes: contêineres, linhas e colunas.

Abra o arquivo index.html do Foundation em seu editor de texto e role para baixo até a seção do corpo :

<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!--  Your grid goes here  -->          
</center>
</td>
</tr>
</table>
</body>
</html>

Como você pode ver, o corpo do seu e-mail contém uma tabela predefinida que não vamos tocar. Em vez disso, vamos apenas adicionar nossos próprios elementos de grade à seção onde se lê <! - Sua grade vai aqui -> . Vamos começar com o código que você precisa usar para seus contêineres:

<table class="container">
<tr>
<td></td>
</tr>
</table>

Agora, vamos adicionar uma linha lá:

<table class="row"> <tr> <th></th> </tr> </table> 

Finalmente, podemos dividir essa linha em colunas:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="expander"></th>
</tr>
</table>

Lembre-se de que cada linha consiste em até 12 colunas. O código acima informa ao seu cliente de e-mail que ele deve exibir seu conteúdo usando as 12 colunas completas em telas pequenas , como dispositivos móveis ( pequeno-12 ), mas ocupar apenas seis em desktops ( grande-6 ).

O problema é que, se o seu e-mail está sendo exibido em uma tela grande, há seis colunas vazias, então precisamos adicionar uma segunda tabela para corrigi-lo:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="small-12 large-6 last columns">
Column Two
</th>
<th class="expander"></th>
</tr>
</table>

Como você pode ver, as duas colunas são basicamente iguais. No entanto, eles têm duas classes diferentes, primeiras colunas e últimas colunas . Eles informam ao seu cliente de e-mail qual é a primeira e a última coluna da sua linha, e as colunas intermediárias não precisam usá-las.

Se você abrisse agora o arquivo index.html em um navegador, veria o seguinte:

É bastante simples, sim, mas a mecânica deve ser evidente neste estágio. Cada e-mail pode ter quantas linhas você quiser e você pode ter até 12 colunas para cada linha. Por enquanto, continue brincando com o sistema de grade até encontrar um layout de que goste e use marcadores de posição de texto para ajudá-lo a identificá-los até começar a adicionar elementos.

Etapa 3: Adicionar componentes aos seus e-mails

Foundation for Email packs em muitos componentes, e os mais comumente usados ​​são botões, imagens de plano de fundo e subtítulos. Eles são muito simples, então vamos examiná-los em ordem. Para adicionar botões, você precisará usar o seguinte código em uma ou mais de suas colunas:

<table class="button tiny success">
<tr>
<td>
<table>
<tr>
<td><a href="#">The text of your button</a></td>
</tr>
</table>
</td>
</tr>
</table>

Este código adiciona um pequeno botão simples com um fundo verde ao seu e-mail. Os elementos-chave aqui são as classes minúsculas e de sucesso . O primeiro determina o tamanho do botão e o segundo, sua cor. Em vez de adicionar todas as classes disponíveis aqui, vamos vinculá-lo ao recurso oficial da Fundação em botões onde você pode examiná-los em seu lazer.

Agora vamos passar para as imagens de fundo. Eles são um pouco mais complicados, porque você precisa usar a classe wrapper para fazê-los ocupar toda a largura de sua linha e atribuir um plano de fundo específico a eles usando CSS:

<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
Your content
</td>
</tr>
</table>

Por último, mas não menos importante, vamos falar sobre subtítulos. Estes são os mais simples do grupo - tudo o que você precisa fazer é agrupar seu texto nas tags necessárias:

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>

É tão fácil quanto isso! Usar esses três elementos é suficiente para criar alguns e-mails bonitos. O segredo, é claro, é estilizá-los com CSS de acordo com sua preferência, o que nos leva à nossa etapa final.

Etapa 4: estilize seu e-mail usando CSS

Alguns clientes de e-mail (como o Microsoft Outlook) retiram algumas das marcas de estilo de seus arquivos HTML. Isso é feito para que os e-mails sejam processados ​​sem problemas, bem como para remover ameaças de segurança em potencial. No entanto, o resultado é que seus e-mails parecerão muito enfadonhos, a menos que você adicione seu CSS diretamente ao seu HTML (ou embutido ).

Dessa forma, seu conteúdo e seu estilo serão carregados como um único arquivo e devem funcionar perfeitamente na maioria dos clientes de e-mail modernos. Esta é a aparência de um elemento HTML com CSS embutido:

<table class="wrapper" align="center"><tbody><tr><td class="wrapper-inner" style="padding:20px">content</td></tr>

Isso pode ficar um pouco confuso, por isso recomendamos trabalhar em seus arquivos HTML e CSS separadamente e, em seguida, usar uma ferramenta como o Foundation Inliner para combiná-los para você. Basta colar seu código, clicar em um botão e ele fará o resto para você.

Depois de ter seu arquivo HTML embutido, você pode prosseguir e testá-lo usando uma ferramenta de marketing por e-mail, o que é sempre uma boa ideia, antes de enviá-lo aos seus assinantes.

Conclusão

Existem muitas maneiras de criar e-mails funcionais e responsivos. No entanto, usar uma estrutura como a Foundation for Emails é uma ótima opção se você está procurando flexibilidade. Ele permite que você crie e-mails do zero usando componentes predefinidos ou acelere o processo usando modelos. Independentemente do que você escolher, isso deve reduzir drasticamente o tempo gasto na criação de e-mails.

Para recapitular, aqui estão as quatro etapas de que você precisa para criar e-mails modernos com o Foundation for Emails:

1. Baixe os arquivos do framework.
2. Familiarize-se com o sistema de grade.
3. Use componentes para seus e-mails.
4. Estilize seu e-mail usando CSS.

Você tem alguma dúvida sobre como usar a estrutura do Foundation for Emails? Pergunte na seção de comentários abaixo!

Imagem em miniatura do artigo por Faberr Ink / shutterstock.com.