Una guía para principiantes para crear y enviar un correo electrónico HTML

Publicado: 2022-06-27

Prueba sorpresa rápida: ¿Cuál es el nombre del lenguaje que usan los desarrolladores web para crear las estructuras de los sitios que visita todos los días? Dejando a un lado las respuestas inteligentes y demasiado inteligentes, el lenguaje de marcado de hipertexto (HTML) es un estándar perenne, presente en el nacimiento de la web. Sin embargo, esto no solo se aplica a las páginas web. Su bandeja de entrada es un terreno fértil para el diseño de correo electrónico HTML.

Esto tiene sentido si considera cuántas imágenes, GIF, videos y contenido de marca ve casi cada hora en sus correos electrónicos. Si bien podría ofrecer un correo electrónico de texto sin formato, una versión HTML ofrecerá más beneficios y le brindará más oportunidades para promocionar su marca y su negocio.

Para esta publicación, vamos a discutir cómo crear y enviar correos electrónicos HTML, y por qué debería hacerlo. En algunos puntos, profundizaremos en cómo codificaría un correo electrónico, pero no necesitará este conocimiento para crear el suyo propio.


¿Qué es un correo electrónico HTML?

Los correos electrónicos que llegan a su bandeja de entrada pueden venir en dos sabores:

  • Texto sin formato: Es casi un telegrama para la era moderna. No hay estilo ni formato mínimo, y el destinatario verá las palabras con exclusión de todo lo demás.
  • HTML: Este es un petardo explosivo en comparación con el texto sin formato, y tiene un diseño pesado. Utiliza código HTML para presentar un correo electrónico, aunque, como veremos, no siempre utilizará los estándares web modernos.

Por ejemplo, sabrá si recibe un correo electrónico de texto sin formato, ya que se ve exactamente como un documento de texto sin formato. Por el contrario, un correo electrónico HTML se ve casi igual que una página web moderna (más o menos algunos problemas de estilo y formato):

Un correo electrónico HTML que se muestra en el navegador, que muestra un título que contiene un emoji de cookie y el contenido del cuerpo que muestra imágenes, emojis y formato tipográfico.
Un correo electrónico HTML dentro del navegador.

En la mayoría de los casos, un correo electrónico HTML no se esforzará por brindar lo último en interactividad o participación dinámica. Una vez más, es algo que cubriremos más adelante, pero el correo electrónico HTML está rezagado con respecto a la web, en cuanto a estándares. Como tal, HTML es más una herramienta impulsada por el diseño que una para ayudar a proporcionar una experiencia. Sin embargo, esto plantea una pregunta: ¿Por qué querrías usar correo electrónico HTML si la única razón es visual? Buscaremos responder esto a continuación.

P: ¿Cuál es el lenguaje que usan los desarrolladores web para crear los sitios que visitas todos los días? R: HTML... y puedes aprender más en esta guía Haz clic para twittear

Por qué usaría correo electrónico HTML en lugar de formato de texto sin formato

Es raro que vea un correo electrónico de texto sin formato de una empresa, por varias razones. Sin embargo, el texto sin formato no está mal en sí mismo , más aún, no ofrece ninguno de los beneficios del formato de correo electrónico HTML. Por ejemplo:

  • Puede utilizar los elementos visuales inherentes para ayudar a centrar la atención en las diversas partes del contenido de su correo electrónico.
  • Por extensión, un correo electrónico HTML es un formato enriquecido para presentar su contenido. Esto significa que puede aprovechar los elementos que los usuarios esperan interactuar con ellos, como imágenes, videos y más.
  • Combinados, estos dos aspectos pueden ofrecerle una excelente oportunidad para marcar su contenido, tal como lo haría con su sitio web principal.

Sin embargo, decidir usar un correo electrónico HTML no es la tormenta perfecta que pensarías. También hay algunos inconvenientes a considerar. Primero, debe considerar la experiencia del usuario, tal como lo haría cuando diseña un sitio web. Es posible que esto no solo incluya un navegador: muchos usuarios también prefieren leer correos electrónicos en un cliente dedicado.

Además, también debe considerar algunos de los problemas de privacidad y seguridad que dominan el desarrollo web. Esto es especialmente cierto si desea incluir JavaScript, obtiene fuentes de terceros y otros aspectos.

