Una introducción a la creación y envío de correo electrónico HTML para desarrolladores web

Pasé los últimos años construyendo herramientas de desarrollo, dos de esos años como líder de diseño de productos en Mailgun, un servicio de correo electrónico para desarrolladores, donde aprendí mucho sobre cómo funciona el correo electrónico y los problemas que enfrentan los desarrolladores al crear correo electrónico HTML. En este post, compartiré algunos de mis conocimientos sobre el tema.

Correo electrónico HTML: dos palabras que, cuando se combinan, provocan lágrimas en los ojos de un desarrollador. Si es un desarrollador web, es inevitable que la codificación de un correo electrónico sea una tarea que se le presente en algún momento de su carrera, le guste o no. La codificación de correo electrónico HTML es de la vieja escuela. Piense en 1999, cuando nos denominábamos "webmasters" y usábamos Frontpage, editores WYSIWYG y tablas para marcar nuestros sitios web.

No ha cambiado mucho en el diseño del correo electrónico. De hecho, ha empeorado. Con la introducción de dispositivos móviles y más y más clientes de correo electrónico, tenemos aún más advertencias con las que lidiar al crear correo electrónico HTML.

Pasé los últimos años construyendo herramientas de desarrollo, dos de esos años como líder de diseño de productos en Mailgun, un servicio de correo electrónico para desarrolladores, donde aprendí mucho sobre cómo funciona el correo electrónico y los problemas que enfrentan los desarrolladores al crear correo electrónico HTML. En este post, compartiré algunos de mis conocimientos sobre el tema.

Lectura adicional en SmashingMag:

• Diseñe y cree boletines informativos por correo electrónico sin perder la cabeza
• 18 plantillas de correo electrónico para diseñadores y desarrolladores web
• Facilitar la codificación de correo electrónico HTML receptivo con MJML
• Cómo mejorar su flujo de trabajo de correo electrónico con diseño modular
  

Introducción al envío de correo electrónico

Como desarrollador responsable de una campaña de correo electrónico o de todos los correos electrónicos que envía su empresa, necesitará saber cómo funciona el correo electrónico, los requisitos legales y cómo hacer que se entreguen los correos electrónicos. Las empresas envían algunos tipos diferentes de correo electrónico. Vamos a ver.

Correo electrónico de mercadeo

Muchos proveedores de servicios de correo electrónico (ESP) se especializan en correos electrónicos promocionales y de marketing: SendPulse Email, Campaign Monitor, MailChimp, Emma, ​​Constant Contact, por nombrar solo algunos. Brindan soluciones completas para administrar suscriptores, trabajar con plantillas de correo electrónico, ejecutar campañas de correo electrónico masivo e informes.

Correo electrónico transaccional

El correo electrónico transaccional incluye recibos, alertas, correos electrónicos de bienvenida, restablecimientos de contraseña, etc., y generalmente se implementa con herramientas de desarrollo y API como SendPulse Transactional, Mailgun, SendGrid y Postmark. Estas herramientas están más centradas en API, menos basadas en CMS y WYSIWYG; sin embargo, combinados con un servicio como Sendwithus, pueden hacerse aún más potentes.

Una alternativa al uso de un servicio es implementar su propio servidor de correo electrónico con algo como Postfix. La desventaja de esto es que depende de usted configurarlo y comprender los detalles técnicos del envío de correo electrónico, la implementación del seguimiento y la cancelación de la suscripción, y la entrega del correo electrónico en las bandejas de entrada.

Correo electrónico de ciclo de vida

Los servicios de correo electrónico basados ​​en el ciclo de vida y el comportamiento ayudan con la incorporación, el compromiso y más. Muchos ESP enfocados en marketing también ofrecen este servicio, pero tiendo a agrupar servicios como SendPulse Automation, Intercom, Customer.io, Drip, Vero y ConvertKit en esta categoría.

Mejores prácticas de listas de correo electrónico

