Cómo crear correos electrónicos HTML

Crear correos electrónicos HTML no es tan difícil como parece. No necesita ser un desarrollador, y realmente no necesita saber codificar.

Si alguna vez ha utilizado un editor de correo electrónico WYSIWYG (lo que ve es lo que obtiene), ya ha creado un correo electrónico HTML. Cada uno de los módulos que arrastra y suelta consta de HTML y CSS en línea, lo que define cómo deben verse y comportarse los diferentes elementos del correo electrónico.

Entonces, si la mayoría de los editores de correo electrónico le permiten diseñar con herramientas de arrastrar y soltar, ¿por qué necesita saber algo de HTML para crear correos electrónicos?

Buena pregunta.

Si bien la mayoría de los editores de correo electrónico le brindan una buena cantidad de control dentro de los módulos, no podrá modificar todos los aspectos esenciales de su correo electrónico. Es probable que necesite HTML para modificar cosas como:

• Tamaño de fuente
• texto alternativo
• Fronteras
• Márgenes
• Relleno
• Tamaño de la imagen
• Colores

¿Ha utilizado el editor de correo electrónico de Twilio SendGrid ? Le permite crear correos electrónicos con una combinación de módulos de arrastrar y soltar y edición de HTML. Una potencia combinada como esa le brinda un control total sobre la apariencia de sus correos electrónicos, lo que garantiza una experiencia de marca consistente y de primer nivel en cada mensaje.

Afortunadamente, codificar un correo electrónico HTML no es demasiado complicado. A continuación, le daremos los consejos y la estructura de correo electrónico que necesita para crear mejores correos electrónicos.

5 consejos para codificar un correo electrónico HTML

Codificar un correo electrónico HTML es relativamente sencillo, pero los clientes de correo electrónico y las bandejas de entrada pueden ser complicados. Siga estas mejores prácticas para asegurarse de que sus mensajes se vean bien, independientemente del cliente, navegador o dispositivo de sus destinatarios.

1. Haga que sus correos electrónicos sean receptivos

Los destinatarios abren los mensajes de correo electrónico en varios sistemas operativos, dispositivos, tamaños de pantalla, navegadores y aplicaciones de correo electrónico. Cada uno de estos factores generará su correo electrónico de manera diferente, por lo que es su trabajo asegurarse de que su correo electrónico responda y funcione según lo previsto en la mayoría de las bandejas de entrada.

Puede encontrar muchas plantillas de correo electrónico receptivas, pero la tarea es un poco más complicada cuando codifica un correo electrónico HTML desde cero. Aquí hay algunas cosas que ayudarán a que sus correos electrónicos sean más receptivos:

• Incluya consultas de medios: las consultas de medios le permiten adaptar sus plantillas de correo electrónico a diferentes dispositivos.
• Use una sola columna: puede ser fácil leer correos electrónicos de 2 columnas en una computadora de escritorio, pero puede volverse un poco denso en dispositivos móviles.
• Aumente el tamaño de la fuente: no use una fuente más pequeña que 13 o 14 puntos.
• Separe sus enlaces: no querrá que los lectores hagan clic accidentalmente en el enlace incorrecto porque sus enlaces estaban demasiado juntos.
• Agregue etiquetas alt: las etiquetas alt describen sus imágenes en caso de que las imágenes no se carguen.

2. Agrega imágenes con moderación

Las imágenes son excelentes adiciones a sus campañas de correo electrónico, pero tenga cuidado de no exagerar con ellas. Demasiadas imágenes pueden prolongar los tiempos de carga y dificultar la visualización de los correos electrónicos.

Use imágenes más pequeñas que se cargarán más rápido y no ocuparán toda la pantalla. Además, agregue elementos de tamaño receptivo como "ancho" y "ancho máximo" para garantizar que sus imágenes se carguen correctamente en cada dispositivo y cliente de correo electrónico.

3. Mantenlo simple

Recuerde el propósito de su correo electrónico. Muchos diseñadores de correo electrónico se pierden en el arte y la creatividad, olvidando el objetivo general del correo electrónico, que no es ganar exclamaciones y exclamaciones.

