Correo. Inteligente. Eficaz.
Correo electrónico rápido y multiplataforma diseñado para filtrar el ruido.
Definición
💡 Correo electrónico HTML: Correos electrónicos codificados en lenguaje de marcado de hipertexto que te permiten añadir formato, imágenes, colores y enlaces. Básicamente, la diferencia entre un aburrido documento de texto y un mensaje realmente diseñado. El correo electrónico HTML ofrece capacidades de formato y marcado semántico que no están disponibles en el texto sin formato.
Por qué es importante el correo electrónico HTML
Los correos electrónicos de texto sin formato son solo texto. Sin colores, sin imágenes, ni siquiera negrita o cursiva. Los correos electrónicos HTML son todo lo demás.
Los correos electrónicos HTML tienen color, estilo, imágenes y, a veces, contenido multimedia, de forma similar a páginas web entregadas en las bandejas de entrada del correo electrónico de las personas. Eso significa que puedes mantener la coherencia con tu marca, usar tu logotipo y añadir botones en los que la gente realmente pueda hacer clic. Puedes usar los elementos visuales inherentes para ayudar a centrar la atención en las distintas partes del contenido de tu correo electrónico y aprovechar los elementos con los que los usuarios esperan interactuar, como imágenes y vídeo.
La mayoría de las empresas envían correos electrónicos HTML hoy en día. Según encuestas de empresas de marketing online, la adopción de clientes de correo electrónico compatibles con HTML es ahora casi universal, y menos del 1 por ciento afirma usar clientes de solo texto. Tus clientes esperan correos electrónicos diseñados, y el texto sin formato puede parecer poco profesional o anticuado. Eso indica que no te tomas en serio tu comunicación.
Pero HTML no es automáticamente mejor. Hay concesiones. Los correos electrónicos HTML son más grandes, tardan más en cargar y pueden fallar en distintos clientes de correo electrónico. También activan los filtros de spam con más frecuencia que el texto sin formato.
Cómo funcionan los correos electrónicos HTML
Cuando envías un correo electrónico HTML, básicamente estás enviando una mini página web a la bandeja de entrada de alguien.
El diseñador del correo electrónico escribe código HTML, de forma muy parecida a la codificación de una página web, definiendo la estructura con HTML y aplicándole estilo con CSS. Añades imágenes, das formato al texto y creas diseños. Luego, cuando el destinatario abre el correo electrónico, su cliente de correo lee ese código HTML y lo representa como un navegador mostraría una página web.
Aquí está el truco: hay cientos de servicios y aplicaciones diferentes que la gente usa para leer su correo electrónico, como Gmail, Yahoo! y Outlook, y cada servicio muestra HTML y CSS de forma ligeramente distinta. Lo que se ve perfecto en Gmail puede fallar en Outlook. Lo que funciona en escritorio puede fallar en móvil.
Por eso muchos servidores de correo electrónico están configurados para generar automáticamente una versión en texto sin formato de un mensaje y enviarla junto con la versión HTML, usando Content-Type: multipart/alternative. Si el HTML no se representa correctamente, el cliente de correo electrónico recurre al texto sin formato. Estás cubierto de cualquier manera.
HTML frente a texto sin formato
Tienes dos opciones:
Los correos electrónicos HTML te dan control total del diseño. Colores, fuentes, imágenes, botones en los que se puede hacer clic, diseños que coinciden con tu sitio web. HTML es el mejor formato cuando quieres crear mensajes que se parezcan a documentos tradicionales, con varias fuentes, colores y listas con viñetas y numeradas, y cuando quieres mostrar imágenes dentro de tu mensaje. Perfecto para boletines, campañas de marketing y comunicaciones de marca.
Los correos electrónicos de texto sin formato son básicos. Solo texto, sin estilo, sin enlaces incrustados. El formato de texto sin formato no admite texto en negrita o cursiva, fuentes de color ni otro formato de texto, y no permite mostrar imágenes dentro del mensaje. Menos emocionantes, claro, pero funcionan en todas partes. También se sienten más personales y menos comerciales, por eso algunas personas los prefieren para la correspondencia individual.
Para las cuentas de Microsoft, puedes elegir cómo recibir tus correos electrónicos en tu bandeja de entrada.
Funciona muy bien para cartas de ventas y actualizaciones, y si eres vendedor y te comunicas por correo electrónico de forma individual, los correos electrónicos de texto sin formato probablemente sean mejores. ¿Pero para la mayor parte del marketing? HTML gana.
Creación de correos electrónicos HTML
Tienes opciones según tu nivel de comodidad técnica.
Codifícalo tú mismo. Si conoces HTML y CSS, puedes escribir el código desde cero. Solo recuerda que crear un correo electrónico en HTML es algo especializado y no es exactamente igual que crear una página web. Los clientes de correo electrónico son mucho menos indulgentes que los navegadores. Tendrás que usar tablas para el diseño (sí, de verdad), CSS en línea en lugar de hojas de estilo externas y probar en varios clientes.
Usa un creador de arrastrar y soltar. La mayoría de los proveedores de servicios de correo electrónico, como Mailchimp, Constant Contact o Campaign Monitor, ofrecen editores visuales. Arrastras bloques de texto, imágenes y botones, y la herramienta genera el HTML por ti. No se requiere codificación.
Empieza con una plantilla. Toma una plantilla de correo electrónico HTML prediseñada de un servicio como Litmus o Email on Acid, y luego personalízala con tu propio contenido y tu marca. Más rápido que crear desde cero y con más control que un editor de arrastrar y soltar.
Sea cual sea el enfoque que uses, aún necesitas asegurarte de que tus correos electrónicos sean adaptables a distintas resoluciones y funcionen con diferentes clientes de correo electrónico. Prueba todo antes de enviar a tu lista completa.
Buenas prácticas para correos electrónicos HTML
Diseña primero para móviles. Más de la mitad de los correos electrónicos se abren en teléfonos. Ahora que la navegación móvil ha superado el uso de PC de escritorio y portátiles, diseñar tus correos electrónicos para dispositivos móviles es más importante que nunca. Usa diseños de una sola columna, objetivos táctiles grandes para los botones y tamaños de fuente legibles sin hacer zoom.
Mantenlo simple. No te excedas con el diseño. Al desarrollar un correo electrónico HTML, no olvides la simplicidad; no compliques tu trabajo, es mejor ceñirte a la opción de dos columnas. Menos elementos significan tiempos de carga más rápidos y menos cosas que pueden fallar.
Usa CSS en línea. La etiqueta head, que se usa para alojar reglas de estilo CSS para un documento HTML completo, no tiene buen soporte y a veces se elimina por completo, por lo que las declaraciones de estilo en línea se han convertido en el estándar de facto.
Prueba en distintos clientes. Gmail, Outlook, Apple Mail, Yahoo y los clientes móviles se representan de forma distinta. Puedes intentar enviar tus correos electrónicos a varias cuentas conectadas a diferentes clientes de correo electrónico, o usar herramientas de prueba de correo electrónico para evitarte las molestias del proceso. Servicios como Litmus y Email on Acid se especializan en esto.
Incluye una alternativa en texto sin formato. Envía siempre las versiones HTML y de texto sin formato en el mismo correo electrónico. Si el HTML falla, los destinatarios seguirán recibiendo tu mensaje.
Vigila el tamaño del archivo. El correo electrónico HTML es más grande que el texto sin formato. Las imágenes pesadas y el código recargado ralentizan la carga y pueden activar filtros de spam. Keep the total email size under 100 KB if possible.
No dependas solo de las imágenes. Algunos clientes de correo electrónico bloquean las imágenes de forma predeterminada. Tu mensaje debe seguir teniendo sentido sin ellas. Usa texto alternativo para todas las imágenes.
Contenido relacionado
- Cómo crear firmas de correo electrónico profesionales
- Funciones esenciales que debe tener una buena aplicación de correo electrónico