Debido a esto, debe luchar batallas de accesibilidad y estándares casi en más frentes que en la web. Es difícil crear un correo electrónico HTML que funcione en todos los navegadores y clientes. Por supuesto, es posible hacer esto, y cubriremos el aspecto técnico en una sección futura. Por ahora, querrá decidir los diversos elementos de su correo electrónico y luego buscar implementarlos.

Los elementos esenciales (y prácticas típicas) de un correo electrónico HTML

Este artículo hará referencia al diseño web en varios lugares, debido a las similitudes inherentes. Un aspecto que ofrece un flujo de trabajo similar es cómo decidir sobre las facetas y secciones de su correo electrónico HTML.

Al igual que la web, hay algunos elementos que son prácticamente no negociables para sus correos electrónicos. Por supuesto, necesitas contenido. Hay algunos elementos típicos a considerar aquí:

  • Su encabezado es importante porque esta es la primera impresión que su correo electrónico ofrecerá a los lectores.
  • Al igual que el diseño web, también será beneficioso pensar en qué elementos se muestran en la parte superior de la página.
  • El contenido del cuerpo es vital porque, después de todo, es por eso que el lector se suscribirá a tus correos electrónicos.
  • El pie de página de su correo electrónico HTML también ofrece mucho valor para usted y sus suscriptores, y puede ser un elemento infravalorado de sus correos electrónicos.

Hay algunos puntos aquí que podemos tocar más. Primero, considere cuántos emojis impregnan nuestro uso diario de la web. Si bien no son un elemento HTML estricto, la aplicación de buen gusto de emojis puede hacer maravillas para su contenido, especialmente su encabezado:

Una sección de un correo electrónico con un fondo negro que dice: "Cómo los videos rápidos nos ayudan a compartir pensamientos" y un emoji de bombilla.
Una selección de emojis utilizados en el encabezado del título.

El pie de página también es el mejor lugar para cierta información legal esencial. Dos de los mayores problemas relacionados con los correos electrónicos son el spam y si un correo electrónico llega a las bandejas de entrada correctas (si es que llega). Esto es algo que veremos en una sección posterior, ya que es una parte vital de la creación y envío de correos electrónicos HTML.

Consideración de algunas prácticas típicas para sus correos electrónicos HTML

Hay muchos cruces con el marketing por correo electrónico cuando se trata de algunas de las prácticas más óptimas que usará dentro de sus diseños y diseños. Hay uno que querrás incluir casi como un elemento no negociable: una suscripción doble.

Uno de los mayores trucos de marketing por correo electrónico es que desea llevar sus correos electrónicos al lector. En otras palabras, proporcione un formulario de suscripción en un sitio web, ya que tiene una gran tasa de conversión. Sin embargo, no debería ser la única vez que solicite confirmación. Es una práctica excelente enviar también un segundo opt-in como un correo electrónico:

Una parte de un mensaje de suscripción doble de un correo electrónico HTML, que le dice al usuario por qué está recibiendo un correo electrónico y le pide que verifique usando un botón verde que dice "Verificar correo electrónico".
Un correo electrónico de doble suscripción.

Hay algunas razones para esto:

  • Uno, genera confianza con su lector, porque obtiene permiso expreso para enviarles correos electrónicos.
  • Por extensión, también tiene un consentimiento explícito en el caso de una referencia de spam (más sobre esto más adelante).
  • Usted ayuda a detener el abuso de correo electrónico y spam para otros porque tienen que optar específicamente por una suscripción a sus correos electrónicos.

De hecho, debido a que una suscripción doble implica enviar un correo electrónico a la dirección en cuestión, es la mejor manera de validar la dirección de correo electrónico.

Hay algunas otras buenas prácticas a considerar también. Sin embargo, los siguientes son más opcionales, ya que obtendrá resultados fantásticos, pero habrá momentos en los que no querrá seguir estas pautas:

  • Su línea de asunto debe ser perfecta y el contenido de su correo electrónico debe ser al grano. Dado el advenimiento y ahora el dominio de la navegación móvil, esto es especialmente importante.
  • Hablando de eso, querrá asegurarse de que su correo electrónico HTML se lea sin problemas en pantallas más pequeñas, lo que significa que no hay pancartas demasiado grandes ni logotipos de gran tamaño.
  • Si incluye un fuerte llamado a la acción (CTA) en cada correo electrónico, tiene una buena oportunidad de lograr una mejor participación del usuario.
  • El seguimiento es un tema polémico, pero esto lo ayudará a comprender qué hacen sus usuarios cuando les envía un correo electrónico. Algunos proveedores incluyen un sólido conjunto de análisis como estándar.

