Uno de los mayores problemas al que siempre se han enfrentado los desarrolladores web es a la hora de maquetar HTML para emails. Esto es debido a que la implementación de HTML/CSS que hacen diferentes clientes de correo tienen en común las siguientes características:
- No hay un standard válido
- El uso de etiquetas HTML está bastante restringido, por lo general. Se puede ver aquí un listado actualizado de etiquetas soportadas por los clientes de correo más actuales
- La mayoría de clientes necesitan poner estilos en línea, por lo tanto, tenemos que olvidarnos de separar el contenido de la presentación, o de reutilizar clases y estilos.
¿Qué es Ink?
Ink es una herramienta creada por Zurb para facilitar la tarea de crear HTML para emails.
Modo de empleo
Ink nos viene con una plantilla HTML que podremos utilizar como base para nuestros correos. Como podemos observar, utiliza una versión estricta de XHTML (no HTML5) e indica una serie de cosas como el viewport que sólo algunos clientes de correo podrán hacer eso. Los que no puedan, ignorarán esta regla
<!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="ink.css"> <!-- For testing only -->
<style type="text/css">
/* Ink styles go here in production */
</style>
<style type="text/css">
/* Your custom styles go here */
</style>
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<!-- Email Content -->
</center>
</td>
</tr>
</table>
</body>
</html>
Otra cosa importante que podemos ver aquí, es que los estilos vienen incluidos dentro de una hoja de estilos llamada ink.css, pero nos indica que esto es sólo durante el tiempo de desarrollo.
Esto se debe a que los clientes de correo rara vez soportan el uso de hojas de estilo dentro del cuerpo, y algunos de esos estilos serán traducidos en un proceso posterior a etiquetas en línea. Esto se puede automatizar mediante la herramienta inliner
¿Qué ofrece Ink?
Este framework nos ofrece una serie de características para maquetar nuestros emails. Para cada una de estas características, Ink ofrece en su documentación un listado de compatibilidad con los diferentes clientes de correo y cómo se comportará en el caso de que no lo soporte.
Ink nos ofrece una serie de plantillas para poder empezar a trabajar rápidamente:
Ver plantillas
Sistema de rejilla
Ink utiliza un sistema de rejilla de 12 columnas de 580 píxeles.
Este sistema de rejilla incluye herramientas como las usadas en Foundation tales como desplazamientos (offsets), columnas centradas y algunas especiales como colores o imágenes de fondo.
En los dispositivos pequeños, todas las columnas ocuparán todo el ancho y estarán apiladas una debajo de otra.
Estos grids no son encadenables tales como lo son en Foundation. En cambio, Ink soporta un sistema de sub-rejilla para este caso, mediante la clase sub-columns.
Por último, mediante los Block-Grid podemos crear × bloques fijos del mismo ancho
Clases de visibilidad
Existen una serie de clases, tales como hide-for-small y show-for-small que nos van a permitir establecer parte del mensaje que queremos que se vea en dispositivos pequeños o no.
Paneles
El uso de paneles permite remarcar contenido especialmente importante. Normalmente suele ser contenido que queramos destacar en la cabecera del documento o bien en algún lateral.
Botones
Existen una amplia gama de botones que podemos utilizar, tanto en tamaño, radio del botón como con el contexto que queramos darle: primary, secondary, alert y success
Imágenes de retina
Para usar imágenes de alta resolución, podemos poner la altura y el ancho a la imagen correspondiente a la versión de la imagen en escriotrio. En las pantallas pequeñas Ink hará que las imágenes se escalen hasta el ancho de la pantalla.
<table class="three columns">
<tr>
<td>
<img height="130" width="130" src="http://placehold.it/600x600&text=Retina">
</td>
<td class="expander">
</tr>
</table>
Proceso
A la hora de preparar una campaña de correos, Ink, nos recomienda seguir una serie de pasos:
- Probarlo en Outlook, ya que Outlook es uno de los clientes de correo más restrictivos y que no pueden reajustar imágenes.
- Añadir los estilos responsivos, dentro de la etiqueta
<head> - Convierte los estados en línea, por ejemplo, utilizando la herramienta: Inliner ya que muchos clientes de correo eliminan el CSS situado en la etiqueta
<style> - Prueba tu correo
- Envíalo.
Comentarios