Prueba rápida: ¿Cómo se llama el lenguaje que utilizan los desarrolladores web para crear las estructuras de los sitios que visitas cada día? Dejando a un lado las respuestas inteligentes y demasiado ingeniosas, el Lenguaje de Marcado de Hipertexto (HTML) es un estándar imperecedero, presente en el nacimiento de la web. Sin embargo, no sólo se aplica a las páginas web. Tu bandeja de entrada es un terreno fértil para el diseño de correos electrónicos en HTML.

Esto tiene sentido si consideras la cantidad de imágenes, GIFs, vídeos y contenido de marca que ves casi cada hora en tus correos electrónicos. Aunque podrías ofrecer un correo electrónico en texto plano, una versión en HTML te ofrecerá más ventajas y te dará más oportunidades de hacer marca y comercializarte a ti y a tu empresa.

En este post, vamos a hablar de cómo crear y enviar correos electrónicos en HTML, y de por qué deberías hacerlo. En algunos puntos, nos adentraremos en cómo codificar un correo electrónico, pero no necesitarás estos conocimientos para crear el tuyo propio.

¿Qué es un correo electrónico HTML?

Los correos electrónicos que llegan a tu bandeja de entrada pueden ser de dos tipos:

  • Texto simple: Es casi un telegrama para la era moderna. No hay estilo ni formato mínimo, y el destinatario verá las palabras excluyendo todo lo demás.
  • HTML: Es un petardo comparado con el texto plano, y tiene mucho diseño. Utiliza el código HTML para presentar un correo electrónico, aunque, como veremos, no siempre va a utilizar los estándares web modernos.

Por ejemplo, sabrás si recibes un correo electrónico de texto plano, ya que tiene el mismo aspecto que un documento de texto plano. Por el contrario, un correo electrónico HTML tiene un aspecto casi idéntico al de una página web moderna (más o menos en cuanto a estilo y formato):

A HTML email displayed within the browser, showing a title containing a cookie emoji, and body content showing images, emojis, and typography formatting.
Un correo electrónico HTML dentro del navegador.

En la mayoría de los casos, un correo electrónico HTML no se esforzará por ofrecer lo último en interactividad o compromiso dinámico. De nuevo, es algo que trataremos más adelante, pero el correo electrónico en HTML va por detrás de la web, en cuanto a estándares. Como tal, el HTML es más una herramienta impulsada por el diseño que una que ayude a proporcionar una experiencia. Sin embargo, esto plantea una pregunta: ¿Por qué querrías utilizar el correo electrónico HTML si la única razón es visual? A continuación trataremos de responder a esta pregunta.

¿Por qué utilizar el correo electrónico en HTML en lugar del formato de texto plano?

Es raro que veas un correo electrónico en texto plano de una empresa, por varias razones. Sin embargo, el texto plano no es malo en sí mismo, sino que no ofrece ninguna de las ventajas del formato de correo electrónico HTML. Por ejemplo:

  • Puedes utilizar los elementos visuales inherentes para ayudar a centrar la atención en las distintas partes del contenido de tu correo electrónico.
  • Por extensión, un correo electrónico HTML es un formato rico para presentar tu contenido. Esto significa que puedes aprovechar los elementos que los usuarios esperan para atraerlos, como imágenes, vídeos y otros.
  • Combinados, estos dos aspectos pueden ofrecerte una magnífica oportunidad para marcar tu contenido, al igual que lo harías con tu sitio web principal.

Sin embargo, decidirse por un correo electrónico en HTML no es la tormenta perfecta que se podría pensar. También hay que tener en cuenta algunos inconvenientes. En primer lugar, tienes que tener en cuenta la experiencia del usuario, igual que cuando diseñas un sitio web. Esto no sólo puede incluir un navegador: muchos usuarios también prefieren leer los correos electrónicos en un cliente dedicado.

Además, también tienes que tener en cuenta algunas de las cuestiones de privacidad y seguridad que dominan el desarrollo web. Esto es especialmente cierto si quieres incluir JavaScript, si utilizas fuentes de terceros y otros aspectos.

Por ello, tienes que librar batallas de accesibilidad y estándares casi en más frentes que la web. Es difícil crear un correo electrónico HTML que funcione en todos los navegadores y clientes. Por supuesto, es posible hacerlo, y cubriremos el aspecto técnico en una sección futura. Por ahora, querrás tener decididos los distintos elementos de tu correo electrónico, y luego tratar de ponerlos en práctica.

