Cuando crea un correo electrónico utilizando 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 (esto es exactamente como suena: cualquier correo electrónico que contenga solo texto antiguo sin formato) y correos electrónicos HTML, que están formateados y diseñados usando 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 inherentemente mejores que los correos electrónicos de texto sin formato y, en diferentes situaciones, ambos tipos pueden ser parte de un programa exitoso de marketing por correo electrónico.
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.
Vea la plantilla de correo electrónico Pen HTML 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. Sumerjámonos.
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 correos electrónicos (como HubSpot) ofrecerán plantillas HTML preformateadas y listas para usar que le permiten diseñar correos electrónicos sin necesidad de 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.
¿Todavía quieres 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, generalmente 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 sólida visión general de la codificación de un correo electrónico HTML básico. Debido a que el proceso de creación de 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ás desarrollando una plantilla de correo electrónico HTML específicamente para usar en HubSpot, querrás asegurarte de incluir los tokens de HubL requeridos (estos aseguran que tus correos electrónicos se puedan personalizar y cumplan con las leyes CAN-SPAM). Puede 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 de lo que ve es lo que obtiene.
Mejores prácticas de correo electrónico HTML
- Asegúrese de que su correo electrónico HTML responda a diferentes dispositivos y tamaños de pantalla.
- Asegúrese de que su estilo funcione en diferentes clientes de correo electrónico.
- Sea consciente de cuánto tardan en cargarse sus correos electrónicos HTML.
- Planifique (tanto como pueda) para las inconsistencias del usuario final.
- Realice pruebas exhaustivas.
Ahora que comprende los conceptos básicos de lo que implica desarrollar un correo electrónico HTML, repasemos algunas prácticas recomendadas importantes que debe tener en cuenta. Independientemente del método que planee utilizar para crear correos electrónicos HTML, estas prácticas recomendadas 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 dispositivos y tamaños de pantalla.
La apariencia 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 grandes 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 una computadora de 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 que desea en una amplia gama 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 varias 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 funcionará 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 que realmente respondan 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 dispositivos móviles como lo son en computadoras de escritorio, y use botones compatibles con 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ínculos en dispositivos móviles? 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 afecta en gran medida 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 forma 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 admitidas evitar y adaptarse en consecuencia. Esta guía completa explica cómo los clientes de correo electrónico más populares (incluidos 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. Tenga en cuenta cuánto tardan en cargarse sus correos electrónicos HTML.
El tiempo que tarda su correo electrónico en cargarse bien podría ser la diferencia entre ganar un nuevo cliente y perder un suscriptor frustrado. Si bien puede ser tentador aprovechar todas las diferentes opciones de estilo y oportunidades para incorporar imágenes que ofrecen los correos electrónicos HTML, nada de eso importa si su correo electrónico tarda demasiado en cargarse.
A medida que diseñe su correo electrónico HTML, sea consciente de cuánto tiempo tardará en cargarse, especialmente si alguien está, por ejemplo, abriendo su mensaje en su viaje en metro por la mañana con una conexión de datos débil. Aquí hay algunos pequeños pasos que puede tomar que contribuirán en gran medida a mejorar el tiempo de carga.
Usa las 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.
Pruebe con un minificador de HTML.
Un minificador de HTML (como minifycode.com y smallseotools.com) elimina automáticamente el código que no se necesita en un archivo HTML. Se eliminarán los elementos adicionales repetitivos, pero la representación real de su correo electrónico debe seguir siendo la misma (¡siempre pruébelo!). 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 dispare y hacer que los usuarios abandonen su correo electrónico. Mantenlo simple, y tus usuarios te lo agradecerán.
4. Planifique (tanto como pueda) las inconsistencias del usuario final.
Él 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 su correo electrónico HTML se muestra 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 gran 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 al otro lado de la habitación.
Pero no tiene que estar completamente indefenso frente a estas variables, solo tiene que hacer un poco de planificación previa.
Considere 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 de seguridad. Si por alguna razón, debido a uno de los muchos factores discutidos anteriormente, su correo electrónico cuidadosamente diseñado se vuelve un desastre absoluto 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 tenías la intención de que fuera.
Dado que los elementos de estilo se muestran 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 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) 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 indicar 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 texto sin formato y 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íes completamente en las imágenes para transmitir el significado de tu mensaje, y siempre agrega texto alternativo a las imágenes que incluyas. El texto alternativo se cargará incluso cuando las imágenes no lo hagan, para que sus suscriptores puedan 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 de 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 dispositivos y clientes 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 sutiles 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 de correo electrónico y dispositivos para garantizar una experiencia de usuario uniforme en diferentes plataformas.
3. Plantilla de correo electrónico HTML gratuita de Unlayer
Aunque esta plantilla fue diseñada para una empresa de fitness, puedes adaptarla fácilmente a la tuya. 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 realmente más, este diseño sencillo y totalmente receptivo aprovecha al máximo los espacios en blanco y se centra firmemente en las palabras y los 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 está probada en clientes de correo electrónico populares. Puede editarlos y desarrollarlos en la plataforma Bee Free, luego exportar el archivo HTML a su unidad local.
Estas son una opción ideal si desea un punto de partida 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 múltiples formatos para diferentes fines de marketing, como correos electrónicos transaccionales, recopilación de NPS y reenganche de suscriptores 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 adaptables 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 sucede en su negocio y hacer que los suscriptores regresen por más. Con los consejos y las plantillas que hemos compartido, está bien encaminado para 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 actualizó para que sea más completa.
