La guía simple para crear un correo electrónico HTML [+ Free Templates]

Cuando crea un correo electrónico con una herramienta basada en módulos o de arrastrar y soltar, en realidad está generando un correo electrónico HTML.

Hay dos tipos principales de correo electrónico que puede enviar y recibir: correos electrónicos de texto sin formato (estos son exactamente lo que parecen: cualquier correo electrónico que contenga solo texto antiguo sin formato) y correos electrónicos HTML, que están formateados y diseñados con HTML y en línea CSS.

Los correos electrónicos HTML son fáciles de detectar: ​​la mayoría de los correos electrónicos de marketing multimedia con estilo en su bandeja de entrada son correos electrónicos HTML.

Como especialista en marketing, probablemente haya comparado los correos electrónicos HTML con los correos electrónicos de texto sin formato y se haya dado cuenta de que hay diferentes beneficios para cada tipo. Los correos electrónicos HTML no son intrínsecamente mejores que los correos electrónicos de texto sin formato y, en diferentes situaciones, ambos tipos pueden ser parte de un programa de marketing por correo electrónico exitoso.

Así es como se ve un HTML en el front-end. Haga clic en el botón HTML para ver el código detrás de él.

Consulta la plantilla de correo electrónico HTML de Pen de HubSpot de Christina Perricone (@hubspot) en CodePen.

En este artículo, cubriremos cómo puede comenzar a crear correos electrónicos HTML, independientemente de su nivel de experiencia y comodidad con la codificación, y compartiremos algunas plantillas gratuitas que puede usar. Vamos a sumergirnos.

Cómo crear un correo electrónico HTML

Buenas noticias: en realidad, no necesita saber cómo codificar para crear un correo electrónico HTML.

La mayoría de las herramientas que crean y envían correo electrónico (como HubSpot) ofrecerán plantillas HTML preformateadas y listas para usar que le permiten diseñar correos electrónicos sin tener que acceder al código real en el back-end.

A medida que realice cambios en el editor de correo electrónico, esos cambios se codificarán automáticamente en el producto final. Las herramientas de creación de correo electrónico como esta son una opción ideal si no tiene un diseñador de correo electrónico en su equipo, pero aún desea enviar correos electrónicos de marketing de aspecto profesional.

¿Aún desea crear un correo electrónico HTML desde cero?

Si se siente cómodo con HTML y desea un control más directo sobre el código de sus correos electrónicos, la mayoría de las herramientas de correo electrónico le permitirán importar archivos HTML directamente para usarlos como plantillas de correo electrónico personalizadas.

Hay una amplia variedad de plantillas de correo electrónico HTML gratuitas disponibles en la web (algunas de las cuales compartiremos a continuación), y si conoce un archivo HTML, por lo general es bastante sencillo adaptar la plantilla a la herramienta de creación de correo electrónico de tu elección.

Para crear un correo electrónico HTML completamente desde cero, deberá tener un conocimiento avanzado de HTML (o trabajar con un desarrollador que lo tenga). Esta guía ofrece una descripción general sólida de la codificación de un correo electrónico HTML básico. Debido a que el proceso de crear un correo electrónico HTML desde cero puede ser bastante complicado, recomendamos trabajar con un desarrollador o utilizar una plantilla de correo electrónico HTML prefabricada.

¿Estás desarrollando un correo electrónico HTML específicamente para HubSpot?

Si está desarrollando una plantilla de correo electrónico HTML específicamente para usar en HubSpot, querrá asegurarse de incluir los tokens de HubL requeridos (estos garantizan que sus correos electrónicos se puedan personalizar y cumplan con las leyes CAN-SPAM). Puedes encontrar una guía completa para codificar plantillas de correo electrónico HTML específicas de HubSpot aquí. O, alternativamente, simplemente use nuestro sencillo editor de correo electrónico «Lo que ve es lo que obtiene».

Ahora que comprende los conceptos básicos del desarrollo de un correo electrónico HTML, repasemos algunas de las mejores prácticas importantes que debe tener en cuenta. Independientemente del método que planee utilizar para crear correos electrónicos HTML, estas mejores prácticas ayudarán a mejorar el diseño, la experiencia del usuario y la capacidad de entrega de sus correos electrónicos.

1. Asegúrese de que su correo electrónico HTML responda a diferentes tamaños de pantalla y dispositivos.

El aspecto de su correo electrónico en la bandeja de entrada de un usuario depende de una amplia variedad de factores diferentes.

