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:
- seguir cualquiera de los tutoriales de Nicole Merlin
- elegir un moderno framework de correo electrónico con HTML como Foundation for Emails.
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:
1 |
npm install --global foundation-cli |
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:
1 |
foundation new --framework emails
|
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:
1 |
foundation watch |
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.
1 |
<container>
|
2 |
<row>
|
3 |
<columns small="12" large="12">Column One</columns> |
4 |
</row>
|
5 |
</container>
|
Ese marcado sencillo, cuándo es compilado, nos da lo siguiente:
1 |
<table class="container"> |
2 |
<tbody>
|
3 |
<tr>
|
4 |
<td>
|
5 |
<table class="row"> |
6 |
<tbody>
|
7 |
<tr>
|
8 |
<th class="small-12 large-12 columns first last"> |
9 |
<table>
|
10 |
<tr>
|
11 |
<th>Column One</th> |
12 |
<th class="expander"></th> |
13 |
</tr>
|
14 |
</table>
|
15 |
</th>
|
16 |
</tr>
|
17 |
</tbody>
|
18 |
</table>
|
19 |
</td>
|
20 |
</tr>
|
21 |
</tbody>
|
22 |
</table>
|
É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).
1 |
<container>
|
2 |
<row>
|
3 |
<columns small="12" large="6">Column One</columns> |
4 |
<columns small="12" large="6">Column Two</columns> |
5 |
</row>
|
6 |
</container>
|
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:
1 |
--- |
2 |
subject: Cake Poker Summer Tournament |
3 |
--- |
Á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:
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
</columns>
|
4 |
</row>
|
5 |
<row>
|
6 |
<columns small="12" large="12"> |
7 |
<img src="../assets/img/logo.png" alt="Cake Poker logo"> |
8 |
</columns>
|
9 |
</row>
|
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.
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
<p><strong>Our Dear Poker fan!</strong> We got news for you: the summer championship is coming soon. If you want to participate, please register your place before the 5th of June!</p> |
4 |
</columns>
|
5 |
</row>
|
6 |
<row>
|
7 |
<columns small="12" large="12"> |
8 |
<p>The grand prize is <strong>1 million euros</strong> and life time 10% online rakeback!</p> |
9 |
</columns>
|
10 |
</row>
|
Más Imágenes
Agregué otra imagen sobre la ciudad de torneo, de nuevo la ruta relativa al documento.
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
<center>
|
4 |
<img src="../assets/img/london.jpg" alt="London picture"> |
5 |
</center>
|
6 |
</columns>
|
7 |
</row>
|
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.
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
<p>Details about the tournament</p> |
4 |
</columns>
|
5 |
</row>
|
6 |
<row>
|
7 |
<columns small="12" large="6"> |
8 |
<p><em>London, Royal Hall of Gamblers</em></p> |
9 |
</columns>
|
10 |
<columns small="12" large="6"> |
11 |
<p>The perfect place for a modern poker championship.</p> |
12 |
</columns>
|
13 |
</row>
|
14 |
<row>
|
15 |
<columns small="12" large="6"> |
16 |
<p><em>Markuee Hotel</em></p> |
17 |
</columns>
|
18 |
<columns small="12" large="6"> |
19 |
<p>Nearby four star **** accomodation with full service and great food.</p> |
20 |
</columns>
|
21 |
</row>
|
22 |
<row>
|
23 |
<columns small="12" large="6"> |
24 |
<p><em>Massage</em></p> |
25 |
</columns>
|
26 |
<columns small="12" large="6"> |
27 |
<p>A free service for all tournament players.</p> |
28 |
</columns>
|
29 |
</row>
|
30 |
<row>
|
31 |
<columns small="12" large="6"> |
32 |
<p><em>Buy-in</em></p> |
33 |
</columns>
|
34 |
<columns small="12" large="6"> |
35 |
<p>500 + 50 GBP</p> |
36 |
</columns>
|
37 |
</row>
|
Botón
Finalmente agruegué un botón de Register (Registro) para registrarse. Usé el componente proporcionado <button>, centrándolo con la etiqueta <center>.
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
<center>
|
4 |
<button href="http://webdesign.tutsplus.com">Register</button> |
5 |
</center>
|
6 |
</columns>
|
7 |
</row>
|
8 |
<row>
|
9 |
<columns small="12" large="12"> |
10 |
</columns>
|
11 |
</row>
|
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:
1 |
npm run build |
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!