Primero, desea que las personas abran sus correos electrónicos. A continuación, desea que hagan clic y actúen. Eso podría ser visitar su sitio web, leer una publicación de blog, realizar una compra o inscribirse en un evento.

Mantén las cosas simples. Proporcione valor a sus destinatarios, tráigalos con contenido y luego llévelos hacia su llamado a la acción. Eso es todo. La mayor parte del tiempo, todo lo demás es pelusa.

Al agregar diferentes elementos HTML a su correo electrónico, hágase la pregunta: "¿Esto ayuda a que el correo electrónico cumpla con su propósito?" Si no, elimínelo del diseño de su correo electrónico.

4. Utilice plantillas de correo electrónico prediseñadas

Puede encontrar plantillas de correo electrónico HTML prediseñadas con todo lo que necesita para enviar una campaña estelar. Las plantillas ya han hecho el trabajo duro para crear un diseño de correo electrónico receptivo y atractivo.

Si le gusta una plantilla de correo electrónico pero no está 100 % satisfecho con ella, a menudo puede descargar el HTML y realizar las modificaciones que desee. Este puede ser un excelente método de edición de correo electrónico para aquellos que son nuevos en HTML.

5. Pon a prueba tus correos electrónicos

Nunca envíe un correo electrónico sin probarlo primero. La forma tradicional de hacer esto sería enviar un correo electrónico de prueba a varias direcciones de correo electrónico (a través de clientes de correo electrónico) e intentar abrirlo en diferentes dispositivos. Si eso suena como una gran cantidad de tiempo perdido y dolores de cabeza, tiene razón.

Afortunadamente, hay una mejor manera en estos días.

La herramienta de prueba de correo electrónico de Twilio SendGrid está integrada con su editor de diseño, lo que lo ayuda a solucionar problemas desde una sola aplicación. Le ayudará a ver cómo se representa su correo electrónico en clientes, navegadores y dispositivos. Por ejemplo, puede ver cómo se verá su correo electrónico en un dispositivo móvil usando Gmail y una computadora de escritorio usando Outlook.

Las herramientas de prueba de correo electrónico también pueden ayudarlo a encontrar enlaces y botones rotos, contenido que parece spam y problemas de formato.

Estructura de correo electrónico HTML

Los correos electrónicos HTML tienen una estructura simple:

• DOCTIPO
• Encabezamiento
• Cuerpo

DOCTIPO

Utilice <!DOCTYPE> para decirle al navegador qué esperar; en este caso, sería un correo electrónico HTML.

Encabezamiento

Use la sección de encabezado para incluir elementos como estilo, tamaño y metatexto.

Cuerpo

Use el cuerpo para los elementos visuales de su correo electrónico, como texto, imágenes, tablas, enlaces y similares.

Plantilla de correo electrónico con código HTML

Este es un ejemplo de una plantilla de correo electrónico con código HTML. Puede ver cómo se muestra esta plantilla de correo electrónico de boletín de viajes en dispositivos de escritorio, tabletas y móviles.

¿Te gusta lo que ves? Haga clic en "Descargar plantilla" y le enviaremos una copia del código HTML a su bandeja de entrada. Luego puede copiar/pegar el código en su editor de diseño de correo electrónico para importar la plantilla y adaptarla a su marca y campaña.

Consulte otras plantillas de correo electrónico de Twilio SendGrid

¿Quieres más plantillas de correo electrónico? Por suerte para ti, tenemos una galería llena de ellos . Ya sea que necesite un boletín informativo, un restablecimiento de contraseña o una plantilla de recordatorio de citas, nuestra galería de plantillas gratuita lo tiene todo.

Además, estos diseños son receptivos, lo que garantiza que su correo electrónico se vea bien en todos los clientes, navegadores y dispositivos. Ah, ¿y mencionamos que las plantillas son gratuitas?

Comience a crear mejores correos electrónicos HTML hoy con una plantilla preconstruida.