Tan importante como cómo presenta y configura su correo electrónico, es cómo crear el diseño y el diseño. En las próximas secciones, veremos cómo crear un correo electrónico HTML y luego terminaremos con algunos consejos para enviarlos.

El enfoque técnico que deberá adoptar para crear un correo electrónico HTML

Si tiene algo de experiencia en desarrollo web, sin duda utilizará HTML5 como lenguaje de marcado. Este es un mundo aparte de las instancias anteriores de HTML y XHTML e incluye más de una división entre el estilo (del cual prácticamente no hay elementos que sean válidos) y la estructura.

Como ejemplo de esto último, HTML5 ofrece varias etiquetas diferentes para definir las áreas de contenido de su sitio.

Un fragmento de HTML en la aplicación Onivim2, que muestra una serie de etiquetas para ayudar a definir áreas de contenido, como <html>, <head>, <body> y más.
Una serie de etiquetas estructurales HTML.

Sin embargo, el correo electrónico HTML es una bestia diferente, en la medida en que está algo atrasado. Como tal, querrá usar todas esas tablas HTML4 antiguas y el estilo en línea para crear su diseño. Para saber por qué sucede esto, debe hablar con los desarrolladores de los clientes de correo electrónico, ya que a menudo modifican el correo electrónico HTML cuando llega a su bandeja de entrada. Uno de los actos más comunes es quitar CSS y JavaScript de los correos electrónicos por razones de seguridad (entre otras).

Esto significa que deberá proporcionar otra forma de agregar estilo a sus correos electrónicos HTML: en línea es la única opción de compatibilidad. Hablando de compatibilidad, esta es una consideración importante. Debe equilibrar un estilo único con las capacidades del cliente de correo electrónico del usuario final. Como tal, hay algunas otras consideraciones técnicas que querrá tener en cuenta:

  • El uso de fuentes del sistema en lugar de una de terceros le ahorrará una solicitud HTTP, cargará el correo electrónico rápidamente para el usuario y entregará un correo electrónico de aspecto consistente para arrancar.
  • Podría ir aún más lejos y proporcionar una versión de texto sin formato de su correo electrónico para aquellos que no pueden ver el correo electrónico HTML en su cliente. Muchos sitios ofrecerán una versión HTML a la que puede acceder en línea, tanto por este motivo como por una copia de seguridad.
  • El texto alternativo es tan importante para los correos electrónicos HTML como para la web. Como tal, use texto alternativo en todas partes donde agregue una imagen a su contenido para accesibilidad.

Hay un aspecto técnico de un correo electrónico HTML en el que debe pensar más, ya que puede cruzar la línea entre el estilo en línea, CSS y otros factores. Analicemos los "condicionales" en breve.

Uso de condicionales

Un vestigio de los correos electrónicos HTML que solían estar en un juego de herramientas de desarrollador web HTML más antiguo es el de los condicionales. Aquí es donde especifica qué navegador utilizará un fragmento de código en particular.

Honestamente, este es casi siempre un problema basado en Microsoft. Para los desarrolladores web, Internet Explorer (IE) fue el engendro del navegador demoníaco. Sin embargo, para correos electrónicos HTML, es Outlook. Entre las diferentes versiones, es posible que vea que su estilo se presenta de una manera que no esperaba.

Debido a esto, puede agregar bloques de condiciones a su código y definir esos elementos. Por ejemplo, puede apuntar tanto a versiones de Outlook basadas en Word como en IE.

Primera palabra:

 <!--[if mso]>

Esto es para versiones de Outlook basadas en Word:

 <![endif]-->

Para Internet Explorer, utiliza una etiqueta diferente:

 <!--[if (IE)]>

Esto es para versiones de Outlook basadas en IE:

 <![endif]-->

Si el navegador al que se dirige está basado en WebKit (como Apple Safari, el navegador de PlayStation, el Kindle de Amazon y más), puede usar una consulta de medios para proporcionar un estilo específico:

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

