Cómo formular una estrategia de desarrollo y diseño de correo electrónico

Spanish (Español) translation by Carlos (you can also view the original English article)

En este tutorial, explicaré cómo enfocar tus esfuerzos en los clientes de correo electrónico y los clientes de correo web que utiliza tu público objetivo.

Nota: este tutorial es parte del contenido del correo electrónico de toda una semana en Tuts + Web Design. ¡Consulta la guía de aprendizaje de Dominando el correo electrónico HTML para obtener más información!

1. Comprender la importancia de una estrategia

Tu público objetivo tiene acceso a una extensa gama de clientes de correo electrónico, correo web y dispositivos, y al no existir un correo electrónico equivalente a los estándares de W3C, la forma en que experimentan tus campañas de correo electrónico variará dependiendo de lo que estén utilizando para verlos y lo que están emplendo para interactuar con ellos.

Por ejemplo, podrían utilizar:

Microsoft Outlook, que no reproduce GIF animados más allá del primer fotograma.
Gmail, que no procesa fuentes web.
El correo de iOS, que reproduce GIF animados, e interpreta las fuentes web, pero también, de manera inútil, presenta parte del contenido como enlaces azules o grises.

Por consiguiente, para ofrecer una excelente experiencia a tu público objetivo, necesitas formular una estrategia de diseño y desarrollo de correo electrónico que tome en cuenta a los clientes de correo electrónico y los clientes de correo web que están utilizando. Una que te permite aprovechar lo mejor de y superar (con uno o dos trucos de correo electrónico) sus peores y más desafiantes funciones.

La cuestión es: ¿cómo puedes hacer esto, cuando tu público objetivo podría estar utilizando cualquier número de clientes de correo electrónico y clientes de correo web, en cualquier número de dispositivos? La respuesta, es mediante el uso de una herramienta de análisis de correo electrónico para averiguar cuáles están utilizando.

2. Averigua qué clientes utiliza tu audiencia

Las herramientas de análisis de correo electrónico, como las que se encuentran en Litmus y Email on Acid, rastrean campañas de correo electrónico individuales y crean un informe para ellos, proporcionando valiosos datos de cliente de correo electrónico y cliente de correo web, además del dispositivo, sistema operativo y datos de participación. Para generar y acceder a estos datos, tienes que crear un enlace de seguimiento único dentro de la herramienta, para cada una de tus campañas de correo electrónico, y crearlo en cada HTML de correo electrónico respectivamente. Podría verse de esta forma:

