Cómo utilizar el marco Foundation for Emails para crear diseños de correo electrónico receptivos

Hay muchas herramientas de marketing que le permiten crear diseños de correo electrónico receptivos con facilidad. Es posible que prefiera tener más control sobre el aspecto de sus correos electrónicos, y la mejor manera de hacerlo es diseñarlos desde cero. El uso de un marco como Foundation for Emails le proporciona un compromiso excelente. No necesitará diseñar todos los componentes desde cero, pero sí tendrá control total sobre cómo, cuándo y dónde usarlos.

En este artículo, primero explicaremos qué son los marcos de correo electrónico y cómo pueden ayudarlo. Luego, pasaremos a discutir Foundation for Emails y cómo puede usarlo para crear sus propias campañas de correo electrónico personalizadas y receptivas. ¡Pongámonos a trabajar!

Qué son los marcos de correo electrónico (y cómo pueden ayudarlo a crear mejores correos electrónicos)

Los marcos todavía requieren que hagas algo de codificación, pero el proceso es muy simple para los correos electrónicos.

En general, un marco es una compilación de prácticas, archivos y código diseñado para ayudar en el desarrollo de tipos específicos de productos. Piense en ellos como bloques de código que pueden ayudarlo a crear proyectos complejos más rápido, permitiéndole no reinventar la rueda cada vez.

También existen marcos para el correo electrónico, y de eso vamos a hablar en este artículo. Exploremos algunos de los beneficios:

• Los elementos prediseñados lo ayudan a diseñar correos electrónicos más rápido. Hoy en día, la mayoría de los correos electrónicos incluyen elementos más allá de imágenes y texto, como botones y menús. Incluir estos elementos puede llevar mucho tiempo, pero un marco le permite insertarlos y personalizarlos al instante.
• Responsive fuera de la caja. A medida que más y más personas recurren a los dispositivos móviles, debe asegurarse de que sus correos electrónicos se muestren bien en sus pantallas. La mayoría de los marcos modernos responden de forma predeterminada, lo que significa que tiene una cosa menos de la que preocuparse.
• Las plantillas pueden ayudarte a poner en marcha tus diseños. Muchos marcos de correo electrónico modernos incluyen una variedad de plantillas para ayudarlo a crear campañas rápidamente.

Como puede ver, el tema común aquí es que los marcos le permiten ahorrar tiempo. Hay muchos casos en los que querrá codificar sus proyectos desde cero, pero vale la pena usar un marco que pueda permitirle hacer las cosas más rápido y con mayor calidad.

Introducción al marco Foundation for Emails

Antes de continuar, es importante tener en cuenta que hay dos marcos fundamentales disponibles en línea: Foundation for Sites y Foundation for Emails, y nos centraremos en este último a lo largo de este artículo. El principal punto de venta es su cuadrícula receptiva. Este tipo de sistema no es revolucionario, pero la popularidad de Foundation se basa en su facilidad de uso.

Elegir el marco es bastante sencillo (incluso si no tiene experiencia en codificación), y puede elegir entre dos versiones: una basada en hojas de estilo en cascada (CSS) y la otra en Sass. Naturalmente, la versión Sass le permite ahorrar aún más tiempo al eliminar la necesidad de repetir estilos de CSS, pero sí requiere cierta familiaridad con Node.js.

Por último, Foundation for Email también le proporciona una gran cantidad de "patrones", como botones y menús, para simplificar aún más su trabajo. Para ahorrar más tiempo, incluso puede utilizar una plantilla en lugar de diseñar un diseño desde cero.

Características principales:

• Utiliza una cuadrícula receptiva para crear campañas de correo electrónico modernas.
• Ofrece una versión CSS o Sass del marco.
• Le permite aprovechar los patrones para agregar elementos comunes a sus correos electrónicos rápidamente.
• Utiliza diseños para agilizar aún más el proceso de creación de correo electrónico.

Precio: Gratis | Más información

Cómo utilizar Foundation for Emails para crear diseños modernos (en 4 pasos)

Como mencionamos, hay dos versiones de Foundation for Emails. Para esta sección, usaremos la variación CSS ya que requiere menos trabajo para configurar. Además, los resultados finales deben verse iguales: todo lo que cambia es cómo se llega allí.

Si desea ver la versión de Sass en acción u obtener más información sobre cómo usarla, puede comenzar con este gran tutorial.

Paso n. ° 1: descargue la Fundación para archivos de correo electrónico

En primer lugar, diríjase a la página de introducción de Foundation for Email y haga clic en el botón Descargar Starter Kit debajo del subtítulo de la versión CSS :

Una vez que tenga el archivo, descomprímalo y extraiga su contenido en una nueva carpeta. En esta etapa, su carpeta debe contener un archivo index.html y dos subcarpetas, una para su CSS y otra para sus plantillas.

Por ahora, ejecute su editor de texto favorito y abra el archivo index.html con él. Debería ser bastante simple, pero lo arreglaremos en un momento.

Paso # 2: familiarícese con el sistema Grid

La capacidad de respuesta de Foundation for Email se basa en su sistema de cuadrícula flexible. Si está armando un correo electrónico desde cero, querrá crear su propia cuadrícula para segmentar las secciones de su correo electrónico. Para hacer eso, usaremos tres componentes diferentes: contenedores, filas y columnas.