No compre listas de correo electrónico. Tal vez exista un puñado de servicios legítimos, pero es mejor que se mantenga alejado de las listas de compra por completo.

Mi experiencia es que cualquier persona que compre una lista de correo electrónico sufrirá muchos rebotes, le dará una mala reputación a su dirección de Protocolo de Internet (IP) y sus correos electrónicos serán bloqueados por los proveedores de servicios de Internet (ISP) o enviados a spam. El 85% del correo electrónico del mundo se considera spam, según SenderBase; no caigas en este cubo.

Suscripción doble

Un suscriptor que tiene que verificar su dirección de correo electrónico agrega un paso adicional al proceso, pero tiene sentido y evita que otras personas abusen de su dirección de correo electrónico registrándolos en listas sin su permiso. También ayuda a mantener limpia su lista de suscripción y es la "forma 100% correcta de validar una dirección de correo electrónico".

PUEDE SPAM

Estos son sus requisitos legales para enviar correos electrónicos, impuestos por la Ley CAN-SPAM de 2003:

• No utilice información de encabezado falsa o engañosa.
• No utilice líneas de asunto engañosas.
• Identifique el mensaje como un anuncio.
• Indique a los destinatarios dónde se encuentra.
• Indique a los destinatarios cómo optar por no recibir correos electrónicos suyos en el futuro.
• Respete las solicitudes de exclusión voluntaria con prontitud.
• Supervise lo que otros están haciendo en su nombre.

MailChimp tiene una buena lista de requisitos legales de correo electrónico por país.

Análisis y medición del rendimiento

Mide todo. Necesita medir para saber si sus correos electrónicos están mejorando. Los números diferirán enormemente según lo que haga, su industria, el tipo de correos electrónicos que envíe y el contexto. Sin embargo, en general:

• 20% es una buena tasa de apertura,
• 3 a 7% es una buena tasa de clics,
• 5% es una baja tasa de rebote,
• 0.01% es una baja tasa de spam,
• 1% es una baja tasa de cancelación de suscripción.

Además, recuerde que las tasas de apertura y las tasas de clics pueden ser métricas de vanidad (léase “realmente no importan”). Al final del día, lo que realmente desea rastrear es ese objetivo final o conversión. En Airbnb, rastrean un puntaje de calidad del correo electrónico, que es un buen indicador de la calidad del compromiso.

El creador de URL de Google puede ayudar con el seguimiento si está utilizando Google Analytics.

Envío de puntuación y reputación

Sus correos electrónicos tienen una reputación y una puntuación asociada a ellos . Esto afecta la forma en que los ISP y los proveedores de buzones de correo manejan su correo electrónico, ya sea que lo acepten o lo rechacen y si lo envían a la bandeja de entrada del destinatario o directamente al correo no deseado.

Algunos factores contribuyentes son:

• tu reputación de IP (comprueba la tuya con SenderScore),
• la firma de su nombre de dominio (ver DKIM y SPF),
• tasas de rebote y tasas de quejas.

Envío de correo electrónico masivo

Cuando envías muchos correos electrónicos (imagina una campaña con millones de correos electrónicos), no todos se envían instantáneamente. Solo se pueden enviar tan rápido como los servidores y las direcciones IP puedan manejarlos. Tenga en cuenta que es posible que sus destinatarios no reciban los correos electrónicos exactamente al mismo tiempo.

Entonces, si está enviando millones de correos electrónicos a la vez, probablemente querrá bastantes direcciones IP para manejar la carga.

Clientes de correo electrónico

Litmus realiza un seguimiento de la cuota de mercado de los clientes de correo electrónico, en función de sus propias estadísticas internas. Tenga en cuenta que esto probablemente no sea lo mismo para su base de clientes, pero es un buen indicador para seguir.

Estas son las estadísticas a diciembre de 2016:

• iPhone: 33%
• Gmail: 19%
• iPad: 12%
• androide: 8%
• Correo de Apple: 7%