Uno de los factores más importantes y obvios es el tamaño de la pantalla del dispositivo en el que se está viendo. Un correo electrónico que se ve increíble y bien formateado en un escritorio puede convertirse fácilmente en una maraña de texto e imágenes ilegibles y superpuestos cuando se ve en la pantalla de un teléfono inteligente.

Para asegurarse de que sus correos electrónicos HTML se vean de la manera deseada en un amplio espectro de tamaños de pantalla, lo mejor que puede hacer es mantener su diseño simple y directo. Cuando comienza a agregar elementos más complejos, como múltiples columnas e imágenes flotantes, se vuelve más difícil traducir el formato de su correo electrónico para diferentes tamaños de pantalla.

Si decide desarrollar un diseño más complejo, asegúrese de estar resolviendo activamente cómo se reorganizarán los elementos para adaptarse a diferentes tamaños de pantalla. Por ejemplo, si su correo electrónico se muestra como varias columnas en el escritorio, esa misma estructura no volará en el dispositivo móvil; deberá usar consultas de medios para definir cómo se mostrarán los elementos en diferentes tamaños de pantalla.

Recuerde, el desarrollo de correos electrónicos HTML verdaderamente receptivos va más allá de la estructura y el formato de su mensaje. Piense en cómo se percibirá la experiencia general del usuario de su correo electrónico en diferentes dispositivos. Asegúrese de que sus opciones de fuente sean tan legibles en el dispositivo móvil como en el escritorio, y use botones para dispositivos móviles o CTA en lugar de texto con hipervínculos (¿alguna vez ha intentado tocar una pequeña línea de texto con hipervínculo en un dispositivo móvil? No es muy fácil ).

Puede encontrar nuestra guía más detallada sobre las mejores prácticas de correo electrónico móvil aquí.

2. Asegúrese de que su estilo funcione en diferentes clientes de correo electrónico.

Otro factor importante que tiene un gran impacto en la forma en que aparecen sus correos electrónicos HTML en las bandejas de entrada de sus suscriptores es el cliente de correo electrónico que utilizan para abrir el mensaje. Cada cliente de correo electrónico carga los correos electrónicos de manera ligeramente diferente, por lo que un correo electrónico que se ve de cierta manera en Gmail probablemente se verá diferente en Outlook.

Afortunadamente, si sabe cómo los clientes de correo electrónico más populares cargan elementos HTML y CSS particulares, puede crear una experiencia bastante consistente en las bandejas de entrada de diferentes usuarios. Se trata de saber qué etiquetas no compatibles evitar y adaptarse en consecuencia. Esta guía completa explica cómo los clientes de correo electrónico más populares (incluido Gmail y varias versiones de Outlook) admiten y representan diferentes elementos de estilo.

También puede consultar un artículo que escribimos sobre la optimización de correos electrónicos para diferentes clientes de correo electrónico.

3. Sea consciente de cuánto tardan en cargar sus correos electrónicos HTML.

El tiempo que tarda su correo electrónico en cargarse podría ser la diferencia entre conseguir un nuevo cliente y perder un suscriptor frustrado. Si bien puede ser tentador aprovechar todas las diferentes opciones de estilo y oportunidades para incorporar elementos visuales que ofrecen los correos electrónicos HTML, nada de eso importa si su correo electrónico tarda demasiado en cargarse.

Mientras diseña su correo electrónico HTML, sea consciente de cuánto tiempo tardará en cargarse, especialmente si alguien, por ejemplo, abre su mensaje en su viaje de metro por la mañana con una conexión de datos débil. Aquí hay algunos pequeños pasos que puede tomar y que contribuirán en gran medida a mejorar el tiempo de carga.

Utilice imágenes con moderación.

De esa manera, reforzará el mensaje que desea transmitir a los suscriptores. Utilice siempre un compresor de imágenes (como Compressor.io) para reducir el tamaño del archivo tanto como sea posible. La mayoría de los compresores de imágenes pueden reducir significativamente el tamaño de archivo de una imagen sin comprometer la calidad, por lo que dar este paso adicional no dañará la integridad visual de su correo electrónico.

Utilice fuentes web estándar.

Las fuentes personalizadas son excelentes para darle vida a una página de destino, pero pueden agregar una capa extraña de complejidad cuando se agregan a un correo electrónico. Como mencionamos anteriormente, todos los clientes de correo electrónico manejan los elementos de estilo de manera diferente, y esto se extiende especialmente a las fuentes. Para estar seguro, use fuentes web estándar y verifique que el cliente de correo electrónico que usan la mayoría de sus suscriptores admita una fuente en particular.