Esto le brinda una forma ligeramente mejor de adaptar su correo electrónico HTML a la pantalla del usuario final. En general, el estilo HTML para los correos electrónicos no es perfecto, pero cada cliente de correo electrónico tiene suficiente contenido para ayudarlo a crear algunos diseños sorprendentes.

Sus opciones para crear correos electrónicos HTML

A pesar de lo que ya discutimos, tiene una serie de opciones flexibles para ayudarlo a crear correos electrónicos HTML. Por ejemplo, puede construir desde cero utilizando un buen editor de texto y HTML.

Sin embargo, hay otras opciones que podemos considerar:

  • Puede usar un servicio dedicado, como una aplicación de marketing por correo electrónico, para crear sus correos electrónicos. Muchas aplicaciones proporcionarán un generador visual, pero también le darán el alcance para escribir su propio código y crear su propia plantilla.
  • Hablando de eso, puede descargar una plantilla para sus correos electrónicos HTML. Esto se parece mucho a un tema de WordPress, ya que proporciona una base para el resto de su diseño. A partir de ahí, puedes personalizarlo a tu gusto. Es un buen término medio entre las opciones de codificación y construcción.

Más adelante, construiremos nuestro correo electrónico usando HTML. Sin embargo, antes de esto, echemos un vistazo a algunos de los proveedores de servicios de correo electrónico que quizás desee considerar, independientemente del método elegido para crear sus correos electrónicos.

3 proveedores de servicios de correo electrónico perfectos para crear correos electrónicos HTML

Debido a que el enfoque de esta publicación es crear correos electrónicos HTML, no necesitamos profundizar demasiado cuando se trata de proveedores de servicios de correo electrónico. Aun así, hay algunos que probablemente considerará.

No podemos cubrirlos todos, así que vamos a mencionar tres de los más populares. Vamos a redondearlos.

1. Mailchimp

El logotipo de Mailchimp, que muestra a la mascota Freddie, guiñando un ojo y las palabras "Intuit Mailchimp".
El logotipo de Mailchimp.

Este proveedor de servicios de correo electrónico es una solución de referencia, casi una decisión instintiva para muchos. Mailchimp es el estándar de oro en las aplicaciones de marketing por correo electrónico a los ojos de muchos, y hay muchas buenas razones para ello:

  • Incluye muchas características típicas que encontrará en muchas otras aplicaciones similares.
  • Hay mucha ayuda cuando se trata de promocionar un negocio, como automatización de marketing, herramientas de gestión de audiencia y más.
  • Tiene un conjunto de herramientas creativas de primer nivel para ayudarlo a crear correos electrónicos HTML.

Por supuesto, queremos ver esto último aquí. El Asistente creativo es una forma de que Mailchimp conozca tu marca y te ayude a crear y personalizar tus correos electrónicos. También puede conectar aplicaciones de terceros como Adobe Photoshop para ayudarlo a crear el correo electrónico perfecto.

También es sencillo trabajar con HTML existente, especialmente si usa el Classic Builder de Mailchimp. De todos modos, tiene formas de importar plantillas HTML si las necesita.

Mailchimp utiliza un híbrido complicado de niveles de suscripción mensual y la cantidad de contactos para llegar a un precio final. Sugerimos que las pequeñas empresas necesiten un plan de alrededor de $ 35 por mes, hasta 2500 contactos. Sin embargo, deberá investigar el mejor plan para usted en función de las funciones que necesita y la cantidad de contactos que cree que traerá a bordo.

2. AWeber

Para algunos, AWeber representa el pináculo del marketing por correo electrónico. Es una plataforma fantástica y poderosa e incluye un conjunto de características posiblemente más enfocadas que Mailchimp.

La interfaz de AWeber, que muestra la interfaz de Canva superpuesta al constructor visual. El lienzo muestra el logotipo de "Tara's Healthy Eats" y la barra lateral contiene una serie de gráficos e imágenes.
El logotipo de AWeber.

Incluye una serie de características esenciales que necesitará para enviar correos electrónicos:

  • La capacidad de automatizar y programar mensajes, campañas y más.
  • Tiene excelentes herramientas organizativas, como el etiquetado y la segmentación de suscriptores.
  • AWeber también le permite automatizar el contenido que crea para sus correos electrónicos. Por ejemplo, puede convertir publicaciones de blog en correos electrónicos con una cantidad mínima de trabajo.

