Escribir correos electrónicos es un dolor. El diseño y la prueba de letras adaptativas con interactivos (por ejemplo, con formularios y controles deslizantes) es un dolor en el cuadrado. Sin embargo, no todo es tan malo si elige las herramientas adecuadas. En este artículo hablaré sobre los marcos de correo electrónico (
MJML y
Foundation for Emails ) y mis recursos favoritos para probar listas de correo:
Litmus y
Email On Acid .
En el artículo anterior, aprendimos cómo comenzó la historia del boletín y qué papel desempeñó Outlook en él, y también descubrimos qué interactividad podemos agregar al boletín ahora y cuál en el futuro. Este artículo hablará sobre herramientas para aquellos que manejan listas de correo hoy.
Digamos que quieres hacer el boletín
La primera opción: crear un nuevo documento HTML, tomar una plantilla preparada (por ejemplo, el popular Cerberus o el Responsive Email Framework ) y sentarse a escribir tablas con estilos en línea, google en el proceso de hacks perdidos o arreglos para un diseño que de repente fue a algunos Gmail para Android. Esta opción es adecuada si tiene algo de experiencia en el diseño de letras, suficiente tiempo libre y la tarea es diseñar una letra simple y simple.
Un ejemplo de una plantilla de carta que está "lista para usar" disponible en Cerberus
La segunda opción: usar el editor en línea para crear una plantilla (por ejemplo, Mosaico o Stripo ). Esta es la forma más fácil. Es perfecto si no eres desarrollador o si te enfrentas al diseño por primera vez y el diseño de la carta es bastante simple. Casi todos los editores en línea proporcionan plantillas listas para usar, y también incluyen hacks en el código fuente de la plantilla para el correcto funcionamiento de los correos electrónicos en clientes de correo electrónico populares. Pero estas herramientas prácticamente no le permiten personalizar el diseño de la letra para su diseño específico y generalmente le dan muy poco control tanto del código como de la apariencia de la letra.
Cambios en la plantilla de carta en el diseñador de mensajes de Stripo
Tercera opción: usar un marco de correo electrónico. Si regularmente tiene que preparar el boletín, si el diseño de las cartas es complicado y los requisitos son estrictos, y si desea automatizar su flujo de trabajo y en parte el proceso de desarrollo de la carta, entonces esta opción es para usted. Hablaré sobre las dos herramientas más poderosas: MJML y Foundation for Emails (conocida como Ink en su juventud).
Utilizamos un marco de correo electrónico listo para usar. Mjml
- Github: mjmlio / mjml
- Desarrollador: Mailjet
- Fecha de lanzamiento: 2016
- Licencia: MIT
- Popularidad: 7662+ estrellas
- Plantilla: MJML
Las ideas principales incrustadas en el marco:
- plantillas receptivas listas para usar,
- simplificación del trabajo con código a través de su propio motor de plantillas,
- un conjunto de componentes listos para usar dentro de la carta,
- integración conveniente en el proceso de desarrollo de la lista de correo.
El marco utiliza el motor de plantillas del mismo nombre. Es simple y al mismo tiempo muy poderoso. Olvídate de la tabla de etiquetas, thead, tbody, th, tr, td. Olvídate de que los estilos deben escribirse en línea. Olvídate de la estructura compleja ilegible del código de letras. Así se verá su correo electrónico usando MJML:
<mjml> <mj-head> <mj-style> @media all and (max-width: 480px) { div[style*="color:#F45e46;"] { text-align: center !important } } </mj-style> <mj-style inline="inline"> .link-nostyle { color: inherit; text-decoration: none } </mj-style> </mj-head> <mj-body> <mj-section > <mj-column> <mj-image width="100" src="/assets/img/logo-small.png"></mj-image> <mj-divider border-color="#F45E43"></mj-divider> <mj-text font-size="20px" color="#F45e46" font-family="helvetica"> Hello <a href="https://mjml.io" class="link-nostyle">World</a> </mj-text> </mj-column> </mj-section> </mj-body> </mjml>
En lugar de construcciones complejas de tablas HTML de diferentes niveles de anidamiento, es suficiente escribir solo unas pocas líneas que, cuando se construya el proyecto, se transformarán en un código HTML válido de la letra "sazonada" con todos los hacks necesarios.
MJML proporciona complementos para editores de texto populares: Visual Studio Code, Atom y Sublime Text. Añaden resaltado de sintaxis de idioma, un linter y una pestaña con una vista previa del tipo de letra directamente en el editor.
Si no quiere molestarse con cli o editores de texto, existe una aplicación de escritorio oficial multiplataforma separada, con un editor de código completo, un visor de plantillas listas para usar y una vista previa en vivo de su carta.
Además de un conjunto de componentes estándar (como un botón o carrusel), hay componentes personalizados ya preparados (por ejemplo, un componente para dibujar gráficos). Puede encontrar utilidades útiles en la página de complementos de la comunidad , como el cargador MJML para WebPack o la herramienta de integración para la aplicación Laravel MJML. Y no hace mucho tiempo en estado beta, se hizo posible usar la API MJML para generar correos electrónicos directamente, por ejemplo, dentro de una aplicación móvil. La cosa es bastante específica, pero seguramente encontrará a su usuario.
La principal desventaja del marco al mismo tiempo es una de sus ventajas: "capacidad de respuesta". El marco automáticamente y sin intervención del desarrollador se ocupa de cómo se comporta la plantilla de carta en dispositivos con un ancho de pantalla pequeño. Esto se traduce en una restricción de cuatro columnas en la cuadrícula y una falta de capacidad para ajustar el comportamiento de diseño receptivo para satisfacer sus necesidades.
Un detalle pequeño pero agradable: en el sitio web en la sección con documentación hay una sección con una descripción similar a CanIUse del soporte de componentes MJML en varios clientes de correo electrónico. Puede verificar de inmediato en el sitio y no preguntarse cómo se comportará la carta, por ejemplo, en Outlook 2007.
En pocas palabras : MJML es una herramienta muy poderosa y fácil de aprender para crear correos electrónicos receptivos. Las dificultades pueden surgir solo si necesita una personalización de plantilla muy fina y con píxeles perfectos.
Utilizamos un marco de correo electrónico listo para usar. Fundación para correos electrónicos
Si no eres el primer año en el mundo del front-end, entonces probablemente escuchaste (pero, apuesto a que casi no lo usaste) sobre Foundation for Sites . Este marco, creado por desarrolladores de la compañía ZURB, ha asegurado durante mucho tiempo su estatus como el segundo más popular (después de Bootstrap) entre los marcos web front-end.
Foundation for Emails está hecho por las mismas personas y es esencialmente parte de Foundation for Sites. Esto le brinda una serie de ventajas (una gran empresa de desarrollo, una comunidad bastante grande, todo lo que le gustó de Foundation for Sites) y una serie de limitaciones (todo lo que no le gustó de Foundation for Sites no le gustará en Foundation for Correos electrónicos).
Lo primero que debe hacer si decide probar el marco es instalar Foundation CLI:
npm install --global foundation-cliLuego puede crear un nuevo proyecto con el comando:
foundation new --framework emailsy comienza a desarrollar la carta.
Es cierto que debe esperar unos minutos hasta que se carguen todos los módulos y componentes necesarios. Dado que se descarga una gran cantidad de archivos, no se sorprenda del tamaño de la carpeta: un proyecto vacío pesará más de 400 mb. Además de cli, Live Reload está disponible de fábrica, una plantilla básica con todos los hacks necesarios, plantillas listas para usar y parciales, así como soporte SASS.
Estructura del archivo de proyecto de Foundation for Emails
FfE tiene su propio motor de plantillas: Inky. En esencia, hace lo mismo que el motor de plantillas MJML: simplifica el trabajo con tablas anidadas complejas utilizando etiquetas abreviadas:
<container> <row> <columns small="12" large="6">Column One</columns> <columns small="12" large="6">Column Two</columns> </row> </container>
Hay alrededor de diez etiquetas en total, tres de ellas se usan para crear una cuadrícula (vea el ejemplo anterior), la etiqueta de cuadrícula de bloques se usa para crear una cuadrícula de bloques, dos etiquetas más son un menú (menú y elemento), y los nombres de dos más hablan por sí mismos: botón y llamada.
FfE utiliza una cuadrícula de 12 columnas, que se puede simplificar a 2, 3, 4 o 6 columnas, y también le permite establecer el número de columnas por separado para los estados móviles y de escritorio.
El sistema de parciales y ayudantes se implementa utilizando el compilador de archivos Panini, que utiliza internamente el motor de plantillas Handlebars simple y conveniente.
A diferencia de MJML, cuando se usa FfE, se crean dos versiones de la carta: una para clientes de escritorio y otra para dispositivos móviles. A continuación, decide qué punto de interrupción desea cambiar los estados de escritorio / móvil, y también puede habilitar o deshabilitar cualquier bloque de su diseño utilizando clases especiales: .hide-for-large y .show-for-large.
En pocas palabras: Foundation for Emails proporciona un control completo sobre el diseño de la carta tanto para su escritorio como para su estado móvil. Pueden surgir dificultades en el proceso de inmersión en el marco y al tratar de lidiar con sus sutilezas, ya que es bastante grande y complejo. Pero si desea controlar cada aspecto de su plantilla, su elección es Foundation for Emails.
Herramientas de prueba de boletines
Entonces, nuestro boletín está listo. Se ve muy bien en un navegador. ¿Qué pasa con Outlook y los clientes de correo electrónico móvil? Es hora de recurrir a servicios especializados para probar el boletín: Litmus y Email on Acid .
Prueba del boletín informativo de tornasol
Litmus proporciona un conjunto completo de herramientas que puede necesitar al probar listas de correo. Esta es una idea web para editar código html (Builder), y un sistema de análisis de correo, y un conjunto de "listas de verificación": herramientas de prueba de rendimiento, verificación de correos electrónicos en busca de spam y mucho más.
La "lista de verificación" más importante - Vista previa de correo electrónico - hace posible revisar el correo electrónico en más de 90 clientes de correo electrónico de escritorio / móvil / web. Esto se hace en un par de clics. Debe insertar el código de la letra en el generador, hacer clic en el botón de prueba y seleccionar los clientes de correo electrónico necesarios.
Recientemente, los desarrolladores han agregado una característica interesante: el inspector del código html procesado por el cliente de correo electrónico (html procesado). Se parece un poco al inspector de las herramientas de desarrollo de su navegador favorito: puede seleccionar un área específica del mensaje y ver su código. Esto ayuda mucho a analizar problemas específicos del cliente sin recurrir a ediciones ciegas y luego ver el resultado en Vista previa de correo electrónico.
Ver HTML procesado en Litmus
Encontré dos desventajas con el tornasol. El primero es la falta de respuesta de la interfaz de usuario en su conjunto y los retrasos en la vista previa de correo electrónico que ocurren de vez en cuando y hacen que pase mucho tiempo esperando que se cree la vista previa y reinicie las pruebas.
Segundo menos: precio. La opción de suscripción mínima le costará $ 80 / mes. Además, el plan seleccionado afecta directamente el número de vistas previas de cartas que estarán disponibles. Por lo tanto, le aconsejo que piense detenidamente si realmente necesita Litmus o si puede sobrevivir con una alternativa más barata.
Prueba de correo electrónico en boletines ácidos
El segundo servicio del que me gustaría hablar es Email On Acid . Se le puede llamar con seguridad el "hermano pequeño" de Litmus en casi todos los aspectos.
Juzgue usted mismo: hay una idea web para editar el boletín, hay herramientas para analizar la carta, hay pruebas de spam y, por supuesto, también hay pruebas de correo electrónico en más de 70 aplicaciones.
La vista previa de las letras se realiza casi igual que en Litmus. Las diferencias son principalmente en apariencia, las opciones / configuraciones son ligeramente más pequeñas, no hay un inspector del código de letra procesado y algunas otras herramientas menos útiles. Pero UI EoA es más conveniente y más fácil que el de Litmus y funciona prácticamente sin retrasos. La prueba de correos electrónicos se realiza aproximadamente una vez y media más rápido.
Último factor importante: precio. El correo electrónico en Acid es la mitad del precio de Litmus con una funcionalidad muy similar. Y no hay restricciones en el número de vistas previas de su carta. Estos son los vinos indudables de EoA.
Que elegir
Las herramientas descritas anteriormente cuestan mucho dinero. En mi opinión, tiene sentido usarlos de manera continua solo si consistentemente, al menos varias veces al mes, redacta cartas bastante complejas y si tiene requisitos estrictos para su soporte en varios clientes de correo electrónico, especialmente los móviles.
Si realiza envíos ocasionales, existen dos opciones alternativas:
- use Litmus / correo electrónico de prueba en ácido durante 7/14 días (según el servicio): el dinero del primer mes será devuelto a su tarjeta;
- use una combinación de servicios menos populares que tienen planes gratuitos y pruebe manualmente los clientes de correo electrónico.
Estos son algunos servicios que se pueden usar de forma gratuita, aunque de forma limitada:
- PreviewMyEmail (Gmail para Chrome / FF / IE, Thunderbird, Apple Mail para iOS7);
- InboxInspector (Thunderbird 2/3, Outlook 2003/2007/2010 / Outlook Express);
- DirectMail (Outlook 2003, Gmail en IE);
- Putsmail + PilotMailer (servicios en línea para enviar un código de carta a cualquier dirección, conveniente para usar para la prueba manual del boletín);
Lo que elija a largo plazo, lo principal es que la herramienta satisfaga sus necesidades.
Conclusión
El alcance de las herramientas para el codificador de diseño ahora ha alcanzado el nivel de desarrollo en el que no solo podemos usar marcos convenientes para desarrollar cartas y aplicaciones para probarlas, sino también elegir las adecuadas para nuestras tareas y capacidades.
Si escribe letras con poca frecuencia y, en general, son simples, no dude en tomar el texto básico, escribir y probar "manualmente". Alternativamente, use servicios gratuitos para las pruebas.
Si tiene que lidiar con las letras tipográficas de forma regular, y los diseños se ven complejos y adaptables, entonces MJML y Foundation for Email se encargarán de algunos de los cuidados. Y Limus y Email on Acid ahorrarán mucho tiempo y células nerviosas en un intento de derrotar a algunos molestos Outlook o Gmail en Android.
¿Y qué camino eliges? Comparte en los comentarios.