Los elementos esenciales (y las prácticas habituales) 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 las facetas y secciones de tu correo electrónico HTML?

Al igual que en la web, hay algunos elementos que son prácticamente innegociables para tus correos electrónicos. Por supuesto, necesitas contenido. Aquí hay algunos elementos típicos a tener en cuenta:

  • Tu cabecera es importante porque es la primera impresión que tu correo electrónico ofrecerá a los lectores.
  • Al igual que el diseño web, pensar en qué elementos se muestran por encima del pliegue también será beneficioso.
  • El cuerpo del contenido es vital porque, al fin y al cabo, esta es la razón por la que el lector se suscribirá a tus correos electrónicos.
  • El pie de página de tu correo electrónico HTML también ofrece mucho valor para ti y para tus suscriptores, y puede ser un elemento subestimado de tus correos electrónicos.

Aquí hay algunos puntos que podemos tocar más a fondo. En primer lugar, considera lo mucho que los emojis impregnan nuestro uso cotidiano de la web. Aunque no son un elemento HTML estricto, la aplicación de emojis con buen gusto puede hacer maravillas en tu contenido, especialmente en tu cabecera:

A section of an email with a black background reading, “How quick videos help us share thoughts” and a lightbulb emoji.
Una selección de emojis utilizados en la cabecera del título.

El pie de página es también el mejor lugar para la 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 vamos a ver en una sección posterior, ya que es una parte vital de la creación y el envío de correos electrónicos HTML.

Considerar algunas prácticas típicas para tus correos electrónicos HTML

Hay mucho cruce con el marketing por correo electrónico en lo que respecta a algunas de las prácticas más óptimas que utilizarás en tus diseños y composiciones. Hay una que querrás incluir casi como elemento no negociable: Un doble opt-in.

Uno de los mayores trucos de marketing por correo electrónico es que quieres llevar tus correos electrónicos al lector. En otras palabras, proporcionar un formulario de opt-in en un sitio web, ya que esto tiene una gran tasa de conversión. Sin embargo, no debe ser el único momento en el que pidas confirmación. Es una práctica excelente enviar también un segundo opt-in en forma de correo electrónico:

A portion of a double opt-in message from a HTML email, telling the user why they are receiving an email, and asking them to verify using a green button reading, “Verify Email.”
Un correo electrónico de doble opt-in.

Hay varias razones para ello:

  • En primer lugar, genera confianza con tu lector, porque obtienes un permiso expreso para enviarle correos electrónicos.
  • Por extensión, también tienes el consentimiento explícito en el caso de una remisión de spam (más adelante se habla de esto).
  • Ayudas a detener el abuso del correo electrónico y del spam para otros, porque tienen que optar específicamente por una suscripción a tus correos electrónicos.

De hecho, como un doble opt-in implica que envíes un correo electrónico a la dirección en cuestión, es la mejor manera de validar la dirección de correo electrónico.

También hay otras buenas prácticas a tener en cuenta. Sin embargo, las siguientes son más bien opcionales, en el sentido de que obtendrás resultados fantásticos, pero habrá ocasiones en las que no querrás seguir estas pautas:

  • Tu línea de asunto debe ser perfecta, y el contenido de tu correo electrónico debe ir al grano. Dado el advenimiento y ahora el dominio de la navegación móvil, esto es especialmente importante.
  • Hablando de esto, deberás asegurarte de que tu correo electrónico HTML se lee sin problemas en las pantallas más pequeñas, lo que significa que no hay banners exagerados ni logotipos de gran tamaño.
  • Si incluyes una fuerte llamada a la acción (CTA) dentro de cada correo electrónico, tendrás una buena oportunidad de mejorar el compromiso del usuario.
  • El seguimiento es un tema controvertido, pero te ayudará a comprender lo que hacen tus usuarios cuando les envías un correo electrónico. Algunos proveedores incluyen un sólido conjunto de análisis como estándar.

Tan importante como la forma de presentar y configurar tu correo electrónico, es la forma de crear el diseño y la disposición. En las próximas secciones, veremos cómo construir un correo electrónico HTML, y terminaremos con algunos consejos para enviarlos.

El enfoque técnico que necesitarás para crear un correo electrónico HTML

Si tienes alguna experiencia en desarrollo web, sin duda utilizarás HTML5 como lenguaje de marcado. Éste es un mundo aparte de las instancias anteriores de HTML y XHTML, e incluye una mayor división entre el estilo (del que hay prácticamente cero elementos válidos) y la estructura.