Cuando se trata de crear sus correos electrónicos, AWeber tiene algunos trucos bajo la manga. Utiliza un generador visual de arrastrar y soltar e incluye una biblioteca de plantillas personalizadas para comenzar. Además, puede conectar AWeber a su cuenta de Canva y usar esta última para ayudar a diseñar sus correos electrónicos.

También hay un editor de HTML dedicado, que no es el caso de Mailchimp. Incluso obtienes esto en el nivel gratuito de AWeber. Hablando de eso, el precio es más sencillo aquí. Pagará alrededor de $ 25 por mes por hasta 2,500 contactos.

3. Contacto constante

Constant Contact es un caso atípico cuando se trata de proveedores de servicios de correo electrónico, pero es más como un arma secreta. Ofrece una fantástica gama de características y funciones, y también te permite trabajar con HTML cuando lo necesitas.

El logo de Constant Contact, en azul, con un logo circular que contiene una sección en amarillo.
El logotipo de contacto constante.

Al igual que AWeber, Constant Contact se enfoca en el marketing por correo electrónico sobre otras áreas centradas en los negocios. Como tal, tiene un conjunto de funciones que disfrutará:

  • Tiene herramientas de gestión de listas de clientes y funcionalidad de automatización de marketing.
  • Hay amplias opciones de informes.
  • Puede integrar programas publicitarios de Facebook, Instagram y Google.
  • Hay muchas maneras de involucrar y atraer nuevos suscriptores a sus listas.

La funcionalidad de diseño de Constant Contact también es buena. Puede elegir una plantilla y trabajar con un editor visual para crear todo el diseño. Sin embargo, también puede trabajar con HTML, a veces de forma avanzada en relación con otras herramientas.

El precio también es razonable. Pagará alrededor de $35 por mes por el plan Core y 2500 contactos, o $70 por el plan Plus.

Lo que necesitará para crear un correo electrónico HTML

Antes de comenzar a crear sus correos electrónicos HTML, necesitará algunas herramientas y habilidades a mano. Esto es lo que debe organizar antes de tronarse los nudillos y comenzar:

  • Querrá usar un editor de código que le resulte cómodo porque necesitará ayudarlo durante el proceso. Si no sabe cuál elegir, muchos usuarios optan por Visual Studio Code, aunque Brackets sería ideal para esta tarea en particular. Vamos a usar Onivim2, que es un editor de estilo Vim basado en la infraestructura central de VS Code.
  • Si bien necesitará habilidades HTML, no necesitará el mismo conjunto de conocimientos que un desarrollador web moderno (aunque no perjudique a sus prospectos).
  • Necesitará una forma de probar sus correos electrónicos: MailHog es una solución que presentamos en otra parte del blog de Kinsta.
  • Si bien no vamos a usar una plantilla preconstruida, es posible que desee usar una de estas en el futuro.
  • También necesitará un proveedor de correo electrónico, ya que necesitará alguna forma de enviar su correo electrónico HTML terminado.

Con todo esto en su lugar, está listo para abrir un editor de texto y comenzar. A continuación, ejecutaremos el proceso para crear un correo electrónico HTML básico.

Cómo crear un correo electrónico HTML desde cero

Antes de comenzar, vale la pena señalar que no vamos a utilizar un servicio dedicado como Mailchimp o AWeber. En cambio, vamos a crear una plantilla simple desde cero que puede importar donde lo necesite.

Dividiremos el proceso en algunas secciones diferentes porque, aunque un correo electrónico HTML es simplemente relativo a un sitio web, todavía hay mucho que considerar.

1. Crea la base para tu correo electrónico HTML

Es una buena idea comenzar con el esqueleto de su plantilla de correo electrónico. Esto seguirá algunas prácticas típicas para HTML en general:

¿Luchando con el tiempo de inactividad y los problemas de WordPress? ¡Kinsta es la solución de hospedaje diseñada para ahorrarle tiempo! Echa un vistazo a nuestras características
 <!DOCTYPE PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title> </head> <body> </body> </html>

Hay algunas cosas que suceden aquí que debemos mencionar. Primero, especificamos un "tipo de documento" para Transitional XHTML 1.0, que es una práctica común entre los desarrolladores de correo electrónico. A partir de ahí, especificamos un espacio de nombres XML, que será importante más adelante.

También notará algunas etiquetas meta, y estas definen el conjunto de caracteres y cómo el navegador debe representar el HTML que sigue en su ventana gráfica.