Tenga en cuenta que no todos los correos electrónicos pueden ser rastreados . El seguimiento de correo electrónico se realiza a través del seguimiento de píxeles, por lo que solo aquellos clientes con imágenes habilitadas informarán.

Plantillas HTML

La creación de plantillas de correo electrónico HTML puede ser una tarea ardua. Como resultado, hay muchos correos electrónicos mal diseñados: torpes, temáticos, detallados, sin sentido, que distraen. Si disfrutas de un desafío o quieres una apariencia y sensación únicas, construir uno propio puede ser realmente divertido y gratificante. Alternativamente, algunas buenas plantillas de correo electrónico están disponibles:

• Plantillas de tornasol
• Plantilla de correo electrónico HTML receptiva realmente simple
• Plantillas de correo electrónico HTML
• Fundación para correos electrónicos 2

Creación de plantillas de correo electrónico HTML

Ahora ya sabe cómo configurar y enviar correos electrónicos correctamente. La siguiente decisión que tomará es codificar su propia plantilla HTML. Esto es un poco más complejo que codificar una página web promedio. Sumerjámonos.

Motores de representación del cliente

El diseño de correo electrónico todavía está en la edad oscura. Debido a la gran cantidad de clientes y dispositivos de correo electrónico, su correo electrónico se mostrará a los usuarios de diversas formas.

Los clientes de correo electrónico utilizan diferentes motores para procesar correos electrónicos HTML:

• Apple Mail, Outlook para Mac, Android Mail y iOS Mail utilizan WebKit .
• Outlook 2000, 2002 y 2003 utilizan Internet Explorer .
• Outlook 2007, 2010 y 2013 usan Microsoft Word (¡sí, Word!).
• Los clientes web usan el motor respectivo de su navegador (por ejemplo, Safari usa WebKit y Chrome usa Blink).

Los clientes también agregarán su propio sabor de estilos además del tuyo. Por ejemplo, Gmail establece todas las fuentes <td> en font-family: Arial,sans-serif; .

Mire sus propias estadísticas para que sepa para qué diseñar.

Soporte de Gmail para CSS en línea y consultas de medios

Recientemente, Google anunció la compatibilidad con CSS incrustado y consultas de medios en Gmail. Esto es enorme para la industria del desarrollo de correo electrónico.

Ahora, a partir de septiembre de 2016, Gmail admitirá una gran cantidad de propiedades CSS, lo que facilita mucho el desarrollo de plantillas para Gmail.

Uso de tablas HTML para el diseño

Los divs tienen problemas de posicionamiento y modelo de caja en diferentes clientes, en particular, aquellos que usan Microsoft Word para renderizar (es decir, Outlook). Puede usar divs si lo desea, pero es más seguro codificar como si fuera 1999 y ceñirse a las tablas . Esto significa:

• <table> en lugar de <div> ,
• #FFFFFF en lugar de #FFF ,
• padding en lugar de margin ,
• CSS2 en lugar de CSS3,
• HTML4 en lugar de HTML5,
• background-color de fondo en lugar de background ,
• Atributos HTML en lugar de CSS,
• CSS en línea en lugar de hojas de estilo o bloques <style> .

Estas son las mejores prácticas. Ciertamente podría ignorar la ruta segura e ir más allá.

Cuando use tablas, no olvide border="0" cellpadding="0" cellspacing="0" . Si está utilizando Premailer, tiene declaraciones CSS especiales para aplicar estos atributos HTML.

CSS en línea

Algunos clientes (sobre todo Gmail hasta hace poco) eliminarán cualquier CSS que no esté en línea . Tienes un par de opciones aquí:

• escriba CSS en línea a medida que avanza,
• usar un inserto de CSS basado en la web,
• usar un CSS programático integrado,
• deje que su ESP maneje la línea por usted (si lo admite).