Como ejemplo de esto último, HTML5 ofrece una serie de etiquetas diferentes para definir las áreas de contenido de tu sitio.

A snippet of HTML in the Onivim2 app, showing a number of tags to help define content areas, such as <html>, <head>, <body>, and more.
Una serie de etiquetas estructurales de HTML.

Sin embargo, el HTML del correo electrónico es una bestia diferente, en la medida en que está algo atrasado. Por ello, tendrás que utilizar todas esas viejas tablas de HTML4 y el estilo en línea para crear tu diseño. Para saber por qué es esto, tendrías que hablar con los desarrolladores de los clientes de correo electrónico, ya que suelen alterar el correo electrónico HTML cuando llega a tu bandeja de entrada. Uno de los actos más comunes es eliminar el CSS y el JavaScript de los correos electrónicos por razones de seguridad (entre otras).

Esto significa que tendrás que proporcionar otra forma de añadir estilo a tus correos electrónicos HTML: la única opción para la compatibilidad es inline. Hablando de compatibilidad, ésta es una consideración importante. Tienes que equilibrar un estilo único con las capacidades del cliente de correo electrónico del usuario final. Por ello, hay algunas otras consideraciones técnicas que deberás tener en cuenta:

  • Utilizar fuentes del sistema en lugar de una de terceros te ahorrará una petición HTTP, cargará el correo electrónico rápidamente para el usuario y, además, ofrecerá un correo electrónico de aspecto consistente.
  • Podrías ir aún más lejos y ofrecer una versión en texto plano de tu correo electrónico para aquellos que no puedan ver el correo HTML en su cliente. Muchos sitios ofrecen una versión HTML a la que se puede acceder en línea, tanto por esta razón como por la de copia de seguridad.
  • El texto alternativo es tan importante para los correos electrónicos HTML como para la web. Por lo tanto, utiliza el texto alternativo siempre que añadas una imagen a tu contenido para que sea accesible.

Hay un aspecto técnico de un correo electrónico HTML en el que deberías pensar más, ya que puede cruzar la línea entre el estilo en línea, el CSS y otros factores. Vamos a hablar brevemente de los «condicionales».

Uso de los condicionales

Un remanente de los correos electrónicos HTML que solía estar en el conjunto de herramientas de los desarrolladores web de HTML más antiguos es el de los condicionales. Aquí es donde se especifica qué navegador utilizará un determinado fragmento de código.

Sinceramente, esto es casi siempre un problema de Microsoft. Para los desarrolladores web, Internet Explorer (IE) era el demonio de los navegadores. Sin embargo, para los correos electrónicos HTML, es Outlook. Entre las diferentes versiones, puede que veas que tu estilo se representa de una manera que no esperabas.

Por ello, puedes añadir bloques de condiciones a tu código y definir esos elementos. Por ejemplo, puedes dirigirte a las versiones de Outlook basadas en Word y en IE.

Primero, Word:

<!--[if mso]>

Esto es para las versiones de Outlook basadas en Word:

<![endif]-->

Para Internet Explorer, se utiliza una etiqueta diferente:

<!--[if (IE)]>

Esto es para las versiones de Outlook basadas en IE:

<![endif]-->

Si el navegador al que te diriges está basado en WebKit (como Apple Safari, el navegador PlayStation, el Kindle de Amazon, etc.), puedes utilizar 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 te proporciona una forma ligeramente mejor de adaptar tu correo electrónico HTML a la pantalla del usuario final. En general, el estilo HTML para los correos electrónicos no es perfecto, pero hay suficiente fuerza bajo el capó de cada cliente de correo electrónico para ayudarte a crear algunos diseños impresionantes.

Tus opciones para crear correos electrónicos en HTML

A pesar de lo que ya hemos comentado, tienes una serie de opciones flexibles para ayudarte a crear correos electrónicos HTML. Por ejemplo, puedes crearlos desde cero utilizando un buen editor de texto y HTML.

Sin embargo, hay otras opciones que podemos considerar:

  • Puedes utilizar un servicio dedicado, como una aplicación de marketing por correo electrónico, para crear tus correos electrónicos. Muchas aplicaciones ofrecen un constructor visual, pero también te dan la posibilidad de escribir tu propio código y crear tu propia plantilla.
  • Hablando de eso, puedes descargar una plantilla para tus correos electrónicos HTML. Esto es muy parecido a un tema de WordPress, ya que proporciona una base para el resto de tu diseño. A partir de ahí, puedes personalizarla a tu gusto. Es un buen punto intermedio entre las opciones de codificación y construcción.

