Limitaciones del uso de HTML en las campañas por e-mail

Cuando cree campañas por e-mail, siempre debe previsualizar y probar el mensaje en diferentes clientes de e-mail antes de enviarlo. De hecho, algunos clientes de e-mail no admiten todo el contenido HTML, ya que el HTML del e-mail no está tan desarrollado como el HTML web. Los elementos interactivos como Flash o JavaScript no funcionan en la mayoría de los clientes de e-mail. 

❗️ Importante

El uso de bloques HTML se recomienda únicamente para usuarios avanzados. La incorporación de un código HTML personalizado puede afectar la visualización de su campaña de email en algunos clientes de email. El HTML personalizado debe maximizar la compatibilidad con el correo electrónico y la capacidad de respuesta en la mayor medida posible. A fin de garantizar que su email se muestre como se espera en los clientes de email, le recomendamos encarecidamente que primero pruebe la campaña de email antes de enviarla a sus contactos. 

¿Existe alguna diferencia entre un editor HTML y un bloque HTML?

Puede personalizar el diseño de su campaña de email con la ayuda de dos herramientas HTML diferentes:

Editor HTML Bloque HTML

El editor HTML le permite diseñar toda su campaña de email utilizando un código HTML. Si desea utilizar el editor HTML, cree una campaña de email y, a continuación, elija la herramienta editor HTML en el paso Diseño. Para obtener más información, consulte nuestro artículo específico Carga de un archivo HTML para diseñar su campaña.

html-editor.gif

 

¿Qué formatos HTML puedo usar en mi campaña por e-mail?

Consulte la siguiente tabla para descubrir qué formatos HTML puede usar o no de forma segura en su campaña por e-mail: 

✅ Uso seguro 🟠 Uso con cautela ❌ Uso prohibido
  • Imágenes de fondo
  • Fuentes web personalizadas
  • Plantillas amplias
  • CSS integrado
  • JavaScript
  • <iframe>
  • Flash
  • Audio incrustado
  • Vídeo incrustado
    Para insertar con seguridad un vídeo en el diseño de su campaña, consulte nuestro artículo relacionado
  • Formularios
  • Capas <div>

🌐 CSS

El uso de CSS está limitado en el HTML de los e-mails. Para obtener los mejores resultados al diseñar su campaña, le recomendamos: 

  • Usar CSS muy básico.
    Use este sitio web como referencia para comprobar si su CSS será compatible con los clientes de e-mail. 
  • Usar CSS únicamente para los elementos de estilo generales, como la fuente y los colores.
  • Usar CSS en líneas en lugar de CSS incrustado. En el CSS en líneas, los colores del fondo o los ajustes de la etiqueta <body> deben gestionarse con una etiqueta <table> del 100 % de ancho alrededor de su e-mail.
    ❗️ Importante
    Algunos clientes de e-mail eliminan las líneas de código que comienzan con una coma o un punto. Añada un espacio al principio de cada línea que comience con una coma o un punto para evitarlo.

🔤 Fuentes seguras para la web

Utilice fuentes legibles y fácilmente reconocibles por cualquier cliente de e-mail. Compruebe las fuentes que está utilizando antes de enviar su campaña de e-mail. Para asegurarse de que los clientes podrán leer su campaña de e-mail con la fuente que haya elegido, añada una fuente de sustitución en el editor «Drag and Drop». Podrá elegir qué fuentes utilizar si la que ha utilizado no es compatible con el cliente de e-mail. Para obtener más información, consulte nuestro artículo Añadir fuentes de Google y de sustitución en el editor de Drag and Drop.

También le recomendamos que utilice un máximo de dos o tres fuentes en una campaña de e-mail. Para que su e-mail sea fácil de leer, elija un tamaño entre 14 y 16 px. para el cuerpo del texto: 14 px. para los e-mails largos con párrafos, y 16 px. para los cortos (dos o tres frases). 

🏞 Mapas de imágenes

Puede añadir fácilmente mapas de imágenes a sus campañas añadiendo un enlace a su bloque de imágenes en el editor de «Drag and Drop»:

  1. Añada un bloque de imágenes al diseño de su campaña y haga clic en la imagen. 
  2. Haga clic en Añadir enlace. Se abrirá la ventana de Insertar/editar enlace.
  3. Rellene la información relativa a los siguientes campos:
    • Tipo de enlace, que con frecuencia es un Enlace absoluto (URL), pero puede elegir cualquier otro tipo de enlace.
    • Destino del enlace, que es el enlace al que quiere que lleve su imagen. 
    • Título del enlace, que es la palabra que quiere mostrar cuando se pase el ratón por encima de la imagen.
  4. Haga clic en Insertar.

add-link-image-dde.gif

🚨 Escape automático

De manera predeterminada, escapamos el contenido HTML (y JS) de todas las variables. Esto quiere decir que cualquier HTML pasado en una variable se escapará y se imprimirá como texto. Por ejemplo, si el contenido de la variable es <h1>Mi título</h1>, la plantilla mostrará exactamente este texto en el e-mail: <h1>Mi título</h1> en lugar de mostrar la frase «Mi título» con el formato de un título H1.

Para obtener más información, consulte nuestro artículo relacionado Desactive el escape automático para mostrar llaves dobles en sus e-mails.

⏩ ¿Qué es lo siguiente?

🤔 ¿Tiene alguna duda?

Si tiene alguna pregunta, no dude en ponerse en contacto con nuestro equipo de asistencia mediante la creación de un ticket desde su cuenta. Si todavía no tiene una cuenta, puede ponerse en contacto con nosotros aquí.

Si necesitas ayuda con un proyecto usando Brevo, podemos ponerte en contacto con un socio certificado de Brevo.

💬 ¿Fue útil este artículo?

Usuarios a los que les pareció útil: 4 de 27