El resto del esqueleto es sencillo: están las etiquetas de título y cuerpo que usaremos a continuación.

2. Agregue la estructura para su plantilla de correo electrónico

Volviendo a nuestra discusión sobre qué etiquetas HTML usar, recordará que no queremos usar <div> u otros elementos estructurales típicos. En su lugar, queremos usar tablas, ya que esto funciona bien dentro de los servicios y clientes de correo electrónico.

Todo comenzará con un conjunto simple de etiquetas <table> dentro del cuerpo:

 <body> <table role="presentation"> <tr> <td> </td> </tr> </table> </body>

El atributo que configuramos dentro de la etiqueta <table> ayuda a los lectores de pantalla a analizar el texto que contiene, por lo que es bueno para la accesibilidad.

A partir de aquí, deberá agregar nuevas filas y columnas a su tabla para crear la plantilla de correo electrónico HTML. La forma de hacer esto depende de usted, pero es bueno comenzar con una base de secciones de encabezado, pie de página y cuerpo. No los repetiremos aquí por brevedad, pero los mencionaremos a medida que avancemos.

La buena noticia es que puede continuar agregando nuevas filas a su tabla si necesita agregar más secciones. Sin embargo, a partir de aquí, querrá comenzar a introducir estilos y otros elementos.

3. Incluya estilo para sus elementos

La belleza de HTML es que es casi independiente de su estilo. El marcado es sencillo, pero es posible que los estilos que aplique no lo sean. Aquí es donde verá que su correo electrónico HTML cobra vida.