Más adelante, construiremos nuestro correo electrónico utilizando HTML. Sin embargo, antes de esto, veamos algunos de los proveedores de servicios de correo electrónico que puedes considerar, independientemente del método que elijas para crear tus correos electrónicos.

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

Dado que este post se centra en la creación de correos electrónicos HTML, no necesitamos profundizar demasiado en lo que respecta a los proveedores de servicios de correo electrónico. Aun así, hay algunos que seguramente tendrás en cuenta.

No podemos enumerarlos todos, así que vamos a mencionar tres de los más populares. Hagamos un repaso de ellos.

1. Mailchimp

The Mailchimp logo, showing the mascot Freddie, winking, and the words “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 aplicaciones de marketing por correo electrónico para muchos, y hay muchas buenas razones para ello:

  • Incluye un montón de funciones típicas que encontrarás en muchas otras aplicaciones similares.
  • Hay mucha ayuda a la hora de promocionar un negocio, como la automatización del marketing, las herramientas de gestión de la audiencia y mucho más.
  • Dispone de un conjunto de herramientas creativas de primera categoría para ayudarte a crear correos electrónicos HTML.

Por supuesto, aquí queremos fijarnos en esta última. 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 ayudarte a crear el correo electrónico perfecto.

También es sencillo trabajar con el HTML existente, especialmente si utilizas el Constructor clásico de Mailchimp. En cualquier caso, tienes formas de importar plantillas HTML si las necesitas.

Mailchimp utiliza un complicado híbrido de niveles de suscripción mensual y el número de contactos para llegar a un precio final. Sugeriríamos que las pequeñas empresas necesitarían un plan de unos 35 dólares al mes, hasta 2.500 contactos. Sin embargo, tendrás que investigar cuál es el mejor plan para ti en función de las funciones que necesites y del número de contactos que creas que vas a incorporar.

2. AWeber

Para algunos, AWeber representa la cúspide del marketing por correo electrónico. Es una plataforma fantástica y potente e incluye un conjunto de funciones posiblemente más centrado que Mailchimp.

AWeber’s interface, showing the Canva interface overlaid onto the visual builder. The canvas shows the logo for “Tara’s Healthy Eats”, and the sidebar contains a number of graphics and images.
El logotipo de AWeber.

Incluye una serie de funciones esenciales que necesitarás para enviar correos electrónicos:

  • La posibilidad de automatizar y programar mensajes, campañas y mucho más.
  • Tienes grandes herramientas de organización, como el etiquetado y la segmentación de los suscriptores.
  • AWeber también te permite automatizar el contenido que creas para tus correos electrónicos. Por ejemplo, puedes convertir las entradas del blog en correos con un mínimo de trabajo.

Cuando se trata de crear tus correos electrónicos, AWeber tiene algunos trucos bajo la manga. Utiliza un constructor visual de arrastrar y soltar e incluye una biblioteca de plantillas personalizadas para empezar. Además, puedes conectar AWeber con tu cuenta de Canva y utilizar esta última para ayudarte a diseñar tus correos electrónicos.

También hay un editor HTML dedicado, lo que no ocurre con Mailchimp. Incluso tienes esto en el nivel gratuito de AWeber. Hablando de eso, el precio es más sencillo aquí. Pagarás unos 25 dólares al mes por hasta 2.500 contactos.

3. Constant Contact

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

The Constant Contact logo, in blue, with a circular logo containing a section in yellow.
El logotipo de Constant Contact.

Al igual que AWeber, Constant Contact se centra en el marketing por correo electrónico por encima de otras áreas centradas en el negocio. Como tal, tiene un conjunto de características que disfrutarás:

  • Tienes herramientas de gestión de listas de clientes y funciones de automatización del marketing.
  • Hay amplias opciones de informes.
  • Puedes integrar programas de publicidad de Facebook, Instagram y Google.
  • Hay muchas formas de captar y atraer nuevos suscriptores a tus listas.

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

El precio también es razonable. Pagarás unos 35 dólares al mes por el plan Core y 2.500 contactos, o 70 dólares por el plan Plus.

¿Qué necesitarás para crear un correo electrónico HTML?

