Advertisement
  1. Web Design
  2. Email Design
Webdesign

Tu Primer Correo Electrónico Responsivo Elaborado Con Foundation for Emails

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

En éste tutorial vamos a echar un primer vistazo al framework Foundation for Emails (Foundation para Correos Electrónicos) de ZURB. Lo configuraremos, explicaremos qué incluye, luego construiremos un sencillo correo electrónico responsivo.

Frameworks

En el último semestre me familiaricé con un par de frameworks y plantillas para crear correos electrónicos en HTML. Antes de éstas herramientas, el desarrollo real siempre era difícil para probar y arreglar, por no mencionar la creación de correos electrónicos responsivos.

Codificar correos electrónicos en HTML es una cosa muy diferente comparado con crear una página web normal. Es como retroceder en el tiempo hasta 1999. Necesitamos usar maquetados basados en tablas, aplicar estilos inline y alojar clientes como aplicaciones de escritorio (Thunderbird, Outlook y webmails (Gmail, Yahoo).

Para resolver éste rompecabezas y obtener resultados confiables, tenemos dos opciones:

Para los fines de éste tutorial, obviamente vamos a elegir la segunda opción.

¿Que incluye el paquete?

La capa de correo electrónico de ZURB proporciona una solución de paquete todo en uno para crear correos electrónicos.

Consiste de:

  • Gulp: un sistema creado para automatizar el flujo de trabajo
  • Inky HTML: para convertir código sencillo en tablas
  • Sass: el popular preprocesador CSS
  • Inliner: para incrustar los estilos inline
  • BrowserSync: un servidor de prueba para recargar
  • Image Compression: para comprimir imágenes de manera automática

Foundation for Emails se mantendrá alerta mientras codificas, compilando, poniendo los estilos inline, luego minificando el resultado listo para producción. Ha sido ampliamente probado en muchas aplicaciones móviles y de escritorio; para la lista completa de lo que es soportado puedes consultar la sección de compatibilidad. También puedes querer consultar la guía oficial cuándo comiences con el framework.

Configurando el Proyecto

Para todo éste proceso, uso Windows 10, versión de 64 bits. Si usas un sistema diferente todavía puedes continuar.

La capa funciona con Node.js y su gestor de paquetes npm. Para instalar Foundation for Emails abrimos nuestra terminal, luego usamos el comando:

Luego cambiamos directorio a un directorio del proyecto (dónde quieras ejecutar éste proyecto) usando cd [ruta del directorio del proyecto]. En el directorio del proyecto el siguiente comando debería ser:

Se te preguntará "¿Como se llama el proyecto? (sin espacios)", en el punto que ingreses un nombre del proyecto, pulsa enter, luego relájate por un momento mientras las dependiencias del proyecto son instaladas.

Arranca Tus Motores

Ahora configuramos todos los archivos de nuestro proyecto, nuestros módulos Node están instalados, y nuestros componentes Bower estan instalados. Para comenzar el framework y servidor, ve al directorio del proyecto y usa el comando:

La dirección web predeterminada (generalmente http://localhost:3000/) abrirá directamente en tu navegador tan pronto como lo hagas. Verás una flamante plantilla, lista para usar:

Src

En el directorio de tu proyecto encontrarás (entre otras cosas) un directorio src. En éste directorio encontrarás:

  • assets, estilos e imágenes
  • layouts, maquetados contenedor
  • page, códigos HTML base
  • partials, partes HTML reutilizables

La página índice puede encontrarse aquí: src/pages/index.html

Nota: si no estás familiarizado con Node.js, podrías querer consultar nuestra guía del principiante sólo para reforzar lo que estamos haciendo:

Grillas

Foundation utiliza una grilla de doce columnas. Vale la pena notar que el espacio horizontal en un correo electrónico es generalmente angosto, especialmente porque mucho correo electrónico ahora es visto en dispositivos móviles, así que es aconsejable usar sólamente una o dos columnas. Para mas sobre las mejores prácticas, consulta la siguiente guía:

Foundation for Emails hace uso de Inky, su propio Lenguaje de Plantillas que se enfoca en remover el marcado complejo que inevitablemente causa las tablas. Éstas son las etiquetas Inky para ayudarnos con el marcado para las grillas:

  • <container>: el elemento contenedor
  • <row>: el contenedor para las filas
  • <columns>: el elemento columna para el contenido real

También podemos especificar el tamaño de la grilla con los atributos small y large.

Ésta es una sección de una columna.

Ese marcado sencillo, cuándo es compilado, nos da lo siguiente:

Éste ejemplo separado es una fila de dos columnas (cada columna colapsa a una anchura de 12 en puntos de quiebre para small, quedando en una anchura de 6 para large).

En esencia, usaremos un elemento <container>, con una serie de elementos <row> y <column> para crear nuestra estructura.

Creando Nuestro Correo Electrónico

Ahora que entendemos el uso básico de Inky, cambiemos el asunto del correo electrónico. En pages/index.html podemos cambiar los siguientes detalles en el head del documento-podrías estar familiarizado con éste formulario de "Front Matter" si alguna vez has usado YAML:

Área de Logo

Para insertar una imagen de logo usamos HTML estándar <img> marcado dentro de un <column>. La ruta hacia la imagen del logo es relativa al documento, en el directorio assets. También agregué una línea vacía arriba de la imagen al insertar otro <row> con un <column> vacío:

Texto Introductorio

Luego añadí otro par de filas dentro del <container>, con algún texto introductorio, una bienvenida y un contenido del gran premio.

Más Imágenes

Agregué otra imagen sobre la ciudad de torneo, de nuevo la ruta relativa al documento.

Nota que la etiqueta <img> está dentro de una etiqueta <center>. Ésto desencadena una de las clases de alineación de Inky, centrando nuestra imagen sin que tengamos que preocuparnos de ello.

Detalles

La sección de detalles está un poco más involucrada, proporcionando más información sobre el evento. Para ésta sección usé dos columnas por fila, cada una explicando una parte específica. De nuevo, cada mitad colapsa a una columna en las pantallas de dispositivos móviles.

Botón

Finalmente agruegué un botón de Register (Registro) para registrarse. Usé el componente proporcionado <button>, centrándolo con la etiqueta <center>.

Versión Compilada

Mientras construyes y cambias las cosas, tu proyecto será continuamente actualizado en el navegador. El código compilado puede encontrarse en el directorio dist del proyecto, los archivos principales son index.html y css/app.css.

Creando el Correo Electrónico Terminado

Cuándo estés satisfecho con lo que tenemos, podemos usar éste comando para incrustar inline el código con los estilos y comprimir todo:

Después del proceso de creación, lo que encontrarás en el directorio dist es una versión minificada, adecuada para producción ¡pero ciertamente no adecuada para ninguna edición!

Conclusión

¡Has completado tu primera sesión, haciendo un correo electrónico HTML responsivo con el framework Foundation for Emails! Hicimos un sencillo maquetado, con filas de una y dos columnas, texto generoso y un botón Register al final.

Para inspiración, consulta la categoría Plantillas de Correo Electrónico en Envato Market. ¡Quizá diseñes, elabores y luego envíes el tuyo!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.