Cómo usar Foundation for Emails Framework para crear diseños de correo electrónico receptivos

Qué son los marcos de correo electrónico (y cómo pueden ayudarlo a crear mejores 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 construcción de código que pueden ayudarlo a crear proyectos complejos más rápido, permitiéndole no reinventar la rueda cada vez.

También hay 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 las imágenes y el texto, como botones y menús. Incluir estos elementos puede llevar mucho tiempo, pero un marco le permite insertarlos y personalizarlos al instante.
• Responsivo 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 manera predeterminada, lo que significa que tiene una cosa menos de qué preocuparse.
• Las plantillas pueden ayudarlo a poner en marcha sus 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 le permita hacer las cosas más rápido y con una mayor calidad.

Una introducción al marco Foundation for Emails

Antes de continuar, es importante tener en cuenta que hay dos marcos de Foundation 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.

Recoger 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 los estilos CSS, pero requiere cierta familiaridad con Node.js.

Finalmente, Foundation for Email también le brinda muchos ‘patrones’, como botones y menús, para simplificar aún más su trabajo. Para ahorrar más tiempo, incluso puede usar una plantilla en lugar de diseñar un diseño desde cero.

Características clave:

• 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 rápidamente elementos comunes a sus correos electrónicos.
• 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 usar Foundation for Emails para crear diseños modernos (en 4 pasos)

Como mencionamos, hay dos versiones de Foundation for Emails. Para esta sección, vamos a utilizar la variación de CSS, ya que requiere menos trabajo de configuración. Además, los resultados finales deben verse iguales: todo lo que cambia es cómo 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 excelente tutorial .

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

En primer lugar, diríjase a la página de inicio de Foundation for Email y haga clic en el botón Descargar kit de inicio debajo del subtítulo Versión de 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 n.º 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, vamos a usar 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 :

Como puede ver, el cuerpo de su correo electrónico contiene una tabla preestablecida que no vamos a tocar. En su lugar, 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:

Ahora, agreguemos una fila allí:

Finalmente, podemos dividir esa fila en columnas:

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 debe ocupar 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:

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

Foundation for Email incluye muchos componentes, y los más utilizados son los botones, las imágenes de fondo y los subtítulos. Son bastante simples, así que vamos a repasarlos en orden. Para agregar botones, deberá usar el siguiente código dentro de una o más de sus columnas:

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 examinarlos cuando lo desee.

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

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:

¡Es tan fácil como eso! Usar 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 a nuestro paso final.

Paso #4: Dale estilo a tu 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 reproduzcan sin problemas, así como para eliminar posibles amenazas de 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:

Esto puede complicarse un poco, por lo que recomendamos trabajar en sus archivos HTML y CSS por separado y luego usar una herramienta como Foundation Inliner para combinarlos. 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 con una herramienta de marketing por correo electrónico , lo cual siempre es una buena idea, antes de enviarlo a sus suscriptores.

Conclusión

Hay muchas maneras 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 usando componentes prediseñados o acelerar el proceso usando  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ícese con el sistema de cuadrícula.
3. Utilice componentes para sus correos electrónicos.
4. Dale estilo a tu correo electrónico usando CSS.

¿Tiene alguna pregunta sobre cómo usar 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.