Antes de empezar a crear tus correos electrónicos HTML, necesitarás tener a mano algunas herramientas y conocimientos. Esto es lo que debes organizar antes de romperte los nudillos y empezar:

  • Querrás utilizar un editor de código con el que te sientas cómodo, porque tendrá que apoyarte durante el proceso. Si no sabes cuál elegir, muchos usuarios optan por Visual Studio Code, aunque Brackets sería ideal para esta tarea en particular. Vamos a utilizar Onivim2, que es un editor de estilo Vim basado en la infraestructura central de VS Code.
  • Aunque necesitarás conocimientos de HTML, no necesitarás el mismo conjunto de conocimientos que un desarrollador web moderno (aunque no perjudica tus perspectivas).
  • Necesitarás una forma de probar tus correos electrónicos: MailHog es una solución que presentamos en otra parte del blog de Kinsta.
  • Aunque no vamos a utilizar una plantilla preconstruida, es posible que quieras utilizar una de ellas en el futuro.
  • También necesitarás un proveedor de correo electrónico, ya que necesitarás alguna forma de enviar tu correo electrónico HTML terminado.

Con todo esto, estás listo para abrir un editor de texto y empezar. A continuación, recorreremos el proceso para crear un correo electrónico HTML básico.

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

Antes de empezar, vale la pena señalar que no vamos a utilizar un servicio dedicado como Mailchimp o AWeber. En su lugar, vamos a crear una plantilla sencilla desde cero que podrás importar donde necesites.

Dividiremos el proceso en varias 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 de tu correo electrónico HTML

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

<!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>

Aquí hay algunas cosas que debemos mencionar. En primer lugar, especificamos un «doctype» para el XHTML transicional 1.0, que es una práctica habitual 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 verás algunas metaetiquetas, que definen el conjunto de caracteres y la forma en que el navegador debe representar el HTML que sigue en su ventana gráfica.

El resto del esqueleto es sencillo: están las etiquetas title y body que utilizaremos a continuación.

2. Añade la estructura de tu plantilla de correo electrónico

Volviendo a nuestra discusión sobre qué etiquetas HTML utilizar, recordarás que no queremos utilizar <div> ni otros elementos estructurales típicos. En su lugar, queremos utilizar tablas, ya que se ven bien en los clientes y servicios de correo electrónico.

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

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

El atributo que establecemos 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í, tendrás que añadir nuevas filas y columnas a tu tabla para construir la plantilla de correo electrónico HTML. La forma de hacerlo depende de ti, pero es bueno empezar con una base de secciones de cabecera, pie de página y cuerpo. No las repetiremos aquí por brevedad, pero las mencionaremos a medida que avancemos.

La buena noticia es que puedes seguir añadiendo nuevas filas a tu tabla si necesitas añadir más secciones. Sin embargo, a partir de aquí, querrás empezar a introducir estilos y otros elementos.

3. Incluye el estilo de tus elementos

Lo bueno de HTML es que es casi agnóstico en cuanto a su estilo. El marcado es sencillo, pero los estilos que aplicas pueden no serlo. Aquí es donde verás que tu correo electrónico HTML cobra vida.

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

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

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

<body style="margin:0;padding:0;">
  <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
</body>

También vamos a añadir un poco de centrado y a eliminar el relleno extra de nuestras diferentes celdas de sección:

<tr>
  <td align="center" style="padding:0;">Header
  </td>
</tr>

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

A browser window showing black text on a white background reading, “Header”, “Body”, and “Footer”. Each cell has a black border.
Una ventana del navegador mostrando el esqueleto del correo electrónico HTML.

Sin embargo, a partir de aquí, puedes seguir desarrollando tu plantilla de correo electrónico utilizando tablas y etiquetas de estilo. Por ejemplo, hemos creado una sección heroica para nuestra cabecera, y hemos ampliado el pie de página y el cuerpo:

A HTML email showing an airmail envelope complete with stickers, stamp, and red and blue flecks, body text from the Kinsta website, and a footer section containing a privacy policy, support, and terms links. There’s also a copyright notice for Kinsta, and an unsubscribe link.
Un modelo de plantilla de correo electrónico durante su creación (Fuente de la imagen: Settergren).

Seguramente crearás una plantilla mejor y más adecuada a tus necesidades, pero utilizando tablas anidadas y algunos conocimientos básicos de HTML, puedes crear una plantilla de correo electrónico HTML adaptable y personalizada que dé en el clavo.

4. Prueba tu correo electrónico

Antes de terminar, querrás probar tu correo electrónico para asegurarte de que se visualiza bien en diferentes dispositivos. Hay algunos servicios diferentes que pueden ayudar en este sentido.