Como guía mientras diseñamos, agregaremos una etiqueta <style> a <head> para mostrar un borde general:

 <style> table, td {border:2px solid #000000 !important;} </style>

Para comenzar, vamos a asegurarnos de que no haya un espacio inesperado en el cuerpo o en la tabla principal (que aquí actúa como nuestro cuerpo porque algunos clientes de correo electrónico eliminarán esa etiqueta):

 <body> <table role="presentation"> </body>

También agregaremos algo de centrado y eliminaremos cualquier relleno adicional de nuestras diferentes celdas de sección:

 <tr> <td align="center">Header </td> </tr>

Si echas un vistazo a esto en tu navegador, no parecerá gran cosa:

Una ventana del navegador que muestra texto negro sobre un fondo blanco que dice "Encabezado", "Cuerpo" y "Pie de página". Cada celda tiene un borde negro.
Una ventana del navegador que muestra el esqueleto del correo electrónico HTML.

Sin embargo, desde aquí, puede desarrollar aún más su plantilla de correo electrónico utilizando tablas y etiquetas de estilo. Por ejemplo, creamos una sección principal para nuestro encabezado y expandimos el pie de página y el cuerpo:

Un correo electrónico HTML que muestra un sobre de correo aéreo completo con calcomanías, un sello y manchas rojas y azules, texto del cuerpo del sitio web de Kinsta y una sección de pie de página que contiene una política de privacidad, soporte y enlaces de términos. También hay un aviso de derechos de autor para Kinsta y un enlace para darse de baja.
Una plantilla de correo electrónico de maqueta durante la creación (Fuente de la imagen: Settergren).

Es probable que cree una plantilla mejor y más adecuada para sus necesidades, pero al usar tablas anidadas y algunas habilidades básicas de HTML, puede crear una plantilla de correo electrónico HTML personalizada y con capacidad de respuesta que dé en el blanco.

4. Pruebe su correo electrónico

Antes de terminar, querrá probar su correo electrónico para asegurarse de que funciona bien en diferentes dispositivos. Hay algunos servicios diferentes que pueden ayudar aquí.

Por ejemplo, Email on Acid incluye una lista completa de verificación previa a la implementación para ayudarlo a asegurarse de que su plantilla no cause problemas:

La interfaz de Email On Acid, que muestra un correo electrónico, una barra lateral negra, una lista de verificación previa a la implementación en curso y un código relacionado con un elemento dentro del correo electrónico.
El sitio web Email on Acid.

Los usuarios de Litmus conocerán PutsMail, pero es accesible para todos:

El sitio web de Litmus con tres paneles de maqueta, uno en modo oscuro, que muestra opciones para crear y compartir correos electrónicos, junto con íconos que muestran un candado y un sobre.
El sitio web del tornasol.

Deberá registrarse para obtener una cuenta para usar el servicio, pero es fácil de usar. Aprovecha la funcionalidad para obtener una vista previa de los correos electrónicos en varios navegadores diferentes y en varios dispositivos.

Mailgun también ofrece un servicio fantástico que se relaciona con su oferta principal. Puede probar clientes de correo electrónico, navegadores y más a través de la interfaz. Además, puede probar elementos como líneas de asunto, para asegurarse de mantener altas sus tasas de apertura.

Dos paneles que muestran un gráfico colorido y una colección de métricas relacionadas con la capacidad de entrega, el riesgo y más.
Herramienta de prueba de correo electrónico de Mailgun.

Sin embargo, una vez que pruebe su correo electrónico, deberá asegurarse de que llegue a la bandeja de entrada del destinatario. En la sección final, discutiremos esto más.

Envío de un correo electrónico HTML: lo que necesita saber

Un beneficio de usar un servicio de marketing por correo electrónico que aún no hemos mencionado es cómo manejará el aspecto legal del envío de correos electrónicos. Esto es importante porque si te equivocas en algo aquí, no solo no podrás comunicarte con el destinatario, sino que te meterás en problemas.

Un servicio de marketing por correo electrónico ya tendrá una buena relación de trabajo con las organizaciones que manejan el spam y las facetas relacionadas con el envío de un correo electrónico. Como tal, a menudo es una buena idea elegir uno de estos si no quiere preocuparse por enviar spam.

Sin embargo, hay algunos consejos que podemos dar al respecto, independientemente de la plataforma que utilice:

  • Asegúrese de seguir todas las pautas de la ley CAN-SPAM, especialmente si su audiencia principal se encuentra en los EE. UU. Por supuesto, diferentes países tendrán sus propias directivas legales.
  • Incluir un opt-in doble para los suscriptores. Aquí es donde les pides que confirmen una suscripción, pero también les envías una segunda confirmación. Esto lo protege a usted y al suscriptor si hay una consulta de spam o una solicitud de privacidad en el futuro.

La capacidad de entrega es un elemento clave de sus correos electrónicos, y esto es algo que cubrimos en otro artículo, en profundidad. Sin embargo, este concepto es una mezcla de varios aspectos, como usar un buen código, obtener el nivel correcto de permiso y más.

Esto se relaciona con otra faceta: su puntaje de envío. Esto es similar a un puntaje de crédito y, en última instancia, es una medida de su reputación. Hay algunos componentes diferentes aquí que hacen el todo:

  • La tasa de rebote de su sitio.
  • El número de quejas que recibe su sitio en relación con los correos electrónicos que envía.
  • La reputación de su dirección IP.
  • Su firma de nombre de dominio.

Este último se relaciona con su DomainKeys Identified Mail (DKIM) y el marco de política del remitente (SPF). Además, puedes comprobar la reputación de tu IP a través de servicios como SenderScore, o IPQualityScore.

Si elige el proveedor de protocolo simple de transporte de correo (SMTP) correcto en primera instancia, puede marcar algunas de estas casillas de una sola vez. Al igual que su elección de solución de marketing por correo electrónico, este servicio comprenderá lo que necesita para mantener su capacidad de entrega alta y en el lado correcto de los poderes fácticos.

Mailgun es una solución que mencionamos anteriormente, y esto podría ser ideal. Sin embargo, existen otros como Mailjet, Sendinblue e incluso el propio servicio de Gmail.

Aprenda a crear y enviar correos electrónicos HTML con un poco de ayuda de esta guía Haga clic para twittear

Resumen

El correo electrónico no está cerca de llegar a su fin. Como tal, usar el correo electrónico para sus propias necesidades, como promoción y marketing, es una forma fantástica y rentable de llegar a suscriptores, usuarios y clientes potenciales.

Si bien puede comprar una plantilla HTML dedicada, crear sus propios correos electrónicos HTML no es tan difícil. Podría ser la forma en que tenga éxito si tiene una visión específica en mente. Sin embargo, deberá sacar sus viejos trucos de HTML, como condicionales y tablas anidadas. El diseño de correo electrónico HTML aún no está al nivel del diseño web moderno, pero aún puede lograr mucho con poco.

¿Tiene la necesidad de crear correos electrónicos HTML y, de ser así, qué preguntas tiene? ¡Háganos saber en la sección de comentarios!