<style data-ignore-inlining>@media print{ #_t { background-image: url('https://tel8cld8.emltrk.com/tel8cld8?p&d=Your_Email_Campaign_Name');}} div.OutlookMessageHeader {background-image:url('https://tel8cld8.emltrk.com/tel8cld8?f&d=Your_Email_Campaign_Name')} table.moz-email-headers-table {background-image:url('https://tel8cld8.emltrk.com/tel8cld8?f&d=Your_Email_Campaign_Name')} blockquote #_t {background-image:url('https://tel8cld8.emltrk.com/tel8cld8?f&d=Your_Email_Campaign_Name')} #MailContainerBody #_t {background-image:url('https://tel8cld8.emltrk.com/tel8cld8?f&d=Your_Email_Campaign_Name')}</style><div id="_t"></div>

<img src="https://tel8cld8.emltrk.com/tel8cld8?d=Your_Email_Campaign_Name" width="1" height="1" border="0" alt="" />

Una vez que hayas enviado tu campaña de correo electrónico, con el enlace de seguimiento incorporado, empezarás a ver que los datos aparecen en tu informe de análisis de correo electrónico. Deberás dejar suficiente tiempo para que tu público objetivo abra tu campaña de correo electrónico, para poder tener una imagen precisa de cómo lo vieron e interactuaron con ella.

Analytics report — Resumen de informes de Litmus Analytics, mostrando los datos del cliente de correo electrónico y correo web

A medida que envías más y más campañas de correo electrónico a tu público objetivo, verá que comienzan a surgir tendencias en tus informes de análisis de correo electrónico, permitiéndote identificar cuáles son los clientes de correo electrónico y los clientes de correo web más populares entre tu público objetivo, y cuáles son menos. Vale la pena indicar que no es aconsejable formular tu estrategia de diseño y desarrollo de correo electrónico en un informe, ya que puede ser una anomalía, así que empieza con un mínimo de tres.

Ahora estás listo para analizar tus informes de análisis de correo electrónico y establecer qué clientes de correo electrónico y clientes de correo web para formular tu estrategia.

3. Reduce los clientes para los que se va a planear

Empieza por analizar los informes en tu herramienta de análisis de correo electrónico, observando principalmente a los clientes de correo electrónico y los clientes de correo web que han sido utilizados por tu público objetivo para abrir tus campañas de correo electrónico. Identifica a los clientes de correo electrónico y webmail más populares de tu público objetivo, indicados por el porcentaje de popularidad registrado en cada uno.

Analytics report showing popularity — Los clientes de correo electrónico y webmail más populares.

Los clientes de correo electrónico y los clientes de correo web más populares deben considerarse los "clientes principales" de tu público objetivo, y en los que debes formular tu estrategia de diseño y desarrollo de correo electrónico. Como guía, su porcentaje de popularidad colectiva debe sumar un mínimo de 60-70% y estar conformado por dos o tres clientes de correo electrónico y / o correo web.

El 30-40% restante debe considerarse como los "clientes secundarios" de tu público objetivo.

Por lo tanto, tu estrategia de diseño y desarrollo de correo electrónico debe formularse para ofrecer el seguimiento de tus "clientes principales" de tu público objetivo :

Asegúrate de que tus campañas de correo electrónico se efectúen sin problemas.
Procura que tus campañas de correo electrónico sean fáciles de interactuar, por ejemplo, mediante el uso de botones que se pueden seleccionar en toda su área.
Aprovecha, cuando sea posible, las funciones dentro de los clientes de correo electrónico y correo web que agregan valor a la experiencia del suscriptor.

Y ofrece lo siguiente a los "clientes secundarios" de tu público objetivo:

Asegúrate de que los mensajes de tu campaña de correo electrónico y las llamadas a la acción sean claros y, si bien no se procesan impecablemente, o exactamente de la misma forma que los "clientes principales", no pierdas demasiado tiempo en ello.
Asegúrate de que tus campañas de correo electrónico sean fáciles de interactuar.

Habiendo establecido cuáles son los "clientes principales" y los "clientes secundarios" de tu público objetivo, estás casi listo para empezar a formular tu estrategia de desarrollo y diseño de correo electrónico. Sin embargo, antes de hacerlo, debes entender sus características únicas para asegurarte de ofrecerles una excelente experiencia de suscriptor.

4. Identifica a tus “Clientes Primarios y Secundarios”

Entender adecuadamente a tus clientes primarios y secundarios te permite tomar buenas decisiones de diseño y desarrollo, al formular tu estrategia de desarrollo y diseño de correo electrónico.

Aunque no es exhaustivo, estas son algunas de las funciones y características compatibles de algunos de los populares clientes de correo electrónico y correo web. Vale la pena afirmar aquí, que algunas de las características predeterminadas pueden mejorarse o superarse haciendo ciertos ajustes.

Características de diseño y características soportadas

Cliente de correo electrónico / Cliente de correo web	Diseño Características y funciones soportadas
Microsoft Outlook	Disposición fija, no responsiva No soporta fuentes web No soporta GIFs animados No hay imágenes de fondo (sin implementar el ajuste de correo electrónico de imágenes de fondo)
iOS	Diseño responsivo Fuentes web GIFs animados Imagenes de fondo Muestra ciertos contenidos (números, fechas y términos relacionados, como hasta), como enlaces azules o enlaces grises (sin implementar el ajuste del enlace azul)
Gmail	Diseño responsivo No soporta fuentes web GIFs animados Imágenes de fondo (excepto en la aplicación Gmail para suscriptores con una cuenta que no sea de Gmail)

Características de desarrollo y funciones soportadas

Cliente de correo electronico / Cliente de correo web	Desarrollo Características y funciones soportadas
Microsoft Outlook	Requiere `<table>` para crear una estructura de correo electrónico
iOS	Soporta `<table>`s y / o `<div>`s para crear la estructura del correo electrónico
Gmail	Soporta `<table>`s y / o `<div>`s para crear la estructura del correo electrónico Requiere CSS en línea para diseñar elementos esenciales en algunas versiones, incluyendo Gmail en Android 5.1, Gmail en Android 6.1 y Gmail App IMAP

Habiendo establecido cuáles son los clientes principales y secundarios de tu público objetivo, y una vez que hayas entendido sus características, estás listo para formular una estrategia de desarrollo y diseño de correo electrónico.

5. Formula tu estrategia de diseño y desarrollo

Utilizando las ideas que has obtenido de tus informes de análisis de correo electrónico y tu comprensión de los diversos clientes de tu público objetivo, ahora puedes formular tu estrategia. Recuerda, tu objetivo es brindar una excelente experiencia de suscriptor a tu público objetivo. Si tienes varios públicos objetivo, necesitarás crear una estrategia para cada uno de ellos.

Lo que comprende una estrategia de desarrollo y diseño de correo electrónico

Una estrategia de diseño y desarrollo se compone de cuatro elementos clave; cada uno informado e influenciado por el cliente primario del público objetivo. Los elementos clave son:

Un enfoque al diseño.
Un enfoque al desarrollo.
Un enfoque a cualquier mejora progresiva.
Un razonamiento que esboce el pensamiento detrás de la estrategia.

Ejemplos de estrategias

Aquí hay algunos ejemplos de estrategias, basadas en publicos objetivo reales, con los clientes de correo electrónico y correo web que influyen en cada enfoque indicados entre paréntesis.

Estrategia # 1

Clientes primarios	Microsoft Outlook (50%) iOS Mail (20%) Gmail (10%)
Diseño	Diseño fijo (Microsoft Outlook) y diseño responsivo (iOS Mail / Gmail en dispositivos móviles) Fuentes seguras para la Web (Microsoft Outlook) (estas serán reemplazadas por las fuentes nativas en Gmail en Android)
Desarrollo	Estructura `<table>` o estructura `<div>` envuelta en una estructura `<table>` fantasma (Microsoft Outlook / iOS Mail) Encabezado y titulares con `<font-size>` para adaptarse a la ventana móvil, con `@media` utilizada para ampliar `font-size` para escritorio (Gmail)
Mejora progresiva	Fuentes web, de estilo similar a la fuente segura para la web para mantener la integridad del diseño (iOS Mail)
Razonamiento	Como la mayoría del público objetivo usa Microsoft Outlook, un cliente de correo electrónico fijo, los correos electrónicos deben diseñarse principalmente para verlos e interactuar en el escritorio. Su falta de soporte de fuentes web, también significa que se deben utilizar fuentes seguras para la web. Se pueden implementar técnicas de mejora progresiva para aprovechar algunas de las características de diseño y desarrollo que ofrecen los otros clientes de correo electrónico y webmail utilizados por esta audiencia objetivo, como las fuentes web en el correo de iOS y los GIF animados en Gmail, aunque los ajustes de correo electrónico apropiados deberán implementarse para garantizar que Microsoft Outlook no renderice las fuentes de reserva como Times.

Estrategia # 2

Clientes primarios	iOS Mail (40%) Gmail (30%)
Diseño	Móvil Diseño responsivo (iOS Mail / Gmail en móvil) Fuentes web o fuentes seguras web (estas serán reemplazadas por fuentes nativas en Gmail en Android)
Desarrollo	Estructura `<div>` o estructura `<div>` envuelta en estructura `<table>` fantasma (si uno de los "clientes secundarios" es Microsoft Outlook) Encabezado y titulares con `font-size` para adaptarse a la ventana móvil, con `@media` utilizada para ampliar `font-size` para escritorio (Gmail)
Mejora progresiva	Fuentes web, de estilo similar a la fuente segura para la web para mantener la integridad del diseño (iOS Mail)
Razonamiento	Como la mayoría del público objetivo usa el correo de iOS, puedes ser más creativo, ya que tienes más características de diseño y desarrollo para aprovechar, como la capacidad de utilizar fuentes web para tu titular y encabezados. El uso de Gmail es más significativo entre este público objetivo, pero debido al almacenamiento en caché de imágenes de Google, es imposible identificar qué versión están utilizando y si admite CSS interno o no. Así que, al igual que con la estrategia # 1, el correo electrónico debe desarrollarse para funcionar en dispositivos móviles sin depender de CSS interno y `@media` queries.

¿Qué son las tablas fantasma?

La tablas fantasma son elementos <table> creados para ser interpretados únicamente en Microsoft Outlook. Como tal, sus etiquetas de apertura <table>, <tr> y <td>, así como sus etiquetas de cierre </td>, </tr> y </table>, están envueltas dentro de comentarios condicionales .

Se utilizan para permitirte crear correos electrónicos para Microsoft Outlook, mientras que también te dejan crear correos electrónicos para otros clientes de correo electrónico y correo web con <div>s. La construcción de correos electrónicos con <div>s garantiza que tus correos electrónicos sean accesibles y te permite beneficiarte de trabajar con la flexibilidad que las <div>s ofrecen, como poder usar la propiedad <float>.

<!--[if true]>
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
    <tr>
  	<td>
<![endif]-->
		<div style="width:auto; max-width:540px; font-size:16px; line-height:24px; color:#3f3f3f; padding:0 20px; margin:0 auto;">
        
        
        </div>
<!--[if true]>
		</td>
	</tr>
</table>
<![endif]-->

Conclusión

Como descubriste en este tutorial, es importante tener una estrategia de diseño y desarrollo de correo electrónico si deseas ofrecer una excelente experiencia de suscriptor a tu público objetivo. También es importante volver a ejecutar y analizar regularmente los informes en tu herramienta de análisis de correo electrónico, ya que tu público objetivo puede cambiar su cliente de correo electrónico o cliente de correo web de vez en cuando.