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

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.

ver la pluma Plantilla de correo electrónico HTML de HubSpot de Christina Perricone (@hubspot) en CódigoPen.

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 el fichas HubL requeridas (Esto garantiza que sus 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.

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 con varias columnas en el escritorio, esa misma estructura no funcionará en el dispositivo móvil; deberá usar preguntas de los 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. Sea consciente de 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, utilice fuentes web estándar y verifique para asegurarse el cliente de correo electrónico que utilizan la mayoría de sus suscriptores admite 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.

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 HTML…