Abra el archivo index.html de su Fundación dentro de su editor de texto y desplácese hacia abajo hasta la sección del cuerpo :

<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 puede ver, el cuerpo de su correo electrónico contiene una tabla preestablecida que no vamos a tocar. En su lugar, solo vamos a agregar nuestros propios elementos de cuadrícula a la sección donde dice <! - Su cuadrícula va aquí -> . Comencemos con el código que necesita usar para sus contenedores:

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

Ahora, agreguemos una fila allí:

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

Finalmente, podemos dividir esa fila en columnas:

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

Tenga en cuenta que cada fila consta de hasta 12 columnas. El código anterior le dice a su cliente de correo electrónico que debe mostrar su contenido usando las 12 columnas completas en pantallas pequeñas como dispositivos móviles ( pequeño-12 ), pero solo ocupa seis en computadoras de escritorio ( grande-6 ).

El problema es que si su correo electrónico se muestra en una pantalla grande, hay seis columnas vacías, por lo que debemos agregar una segunda tabla para solucionarlo:

<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 puede ver, ambas columnas son básicamente iguales. Sin embargo, tienen dos clases diferentes, primeras columnas y últimas columnas . Estos le dicen a su cliente de correo electrónico cuáles son la primera y la última columna de su fila, y las columnas intermedias no necesitan usarlas.

Si ahora abriera su archivo index.html en un navegador, esto es lo que vería:

Es bastante simple, sí, pero la mecánica debería ser evidente en esta etapa. Cada correo electrónico puede tener tantas filas como desee y puede tener hasta 12 columnas para cada fila. Por ahora, siga jugando con el sistema de cuadrícula hasta que encuentre un diseño que le guste y use marcadores de posición de texto para ayudarlo a identificarlos hasta que comience a agregar elementos.

Paso # 3: agregue componentes a sus correos electrónicos

Paquetes de Foundation for Email en una gran cantidad de componentes, y los más utilizados son botones, imágenes de fondo y subtítulos. Son bastante simples, así que veámoslos en orden. Para agregar botones, deberá usar el siguiente código dentro de una o más de sus columnas:

<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 agrega un pequeño botón simple con un fondo verde a su correo electrónico. Los elementos clave aquí son las clases pequeñas y exitosas . El primero rige el tamaño de su botón y el segundo su color. En lugar de agregar todas las clases disponibles aquí, lo vincularemos al recurso oficial de la Fundación en botones donde puede leerlos en su tiempo libre.

Ahora pasemos a las imágenes de fondo. Estos son un poco más complicados, porque necesita usar la clase contenedora para hacer que ocupen todo el ancho de su fila y asignarles un fondo específico usando CSS:

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

Por último, pero no menos importante, hablemos de los subtítulos. Estos son los más simples del grupo: todo lo que necesita hacer es envolver su texto dentro de las etiquetas requeridas:

<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>

¡Es tan fácil como eso! El uso de estos tres elementos es suficiente para crear algunos correos electrónicos atractivos. El secreto, por supuesto, es diseñarlos con CSS al contenido de su corazón, lo que nos lleva al paso final.

Paso # 4: Estilo de su correo electrónico usando CSS

Algunos clientes de correo electrónico (como Microsoft Outlook) eliminan algunas de las etiquetas de estilo de sus archivos HTML. Esto se hace para que los correos electrónicos se procesen sin problemas, así como para eliminar posibles amenazas a la seguridad. Sin embargo, el resultado es que sus correos electrónicos se verán bastante aburridos a menos que agregue su CSS directamente a su HTML (o en línea ).

De esa manera, tanto su contenido como su estilo se cargarán como un solo archivo y deberían funcionar perfectamente en la mayoría de los clientes de correo electrónico modernos. Así es como se ve un elemento HTML con CSS en línea:

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

Esto puede resultar un poco complicado, por lo que recomendamos trabajar en sus archivos HTML y CSS por separado, y luego usar una herramienta como Foundation Inliner para combinarlos por usted. Simplemente pegue su código, haga clic en un botón y se encargará del resto por usted.

Una vez que tenga su archivo HTML en línea, puede continuar y probarlo utilizando una herramienta de marketing por correo electrónico, que siempre es una buena idea, antes de enviarlo a sus suscriptores.

Conclusión

Hay muchas formas de crear correos electrónicos funcionales y receptivos. Sin embargo, usar un marco como Foundation for Emails es una excelente opción si busca flexibilidad. Le permite diseñar correos electrónicos desde cero utilizando componentes prediseñados o acelerar el proceso mediante el uso de plantillas. Independientemente de lo que elija, debería reducir drásticamente el tiempo que dedica a crear correos electrónicos.

En resumen, estos son los cuatro pasos que necesita para crear correos electrónicos modernos con Foundation for Emails:

1. Descarga los archivos del framework.
2. Familiarízate con el sistema de red.
3. Utilice componentes para sus correos electrónicos.
4. Diseñe su correo electrónico con CSS.

¿Tiene alguna pregunta sobre cómo utilizar el marco Foundation for Emails? ¡Pregunte en la sección de comentarios a continuación!

Imagen en miniatura del artículo de Faberr Ink / shutterstock.com.