Prueba un minificador de HTML.

Un minificador de HTML (como minifycode.com y smallseotools.com) elimina automáticamente el código que no es necesario en un archivo HTML. Los elementos adicionales repetitivos se eliminarán, pero la representación real de su correo electrónico debe seguir siendo la misma (¡pruébelo siempre!). Cada línea de código afecta el tiempo que tarda en cargarse un correo electrónico, por lo que tomarse el tiempo para eliminar el código basura puede tener un efecto positivo en el tiempo de carga.

Mantenga su mensaje enfocado en un solo objetivo.

La mejor manera de reducir el tiempo de carga del correo electrónico es reducir la cantidad de contenido que agrega a cada uno de sus envíos de correo electrónico. Puede parecer obvio, pero muchos especialistas en marketing intentan incluir demasiado contenido en sus correos electrónicos. Eso no solo conduce a una experiencia de usuario desagradable (nadie quiere leer una novela en forma de correo electrónico), sino que puede hacer que su tiempo de carga se salga de las listas y hacer que los usuarios abandonen su correo electrónico. Mantenlo simple y tus usuarios te lo agradecerán.

4. Planifique (tanto como pueda) para las inconsistencias del usuario final.

El tamaño de la pantalla y el cliente de correo electrónico no son los únicos factores que pueden alterar la forma en que El correo electrónico HTML se procesa en las bandejas de entrada de sus suscriptores. Elementos como la versión de su cliente de correo electrónico, su sistema operativo, su configuración de usuario única, su software de seguridad y si están cargando imágenes automáticamente o no, pueden afectar la forma en que se carga su correo electrónico.

Como probablemente pueda adivinar por esa considerable lista de factores, tratar de resolverlos todos (cada vez que envíe un correo electrónico) probablemente sea suficiente para hacer que arroje su computadora por la habitación.

Pero no tiene que estar completamente indefenso ante estas variables, solo tiene que hacer un poco de planificación previa.

Considere la posibilidad de crear una versión de página web de su correo electrónico.

Esto es como darle a su correo electrónico un botón a prueba de fallas. Si por alguna razón, debido a uno de los muchos factores discutidos anteriormente, su correo electrónico diseñado con amor se muestra como un desastre total cuando un suscriptor lo abre, al menos tendrá la opción de hacer clic en «ver como página web» y ver el correo electrónico como usted pretendía que fuera.

Dado que los elementos de estilo se representan de manera mucho más consistente en los navegadores web que en los clientes de correo electrónico, podrá tener mucho más control sobre la versión de la página web de su mensaje. En HubSpot, hay una opción que puedes activar y que generará una versión de la página web automáticamente.

Cree una versión de texto sin formato de su correo electrónico.

Una versión de texto sin formato es exactamente lo que parece: una versión alternativa de su correo electrónico HTML que se muestra en texto completamente sin formato. Agregar una versión de texto sin formato de su correo electrónico HTML es importante porque algunos clientes de correo electrónico y configuraciones de usuario no pueden (o eligen no hacerlo) cargar HTML.

Si este es el caso, el cliente buscará una versión alternativa de texto sin formato de su correo electrónico HTML para cargar para el usuario. Si no existe, podría indicarle al servidor de correo electrónico del destinatario que su mensaje es spam o potencialmente peligroso.

La mayoría de las herramientas de correo electrónico como HubSpot proporcionarán automáticamente una versión de texto sin formato que se muestra si el servidor de correo electrónico del destinatario lo requiere, pero si está codificando un correo electrónico HTML desde cero, deberá crear algo llamado mensaje MIME de varias partes.

Un mensaje MIME de varias partes es un correo electrónico que contiene tanto un texto sin formato como una versión HTML del mismo correo electrónico. Si el cliente de correo electrónico o el sistema de seguridad de un destinatario no permite el correo electrónico HTML, se mostrará la versión de texto sin formato. Este es un proceso que requiere un conocimiento avanzado de codificación, por lo que recomendamos trabajar con un desarrollador.

Asegúrese de que su correo electrónico aún tenga sentido si las imágenes no se cargan.

Algunos usuarios tienen desactivada la carga automática de imágenes, lo que significa que verán su correo electrónico sin imágenes cuando lo abran. Por esta razón, no confíe completamente en las imágenes para transmitir el significado de su mensaje y siempre agregue texto alternativo a las imágenes que incluya. El texto alternativo se cargará incluso cuando las imágenes no lo hagan, por lo que sus suscriptores pueden tener una idea general de lo que incluyen las imágenes.