Escribir en línea sobre la marcha no es exactamente una solución escalable o mantenible, por lo que tiendo a no recomendar esto, pero sé que muchos desarrolladores de correo electrónico prefieren esto para mantener el 100% del control. Si escribe su CSS en línea manualmente, le recomiendo que utilice fragmentos y/o un lenguaje de plantillas con parciales y ayudantes. Esto le evitará tener que repetirse.

Los insertos basados ​​en web incluyen Responsive CSS Inliner de HTML Email y Responsive Email Inliner de Foundation for Email.

Para un inserto programático, recomiendo el módulo Juice de Node.js. La gema Premailer y Roadie son buenas alternativas a Ruby.

Botones

Tratar de lograr el botón de cliente cruzado perfecto es doloroso. Como se mencionó, debe usar tablas y celdas de tabla para casi todo, incluidos los botones.

Mi preferencia es usar la siguiente solución. Así es como normalmente diseñaría un botón para la web:

 <a href="#" class="btn btn-primary">Click Here</a>

En cambio, escríbelo así:

 <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary"> <tr> <td align="center"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="" target="_blank">Take action now</a> </td> </tr> </table> </td> </tr> </table>

Luego, una vez que su CSS esté en línea, se verá así:

 <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" width="100%"> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" bgcolor="#3498db" align="center"> <a href="">Take action now</a> </td> </tr> </table> </td> </tr> </table> 

¿Que está pasando aqui? El primer <td> es un contenedor que nos ayuda a centrar el botón. El segundo <td> es el tamaño del botón. Algunos clientes (como Outlook) no reconocen el relleno en la etiqueta <a> , por lo que completamos el color de fondo de la celda de la tabla. La etiqueta <a> luego ocupa el espacio disponible en el segundo <td> y se puede hacer clic en toda el área. Consulte el código y las pruebas del cliente en Litmus.

Esta es solo una forma de implementar botones en el correo electrónico. Es cierto que no siempre se ve idéntico en todos los clientes, pero la web tampoco siempre es perfecta en píxeles. Prefiero esto porque es más simple y no implica el uso de activos de imagen o VML.

¿Qué es VML? Si ha dedicado algún tiempo a desarrollar correos electrónicos, es probable que haya encontrado alguna referencia a ellos. El lenguaje de marcado vectorial (VML) es compatible con las versiones anteriores de Outlook . Según Microsoft, a partir de Internet Explorer (IE) 10, VML está obsoleto, lo que significa que ya no es compatible con las nuevas versiones de IE. Sin embargo, mientras Outlook 2007, 2010 y 2013 estén disponibles, verá que se usa, generalmente para imágenes de fondo .

Tipografía

