Creando emails responsive

En el Repositorio de Macros del proyecto WADC, ha sido necesario el envío de emails para la comunicación con los usuarios.

Si alguna vez has tenido que programar alguna plantilla de email, habrás descubierto que, aunque se utilicen tecnologías web (HTML y CSS) de la parte del cliente, tienen su propia identidad y por ello necesitaremos conocer y comprender que es lo que cómo se construyen.

En este enlace, os dejo un breve resumen de buenas prácticas para la maquetación de emails. Personalmente, debería ser lectura obligatoria antes de comenzar si queremos evitar bastantes quebraderos de cabeza.

Para hacerlo más sencillo, he utilizado una plantilla simple para comenzar, que la podéis encontrar aquí. Se trata de la plantilla que se muestra a continuación creada por Lee Munroe y tiene licencia MIT.

Captura plantilla email simple

Una vez que tenemos la plantilla desde la que vamos a partir, preparamos un pequeño mockup con el diseño y vamos añadiendo partiendo de la misma. En mi caso, he utilizado la herramienta online htmlmail.io, con la que podemos ir modificando el diseño y ver los resultados para pantalla grande y para móvil sobre la marcha como se ve en la imagen siguiente:

Ejemplo diseño con htmlmail.io

Una vez tenemos el diseño no hemos acabado. Como se indicaba en el primer enlace de Email on Acid , una gran parte del tiempo la dedicaremos a testear la plantilla. Para ello podemos usar la versión gratuita de mailtrap.io, una vez que nos registremos en el apartado ‘Settings‘ vemos los datos que tendremos que añadir a nuestra aplicación para que los emails se envíen a mailtrap.io y desde allí podamos analizarlos.

Justo abajo dejo un ejemplo de como se ajustaría con la pantalla de un teléfono. Muy interesante también los apartados ‘Analysis‘ para evitar caer en SPAM y ‘Check HTML’ que nos dará consejos para una mejor compatibilidad.

Ejemplo mailtrap.io

Leave a Reply

Your email address will not be published.Required fields are marked *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.