5. Realice pruebas exhaustivas.

Finalmente, deberá probar su correo electrónico HTML en cada etapa del desarrollo para asegurarse de que funcione en diferentes clientes de correo electrónico, sistemas operativos y tipos de dispositivos. No espere hasta el final del proceso para probar su correo electrónico; probar mientras trabaja es la mejor manera de detectar inconsistencias entre diferentes clientes de correo electrónico y asegurarse de que está creando la experiencia más consistente posible para sus destinatarios.

Algunas herramientas de correo electrónico (como HubSpot) ofrecen pruebas en la aplicación dentro de sus creadores de correo electrónico para facilitar el proceso. Si está trabajando desde cero, puede usar una herramienta como HTML Email Check o PreviewMyEmail para tener una mejor idea de cómo se verá su correo electrónico en diferentes clientes y dispositivos de correo electrónico.

Plantillas de correo electrónico HTML simples y gratuitas

Hay una cantidad abrumadora de plantillas de correo electrónico HTML disponibles en la web, y varían en calidad, capacidad de respuesta y precio. Hemos reunido una selección de plantillas de correo electrónico HTML gratuitas que brindan una experiencia de usuario receptiva. Asegúrese de leer los términos y condiciones de cada plantilla individual antes de usarla.

1. Plantilla de correo electrónico HTML gratuita de HubSpot

Incluida en la versión gratuita de Marketing Hub, esta plantilla es un excelente lugar para comenzar si está buscando una plantilla con más espacio para la personalización. Puede agregar fácilmente imágenes, texto y botones en un editor intuitivo de arrastrar y soltar, y puede estar seguro de que las plantillas que diseñe responderán completamente en cualquier dispositivo.

2. Plantilla de correo electrónico HTML de noticias de la empresa de Campaign Monitor

Esta plantilla moderna es sofisticada y minimalista. La paleta de colores sutil y el diseño simple lo convierten en una opción versátil para muchas industrias y propósitos diferentes, y se ha probado en diferentes clientes y dispositivos de correo electrónico para garantizar una experiencia de usuario consistente en diferentes plataformas.

3. Plantilla de correo electrónico HTML gratuita de Unlayer

Aunque esta plantilla fue diseñada para una empresa de fitness, puede adaptarla fácilmente a la suya. Esta plantilla limpia y silenciada es una excelente manera de mostrar el contenido que ha creado su equipo y conectar a los suscriptores con sus productos o publicaciones de blog más recientes. El diseño presenta dos columnas totalmente receptivas con múltiples opciones de combinación de colores y espacio en la parte superior para resaltar una llamada a la acción.

4. Plantilla de correo electrónico HTML gratuita MINImalista

Prueba de que a veces menos es más, este diseño sencillo y totalmente receptivo aprovecha al máximo los espacios en blanco y mantiene el enfoque firmemente en sus palabras y elementos visuales. Sin distracciones de diseño, su contenido realmente puede brillar, en cualquier dispositivo.

5. Plantillas de correo electrónico HTML gratuitas de Bee Free

Esta colección de plantillas gratuitas de código abierto responde completamente y se prueba en los clientes de correo electrónico más populares. Puede editarlos y construir sobre ellos en la plataforma Bee Free, luego exportar el archivo HTML a su unidad local.

Estas son una opción ideal si desea un lugar de inicio más elegante y pulido, pero aún desea poder personalizar el diseño para que se ajuste a las necesidades de su empresa. Cada plantilla está disponible en varios formatos para diferentes propósitos de marketing, como correos electrónicos transaccionales, recopilación de NPS y reenganche del suscriptor de correo electrónico.

6. Plantilla de correo electrónico HTML gratuita de Campaign Monitor

Este diseño elegante y receptivo de Campaign Monitor sería perfecto para enviar un código de descuento, pero también podría servir como una forma elegante de mostrar sus últimos productos a los suscriptores de correo electrónico. También vale la pena consultar la biblioteca completa de plantillas de correo electrónico receptivas de Campaign Monitor.

Cree correos electrónicos HTML para aumentar su número de suscriptores

Los correos electrónicos HTML son una forma atractiva de compartir lo que está sucediendo en su negocio y hacer que los suscriptores vuelvan por más. Con los consejos y las plantillas que hemos compartido, está en camino de crear hermosos correos electrónicos HTML sin escribir una sola línea de código.

Nota del editor: esta publicación se publicó originalmente en junio de 2019 y se ha actualizado para que sea más completa.