En general, es más fácil apegarse a las fuentes estándar del sistema. Esto incluye Helvetica, Arial, etc. Sin embargo, podemos utilizar fuentes web , como Google Fonts. Póngalos detrás de una consulta de medios condicional de WebKit , para que Outlook no los arruine:

 <style> @import url(https://fonts.googleapis.com/css?family=Pacifico); /* Type styles for all clients */ h1 { font-family: Helvetica, Arial, serif; } /* Type styles for WebKit clients */ @media screen and (-webkit-min-device-pixel-ratio:0) { h1 { font-family: Pacifico, Helvetica, Arial, serif !important; } } </style>

Recuerde incluir una familia de fuentes, un tamaño de fuente y un color para cada <td> , o de lo contrario corre el riesgo de que el cliente sobrescriba sus estilos de letra cuidadosamente elegidos.

Condicionales

Podemos aplicar estilos CSS específicos y mostrar u ocultar elementos y contenido para diferentes versiones de Outlook.

Lo siguiente se dirige a todas las versiones de Outlook basadas en Microsoft Word:

 <!--[if mso]> Only Microsoft Word-based versions of Outlook will see this. <![endif]-->

El siguiente fragmento apunta a todas las versiones de Outlook basadas en IE:

 <!--[if (IE)]> Only IE-based versions of Outlook will see this. <![endif]-->

También podemos apuntar a números de versión específicos de Outlook:

 <!--[if mso 12]> Only Outlook 2007 will see this. <![endif]-->

Podemos dirigirnos a clientes basados ​​en WebKit con una consulta de medios:

 .special-webkit-element { display: none; } @media screen and (-webkit-min-device-pixel-ratio:0) { .special-webkit-element { display: block !important; } }

Imágenes y medios

Imágenes en correo electrónico

Algunos clientes mostrarán imágenes por defecto. Algunos no lo harán. Tenga esto en cuenta cuando incluya imágenes en el contenido de su correo electrónico. Esto también afecta a las métricas de seguimiento, ya que las imágenes se suelen utilizar para realizar un seguimiento de las aperturas.

• Outlook bloquea la representación de imágenes de forma predeterminada.
• Apple Mail no lo hace.
• Gmail ya no (más).

Recuerda incluir un buen texto alt para todas tus imágenes. El texto podría decirle al usuario lo que dice la imagen o simplemente describir lo que es (por ejemplo, "logotipo de la empresa"). Puede ser creativo con el texto alt para los clientes que desactivan las imágenes, como lo hace Email Monks:

Recuerde incluir un reinicio básico para todas las imágenes:

 <img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/" alt="" width="" height="" border="0">

Los GIF animados son compatibles con la mayoría de los clientes. Las versiones de Outlook 2007 a 2013 no admiten GIF animados, sino que recurren al primer cuadro.

Recuerde comprimir sus activos de medios y subirlos a una red de entrega de contenido (CDN), como Amazon Web Services, Cloudinary o imgix. La mayoría de los ESP de marketing se encargarán de esto por usted.

Los gráficos vectoriales escalables (SVG) tienen muchas ventajas en la web. Como era de esperar, el soporte de correo electrónico varía y SVG requiere un par de trucos alternativos o condicionales. Por lo general, recomiendo mantenerse alejado de SVG en el correo electrónico, pero si desea tomarlo en serio, entonces CSS-Tricks tiene una guía sobre la compatibilidad con SVG en el correo electrónico.

Para imágenes preparadas para Retina, proporcione una imagen más grande (1,5× a 3×) y cambie su tamaño. Por lo general, guardo una imagen de baja calidad que tiene dimensiones 2×, lo que funciona bien. (He escrito más sobre esta técnica).

Tenga en cuenta que, para Outlook, debe declarar el ancho que debe tener una imagen con el atributo de width . De lo contrario, Outlook podría representar el ancho real de la imagen y romper su correo electrónico.

Vídeo en correo electrónico

El video es compatible con iOS, Apple Mail y Outlook.com. Puede usar consultas de medios para mostrar u ocultar un video según el cliente. Email on Acid tiene más información sobre soporte de video por correo electrónico.

Para inspirarse, consulte el tutorial de Kevin Mandeville sobre la codificación de video HTML5 como fondo en un correo electrónico: cosas impresionantes que vale la pena ver.

Formularios en correo electrónico

La compatibilidad con los elementos de formulario varía. Trate de mantenerse alejado y enlace a un formulario externo si lo necesita. Campaign Monitor ofrece algunos consejos sobre formularios.

Obviamente, depende de tus objetivos. Mantenerse alejado de los formularios es más seguro, pero Rebelmail y Mixmax han hecho cosas interesantes con formularios para encuestas y comercio electrónico, con un buen soporte alternativo.

Acciones de Gmail

Google pone a disposición acciones útiles para Gmail. Probablemente los haya visto en GitHub para problemas o en Amazon para pedidos.

Agregar el código es sencillo. Tienes dos opciones:

• JSON-LD
• microdatos

Obtener la lista blanca implica algunos pasos más. Puede probar las acciones de Gmail con una dirección @gmail.com .

Texto de preencabezado

Algo importante pero que a menudo se olvida es el texto del preencabezado. Algunos clientes muestran texto de vista previa al lado o debajo de la línea de asunto . Estos clientes incluyen iOS, Apple Mail, Outlook 2013, Gmail y AOL.

Los clientes tomarán el primer fragmento de texto que encuentren en el cuerpo de su correo electrónico y lo mostrarán aquí. Aproveche al máximo esto y agregue un elemento oculto al contenido de su cuerpo que aparece primero. Este texto debería proporcionar un incentivo adicional para que el usuario abra su correo electrónico. Oculte el texto así:

 <span>Preheader text goes here</span>

Utilice la herramienta de asunto y preencabezado de Austin Woodall para obtener una vista previa de los asuntos y preencabezados de sus correos electrónicos.

Correo electrónico de prueba

Creo que nunca he enviado un correo electrónico con éxito la primera vez. Siempre hay algo que arreglar, siempre un error tipográfico, siempre un problema de representación en Outlook, siempre algo que he olvidado agregar.

Puede probar su correo electrónico de varias maneras:

• Envíate un correo electrónico a ti mismo y compruébalo en un cliente de escritorio (Outlook), un cliente web (Gmail) y un cliente móvil (iOS Mail).
• Automatice las pruebas con Litmus o Email on Acid.
• Corrija el contenido y verifique los renderizados del diseño.
• A/B prueba varios tipos de contenido, longitudes de contenido y líneas de asunto.

¿Cómo te envías correos electrónicos HTML a ti mismo? Buena pregunta. Es más difícil de lo que crees. PutsMail te permite hacer esto con bastante facilidad y Thunderbird te permite componer con su editor HTML.

MIME de varias partes

Un correo electrónico de texto sin formato es solo eso, texto sin formato. Un correo electrónico HTML es solo HTML. La mayoría de los correos electrónicos que envía o recibe son MIME (Multipurpose Internet Mail Extensions) correos electrónicos de varias partes (que no deben confundirse con el tipo MIME). Este estándar combina tanto texto sin formato como HTML, dejando que el destinatario decida cuál renderizar.

Cuando envíe un correo electrónico, ya sea transaccional o masivo, incluya las versiones HTML y de texto sin formato . Incluso si, en su opinión, cada uno usa un cliente que procesa HTML, envíe texto sin formato.

Además, tenga en cuenta que algunos clientes procesan el correo electrónico de texto sin formato como HTML; por ejemplo, Gmail agregará algunos estilos predeterminados y convertirá las URL en enlaces. La mayoría de los ESP construirán el MIME por usted, por lo que realmente no necesita preocuparse por eso. Algunos también crearán una versión de texto sin formato, basada en su HTML.

Consejo profesional: en Gmail, seleccione "Mostrar original" en el menú desplegable para ver el MIME completo.

Ha aparecido una nueva parte MIME: text/watch-html . Este contenido solo se mostrará en Apple Watch (y en cualquier otro cliente que admita este tipo MIME en el futuro).

Accesibilidad

En la web, si sigue los estándares y las mejores prácticas y utiliza el marcado semántico y la sintaxis HTML válida , tiende a obtener una accesibilidad básica lista para usar. Desafortunadamente, con el correo electrónico, debido a nuestros excesivos hackeos y al pobre soporte para HTML, la accesibilidad a menudo se ignora.

He visto poca discusión sobre la accesibilidad del correo electrónico, pero una que se destaca es la publicación de Mark Robbins sobre accesibilidad. Él recomienda lo siguiente:

• Agregue role="presentation" a cada tabla para que quede claro que la tabla se usa para el diseño.
• Proporcione texto alt con descripciones significativas.
• Si no necesita o no desea texto alt , use alt="" para que los lectores de pantalla sepan que debe estar en blanco.
• Utilice etiquetas HTML semánticas, como <p> y <h1> , cuando corresponda.
• Utilice el atributo de role para elementos como encabezados y pies de página (por ejemplo, role="header" ).

Diseño de correo electrónico receptivo

• Las aperturas de correo electrónico en dispositivos móviles están en un 50 % y siguen aumentando. La métrica exacta depende del informe que consulte y de la audiencia a la que se dirige, pero creo que todos podemos estar de acuerdo en que esto es importante.
• La cuota de mercado de clientes de correo electrónico, a partir de agosto de 2016, sitúa al iPhone en un 33 %, iPad en un 11 % y Android en un 10 % (¡eso es más del 50 %!).
• MailChimp descubrió que los clics únicos entre los usuarios de dispositivos móviles para campañas receptivas aumentaron del 2,7 al 3,1 %, un aumento de casi el 15 %.

“Diseño web receptivo” es una frase acuñada por Ethan Marcotte en 2010:

Al combinar diseños fluidos basados ​​en cuadrículas y consultas de medios CSS3, podemos crear un diseño que responda a la forma de la pantalla que lo representa.

En el mundo del correo electrónico, aún podemos hacer uso del diseño fluido, los diseños basados ​​en cuadrículas y las consultas de medios . El problema es que no todos los clientes los admiten. Por lo tanto, necesitamos algunos trucos en el camino.

Hasta hace poco, Gmail no admitía consultas de medios. Afortunadamente, a partir de septiembre de 2016, la mayoría de sus clientes lo hacen. Sin embargo, varios clientes móviles aún no lo hacen, incluidos Yahoo, Windows Phone 8 y Gmail para Android.

Se utilizan varias técnicas en el mundo del correo electrónico para sortear la falta de soporte para consultas de medios. Algunos de los términos que escuchará son "fluido", "adaptativo", "sensible", "híbrido" y "esponjoso".

Líquido

La solución más fácil es ceñirse a una sola columna y hacer que sus correos electrónicos sean fluidos. Esto significa que a medida que se reduce la ventana gráfica, se reduce el área de contenido.

 .container { max-width: 600px; width: 100%; }

Responsivo y adaptativo

Usando consultas de medios y puntos de interrupción, podemos proporcionar estilos alternativos para ventanas gráficas de diferentes tamaños. También podemos ocultar o mostrar elementos.

Esto comienza a complicarse una vez que introduce una cuadrícula y columnas. Podría tener un diseño de dos columnas y luego cambiar a un diseño de una columna apilada por debajo de un cierto ancho de ventana gráfica.

Pero , como hemos visto, las consultas de medios no se admiten en todas partes, por lo que esto no siempre es confiable.

Híbrido y Esponjoso

Esta técnica usa un poco de fluidez, un poco de respuesta y un par de trucos para el soporte de Outlook. También nos aseguramos de que las columnas se apilen sin consultas de medios.

Esta técnica está descrita por ActionRocket, y Nicole Merlin ha escrito un gran tutorial paso a paso sobre ella.

Aquí hay un fragmento del código que uso para crear la mayoría de mis correos electrónicos.

 <!--[if (gte mso 9)|(IE)]> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td align="left" valign="top" width="50%"> <![endif]--> <div class="span-3">...</div> <!--[if (gte mso 9)|(IE)]> </td> <td align="left" valign="top" width="50%"> <![endif]--> <div class="span-3">...</div> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->

 @media only screen and (max-width: 620px) { .span-3 { max-width: none !important; width: 100% !important; } .span-3 > table { max-width: 100% !important; width: 100% !important; } }

Eche un vistazo al repositorio esponjoso de código abierto de Fabio Carneiro en GitHub y lea la opinión de Stig sobre la codificación de correos electrónicos para dispositivos móviles. Remi Parmentier también tiene otra técnica receptiva que no necesita consultas de medios y utiliza la función calc() .

Imágenes receptivas

Como se mencionó, use imágenes Retina de 1.5× a 3× y configure las dimensiones de la imagen en línea.

 <img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/logo.png" height="100" width="600" alt="Company Logo">

No podemos confiar en max-width: 100%; porque algunos clientes lo ignoran. También querrá incrustar el siguiente CSS:

 @media only screen and (max-width: 620px) { img { height: auto !important; max-width: 100% !important; width: auto !important; } }

Automatización de su flujo de trabajo

El proceso de armar un correo electrónico a prueba de balas es complejo. Hay muchos pasos, y hay espacio para que muchas cosas salgan mal.

Como cualquier tarea monótona con pasos, recomiendo automatizar lo que puedas, para que construyas el sistema una vez y lo hagas más fácil para el trabajo futuro.

Brian Graves tiene una buena publicación sobre cómo hacer que su correo electrónico sea modular. Así como tiene un sistema de diseño y una biblioteca de patrones para un sitio web o una aplicación, debe hacerlo para el correo electrónico, haciendo que los componentes sean reutilizables y los correos electrónicos sean consistentes en su producto y empresa.

Kevin Mandeville recomienda usar fragmentos de código reutilizable para optimizar su flujo de trabajo, de modo que no esté reescribiendo código constantemente . En su publicación, describe cómo usar fragmentos en editores modernos (como Atom y Sublime), y señala la biblioteca de fragmentos contribuida por la comunidad alojada por Litmus.

Por mi parte, armé y abrí un flujo de trabajo de Grunt para automatizar las compilaciones de correo electrónico. Ejecuta varias tareas, como insertar CSS , comprimir imágenes, cargar imágenes en un CDN, enviar una vista previa y probar con Litmus, todo con un solo comando. Si eres nuevo en Grunt, he escrito un tutorial detallado sobre cómo funciona. Foundation for Email también tiene excelentes herramientas de automatización para desarrolladores, al igual que Mailjet con su marco de trabajo de correo electrónico receptivo MJML.

Mirando hacia el futuro

Google recientemente implementó soporte para consultas de medios; Microsoft acaba de asociarse con Litmus para "mejorar el correo electrónico"; y Alto de AOL ahora admite correo electrónico receptivo. Entonces, el futuro se ve mucho más brillante.

Cada vez más empresas y desarrolladores están experimentando con lo que es posible con la tecnología de correo electrónico: animación CSS, audio, carritos de compras en el correo electrónico. Espere que surjan más instancias de correo electrónico interactivo y cinético en 2017.

Conclusión

El diseño y desarrollo de correo electrónico es una bestia. Es muy parecido a construir una página web... hace 10 años . Los proveedores de clientes de correo electrónico no han sido tan progresivos como los proveedores de navegadores web en la adopción de nuevos estándares, y nosotros, los usuarios y las empresas, no adoptamos nuevos clientes de correo electrónico como lo hacemos con los navegadores web. Agregue a eso el auge de los dispositivos móviles, y nos quedamos en este estado de tener que admitir una mezcla intrincada de clientes y versiones .

Mi introducción aquí es una descripción general de alto nivel; podría profundizar en cada uno de estos puntos. Con suerte, le ha brindado una buena perspectiva del mundo de la creación y el envío de correo electrónico, y los fragmentos de código y los recursos le han devuelto algunas horas a su vida.

Recursos recomendados

• Plantilla de correo electrónico HTML receptiva realmente simple, Lee Munroe (mi plantilla de correo electrónico gratuita de código abierto)
• Diseño de correo electrónico profesional , Jason Rodriguez
• "Desenmascaramiento de correos electrónicos HTML" (curso), Dan Denney, Code School
• "Los mejores diseños de correo electrónico del universo (que llegaron a mi bandeja de entrada)", correos electrónicos realmente buenos
• “Ejemplos y técnicas de correo electrónico dinámico e interactivo (cinético), Justin Khoo

blogs a seguir

• Monitor de campaña
• MailChimp
• Tornasol
• Correo electrónico en ácido