Para evitar los grandes problemas que siempre ha llevado la maquetación de emails, ZURB ha desarrollado la segunda versión de Ink, llamada Foundation for Emails.
La gran ventaja de esta nueva versión es que incluye un lenguaje de programación intermedio llamado Inky que nos abstrae de todo el complejo marcado de HTML necesario con el uso de tablas.
Para seguir el flujo de trabajo de Zurb, proveen una serie de librerías que permiten automatizar las tareas de compilar Inky a HTML y aplicar los estilos en linea mediante scripts de GULP.
En este artículo vamos a proponer un flujo de procesamiento de estos archivos programado en PHP, de manera que podamos de forma fácil, generar a través de plantillas básicas generar nuestros HTMLs responsivos y fácilmente reutilizables.
Para ello, nos vamos a apoyar en dos librerías
La primera de ellas, nos va a permitir compilar nuestros archivos .inky a archivos .html y emogifier nos permitirá añadir nuestra hoja de estilos como atributos en línea, de forma que garanticemos compatibilidad con GMail.
El flujo de trabajo es el siguiente:
- Cargamos un fichero .INKY como una cadena de texto
- Cargamos nuestras hojas de estilo como cadenas de texto
- Lo encapsulamos en un documento HTML
- Pasamos el código INKY a HTML
- Añadimos los estilos en línea
Vamos a detallar a continuación un poco más este proceso suponiendo que tenemos la siguiente estructura de archivos
css/
foundation.css
emails.css
templates/
remember_password.inky
El archivo remember_password.inky contendrá la plantilla básica en INKY de nuestro email. Puede ser algo como sigue
<wrapper class="header">
<container>
<row>
<columns>
<img src="<?= siteURL () ?> '/logo.png" alt="My-logo" />
<span class="corporative-title">
<?= __(‘email_title’) ?>
</span>
</columns>
</row>
</container>
</wrapper>
<wrapper class="content">
<container>
<row>
<columns>
<?= __(‘email_remember_password’) ?>
</columns>
</row>
</container>
</wrapper>
<wrapper class="footer">
<container>
<row>
<columns>
<?= __(‘email_legal_conditions’) ?>
</columns>
</row>
</container>
</wrapper>
El archivo foundations.css lo podemos encontrar descargando la versión ya compilada de CSS de la web.
El archivo emails.css contendrá nuestro diseño partícular para este email. Tal como color de fondo, tipografías, etc.
/* Header */
.header {
position: relative;
background-color: black;
color: white;
}
.header .container {
background: transparent;
}
.header p {
color: white;
}
.header h1 {
margin: 0 0 32px 0;
color: white;
text-transform: uppercase;
font-family: "FuturaStd", Arial, sans-serif;
font-weight: 600;
line-height: 1.2;
font-size: 30px;
}
/* Content */
.content p {
font-family: "FuturaStd", Arial, sans-serif;
font-size: 16px;
color: #666;
}
/* Footer */
.footer p {
font-family: Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 14px;
line-height: 16px;
color: #333;
}
Ahora vamos a convertir esta plantilla en un archivo listo para enviar por correo en PHP
// Autoload libs. (Using composer in this example)
require_once (APP_FOLDER . '/vendor/autoload.php');
// Create Inky object
$inky = new HampeInkyInky ();
// Create Emogrifier
$emogrifier = new PelagoEmogrifier ();
// Get stylesheets as STRING
$css =
file_get_contents (siteURL () . 'css/foundation.css') .
file_get_contents (siteURL () . 'css/mail.css')
;
// Get Inky template (use any method you want to retrieve HTML)
$inky_template = file_get_contents (‘templates/remember_password.inky’);
// Create an HTML file.
// Look how we injected the CSS using both ways, with style and link
$html = '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="' . siteURL () . 'css/foundation.css">
<link rel="stylesheet" href="' . siteURL () . 'css/mail.css">
<style>' . $css . '</style>
</head>
<body>' .
$inky_template . '
</body>
</html>
';
// Convert the INKY tags to HTML
$email_html = $inky->releaseTheKraken ($html);
// Add style tags
$emogrifier->setHtml ($email_html);
$emogrifier->setCss ($css);
$styled_html = $emogrifier->emogrify ();
// Send email
// ...
Comentarios