Por ejemplo, Email on Acid incluye una completa lista de comprobación previa a la implementación que te ayudará a asegurarte de que tu plantilla no causa problemas:

The Email On Acid interface, showing an email, a black sidebar, a pre-deployment checklist in progress, and code relating to an element within the email.
El sitio web de Email on Acid.

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

The Litmus website with three mockup panels - one in dark mode – showing options to build and share emails, along with icons displaying a lock, and envelope.
El sitio web de Litmus.

Tendrás que registrarte para obtener una cuenta para utilizar el servicio, pero su uso es sencillo. Aprovechas la funcionalidad para previsualizar los correos electrónicos en diferentes navegadores y en varios dispositivos.

Mailgun también ofrece un fantástico servicio relacionado con su oferta principal. Puedes probar clientes de correo electrónico, navegadores y mucho más a través de la interfaz. Además, puedes probar elementos como las líneas de asunto, para asegurarte de que mantienes altas tus tasas de apertura.

Two panels showing a colorful graph and a collection of metrics relating to deliverability, risk, and more.
Herramienta de comprobación de correo electrónico de Mailgun.

Sin embargo, una vez que pruebes tu correo electrónico, tendrás que asegurarte de que llega a la bandeja de entrada del destinatario. En la última sección, hablaremos más de esto.

Enviar un correo electrónico HTML: Lo que debes saber

Una de las ventajas de utilizar un servicio de marketing por correo electrónico que aún no hemos mencionado es cómo se gestionará el aspecto legal del envío de correos electrónicos. Esto es importante porque si te equivocas en este aspecto, no sólo no llegarás a un 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 gestionan el spam y las facetas relacionadas con el envío de un correo electrónico. Por ello, suele ser una buena idea elegir uno de ellos si no quieres preocuparte por el envío de spam.

Sin embargo, hay algunos consejos que podemos dar que importan independientemente de la plataforma que utilices:

  • Asegúrate de que sigues todas las directrices de la ley CAN-SPAM, especialmente si tu público principal está en Estados Unidos. Por supuesto, los distintos países tendrán sus propias directrices legales.
  • Incluye un doble opt-in para los suscriptores. Esto es cuando les pides que confirmen una suscripción, pero también envías una segunda confirmación. Esto te protege a ti y al suscriptor si hay una consulta de spam o una solicitud de privacidad más adelante.

La entregabilidad es un elemento clave de tus correos electrónicos, y esto es algo que tratamos en otro artículo, en profundidad. Sin embargo, este concepto es una mezcla de varios aspectos, como el uso de un buen código, la obtención del nivel adecuado de permiso, y más.

Esto se relaciona con otra faceta: tu puntuación de envío. Esta es similar a la puntuación de crédito y, en última instancia, es una medida de tu reputación. Aquí hay varios componentes diferentes que conforman el conjunto:

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

Este último está relacionado con tu Correo Identificado con Clave de Dominio (DKIM) y con el Marco de Política de Remitentes (SPF). Además, puedes comprobar la reputación de tu IP a través de servicios como SenderScore, o IPQualityScore.

Si eliges el proveedor de protocolo simple de transporte de correo (SMTP) adecuado en primer lugar, puedes marcar algunas de estas casillas de un plumazo. Al igual que tu elección de la solución de marketing por correo electrónico, este servicio entenderá lo que necesitas para mantener tu capacidad de entrega alta, y en el lado correcto de los poderes fácticos.

Mailgun es una solución que hemos mencionado antes, y podría ser ideal. Sin embargo, hay otras como Mailjet, Sendinblue, e incluso el propio servicio de Gmail.

Resumen

El correo electrónico no está cerca de llegar a su fin. Por ello, utilizar el correo electrónico para tus propias necesidades -como la promoción y el marketing- es una forma fantástica y rentable de llegar a los suscriptores, usuarios y clientes potenciales.

Aunque podrías comprar una plantilla HTML dedicada, crear tus propios correos electrónicos HTML no es tan difícil. Podría ser la forma de triunfar si tienes una visión específica en mente. Sin embargo, tendrás que sacar tus viejos trucos de HTML, como los condicionales y las tablas anidadas. El diseño de correos electrónicos en HTML aún no está al nivel del diseño web moderno, pero aún puedes conseguir mucho con poco.

¿Tienes necesidad de crear correos electrónicos en HTML y, si es así, qué preguntas tienes? ¡Háznoslo saber en la sección de comentarios más abajo!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.