HTML, o lenguaje de marcado de hipertexto, es el código que se utiliza para crear la estructura básica de un sitio web. Al igual que el HTML te permite personalizar completamente la apariencia de un sitio web, los correos electrónicos HTML te dan más control sobre la estructura de tus correos electrónicos. Puedes cambiar el aspecto de la fuente, personalizar el diseño de tus correos electrónicos e incluso incorporar gráficos y botones con el formato de correo electrónico HTML correcto.
Una guía rápida para crear un email HTML exitoso
El código HTML puede parecer un aspecto intimidante del email marketing, pero no tiene por qué serlo. Aprende a perfeccionar tus habilidades de código HTML para mejorar tus correos electrónicos de marketing.
El único problema es que escribir correos electrónicos con código HTML no es tan fácil como suena. Seguir plantillas de correo electrónico con código HTML puede servir, pero aún debes asegurarte de que tus correos electrónicos respondan a diferentes resoluciones y funcionen con diferentes clientes de correo electrónico. Además, no puedes desalentar a los lectores con tiempos de carga insensatos. Si deseas revisar tus correos electrónicos con código HTML, aquí tiene una guía rápida de código HTML para correos electrónicos.
Cómo hacer un borrador de correo electrónico con código HTML
Puede que te preguntes, ¿cómo se crea un correo electrónico con código HTML? Leer algunas guías sobre código HTML básico puede ayudar, pero redactar correos electrónicos con código HTML es un poco diferente de usar código HTML para crear un sitio web. Lo primero que necesitas hacer a la hora de redactar un correo electrónico con código HTML es establecer el DOCTYPE, que determina las reglas de código HTML y CSS que se siguen cuando se lee código HTML. Sin embargo, algunos clientes de correo electrónico sobrescribirán el DOCTYPE y usarán su propio conjunto de reglas para el código HTML.
A continuación viene la sección <head>, que es donde pones tu título y otra información importante sobre tu correo electrónico. Como mínimo, tu etiqueta head debe incluir una etiqueta <title> dentro de ella, que debe cerrarse con una etiqueta </title> . También puedes utilizar una etiqueta meta para definir metadatos dentro de la sección <head> . Una vez que hayas terminado con esta sección, esta debe cerrarse con </head>.
Ten en cuenta que es posible que ciertas etiquetas y elementos no funcionen con algunos proveedores de correo electrónico. Varios proveedores de correo electrónico no te permiten usar la etiqueta <style> en el encabezado de un correo electrónico, mientras que Gmail no permite la etiqueta <style> en el cuerpo de un correo electrónico. También es importante seguir una guía de email marketing para conocer las prácticas recomendadas ya que cambiar el diseño de un correo electrónico no significa que el contenido sea bueno.
Texto sin formato frente a código HTML
Es posible que hayas escuchado hablar a menudo sobre los correos electrónicos en texto sin formato frente a los correos electrónicos en código HTML, pero ¿cuál es la verdadera diferencia?
Los correos electrónicos de texto sin formato son el tipo de correo electrónico más sencillo que puedes enviar ya que solo contiene texto sin formato. No incluye imágenes, videos ni botones. De hecho, todo el texto de un mensaje de texto sin formato suele tener el mismo aspecto, por lo que no es posible personalizar realmente los correos electrónicos con texto sin formato. El texto sin formato es básicamente en lo que trabajas dentro de Notepad, mientras que el código HTML es más parecido a a lo que usas cuando escribes en Microsoft Word o en un editor de texto enriquecido. Sin embargo, los correos electrónicos en texto sin formato siguen teniendo su lugar en el mundo moderno.
Los correos electrónicos con código HTML se escriben utilizando código de lenguaje de marcado de hipertexto, lo que te permite implementar gráficos, agregar botones e insertar videos directamente en tus correos electrónicos. También puedes usar etiquetas de código HTML para personalizar el aspecto de la tipografía, tanto si quieres usar una tipografía diferente como si quieres cambiar el color o el tamaño de la que estás utilizando. Las etiquetas de encabezado, subíndice y superíndice permiten personalizar aún más el aspecto del texto en un correo electrónico con código HTML.
Aunque mucha gente no está familiarizada con los correos electrónicos con código HTML, los editores de tipo "lo que ves es lo que obtienes" (WYSIWYG) que utilizan muchos clientes de correo electrónico ofrecen funciones similares. Del mismo modo que puedes hacer que el texto aparezca en negrita, subrayado o cursiva con Gmail, puedes utilizar el código HTML para personalizar el aspecto de tus mensajes de correo electrónico. The only real downside to these WYSIWYG editors is the fact that your emails may not appear the same across multiple devices and email clients. Dicho esto, la mayoría de los editores WYSIWYG populares hacen un buen trabajo si quieres crear una campaña sin aprender a programar.
Prácticas recomendadas de HTML
Si desea asegurarse de escribir correos electrónicos HTML de alta calidad que sean legibles en varios dispositivos y clientes de correo electrónico, debe asegurarse de estar al día con las mejores prácticas. Aquí tienes algunas buenas prácticas de formato de código HTML que te ayudarán a encontrar el formato perfecto para tu campaña de correo electrónico.
Adaptable al tamaño de la pantalla
Hubo una época más sencilla en la que la mayoría de los monitores de ordenador funcionaban a una resolución de 800x600, pero esos tiempos ya pasaron. Hoy en día, hay teléfonos, computadoras, computadoras portátiles y tablets capaces de ejecutar resoluciones mucho más altas, e incluso no puedes contar con diferentes dispositivos para usar la misma relación de aspecto.
El diseño responsivo significa que tus correos electrónicos están diseñados para verse bien independientemente de la resolución de pantalla con la que se vean. No quieres que parte de tu correo electrónico se corte porque no quepa en la pantalla del usuario, pero tampoco quieres que los gráficos y el texto sean tan pequeños que resulten difíciles de ver. Puedes hacerlo configurando tablas e imágenes en diferentes anchos según el tamaño de pantalla en el que se vean. Es útil probar minuciosamente el código HTML de su correo electrónico antes de enviarlo a su lista de correo.
Tiempo de carga
Si un correo electrónico tarda demasiado en cargarse, muchos lectores simplemente se darán por vencidos y pasarán al siguiente correo electrónico. Se podría pensar que todo el mundo tiene un dispositivo y una conexión a Internet lo suficientemente rápidos como para cargar cualquier correo electrónico con facilidad, pero ese no es el caso para muchas personas. Para las personas que utilizan un dispositivo antiguo o se conectan a Internet móvil, cargar un correo electrónico repleto de imágenes, vídeos y otro contenido multimedia puede resultar complicado.
Eso no significa que no deberías incluir ningún elemento multimedia en tus correos electrónicos, pero debes estar consciente de los tiempos de carga y de cómo afectan tu tasa de rebote de correos electrónicos. Crear correos electrónicos HTML se trata tanto de mantener tiempos de carga mínimos como de hacer que tus correos electrónicos se vean bonitos.
Diferencia entre proveedores de correo electrónico
Uno de los mayores problemas que enfrentan los desarrolladores web es que diferentes navegadores web pueden generar el mismo código HTML y CSS de manera diferente. Lo mismo ocurre con el email marketing HTML y los diferentes clientes de correo electrónico. Aunque tu correo electrónico tenga un aspecto estupendo cuando lo estás diseñando, es posible que algunos clientes de correo electrónico no reproduzcan correctamente las imágenes o los videos, o que no ofrezcan soporte con la tipografía que estás utilizando.
Cuando diseñes un correo electrónico HTML, asegúrate de hacerlo teniendo en cuenta diferentes proveedores de correo electrónico. Esta no es solo una práctica recomendada para escribir formatos de correo electrónico de código HTML, es una de las prácticas recomendadas de correo electrónico más importantes a seguir en el email marketing en general.
Ayuda a que a los suscriptores les resulte más fácil proporcionar comentarios sobre los correos electrónicos que han recibido. Si recibes muchos comentarios sobre imágenes que no se cargan o correos electrónicos que se muestran incorrectamente, considera la posibilidad de ajustar un poco tu código HTML para encontrar algo que funcione mejor.
Diseño para dispositivos móviles
Antiguamente, la mayoría de los usuarios de correo electrónico accedían a él a través de la computadora, por lo que no tenías que preocuparte tanto de diseñar para distintos dispositivos. Ahora que la navegación móvil superó el uso de computadoras de escritorio y portátiles, diseñar tus correos electrónicos para dispositivos móviles es más importante que nunca. Debes asegurarte de que tus correos electrónicos se vean bien, ya sea en una tableta, una computadora portátil o un teléfono inteligente.
Si no estás diseñando tu formato de correo electrónico con código HTML para que funcione con dispositivos móviles, estás perdiendo una parte importante de tu público para el email marketing.
¡Pruébalo!
Una vez que creas que tu formato de correo electrónico con código HTML está listo para la acción, es hora de probarlo para comprobarlo por tu cuenta. Puedes probar a enviar tus correos electrónicos a varias cuentas conectadas a distintos clientes de correo electrónico, o puedes utilizar herramientas de comprobación de correo electrónico que te faciliten el proceso. Lo importante es que pruebes minuciosamente tus correos electrónicos antes de enviarlos a tu lista de distribución de correo.
Además de las pruebas, puedes pedir comentarios a los lectores sobre el formato de tus correos electrónicos. Si recibes varias quejas sobre una imagen que no se muestra correctamente o sobre un correo electrónico que tarda demasiado en cargarse, es señal de que tienes que mejorar el diseño de tus correos electrónicos con código HTML para ese cliente en particular.
El código HTML es más fácil de aprender de lo que piensas
La mayoría de la gente se ha acostumbrado a utilizar editores WYSIWYG, pero un buen formato de correo electrónico de código HTML sigue teniendo cabida en el mundo moderno del email marketing. Si bien el diseño de correo electrónico de código HTML puede parecer un poco complicado al principio, es mucho más fácil una vez que aprendes lo básico. Usar herramientas de prueba y diseñar para dispositivos móviles puede incluso ayudarte a evitar crear correos electrónicos que no funcionen con ciertos dispositivos o proveedores de correo electrónico.
Si deseas evitar la molestia de crear código HTML que funcionen para tu lista de correo, Mailchimp puede ayudarte. Con plantillas de código HTML para correos electrónicos y muchísimas herramientas excelentes para ayudar con el email marketing y la automatización, Mailchimp es tu solución integral para el email marketing. Si tu campaña de email marketing necesita un impulso, prueba Mailchimp hoy mismo.
Obtenga la guía de Mailchimp para marketing por correo electrónico avanzado
Haz crecer tu negocio con el conocimiento y las estrategias adecuados para mejorar tus correos electrónicos, captar la atención del público y convertir los clientes potenciales en clientes leales.