Limitaciones del correo electrónico HTML

La mayoría de clientes de correo electrónico no son compatibles con todos los tipos de contenido HTML que se ve en la Web. Los navegadores Web pueden mostrar secuencias de comandos, animaciones y menús de navegación complejos, mientras que tu bandeja de entrada normal no está creada para gestionar este tipo de contenido.

En este artículo, aprenderás acerca de los tipos de contenido que debes evitar en tus diseños de correo electrónico y qué puedes usar en su lugar.

Qué hacer y qué no hacer con el correo electrónico HTML

Los clientes de correo electrónico suelen tener sus propias restricciones de diseño en comparación con un navegador web. Los elementos interactivos como Flash, JavaScript o los formularios HTML no funcionarán en la mayoría de bandejas de entrada de correo electrónico.

Consulte esta tabla para obtener más información.

Utilizar con precaución

Puedes incluir ciertos elementos en tus plantillas de Mailchimp, como imágenes de fondo y tipografías personalizadas. No todos los programas de correo electrónico admiten estos elementos, así que te recomendamos que obtengas una vista previa y pruebes a fondo tus campañas antes de enviarlas a todo tu público.

GIF animados

Algunos programas de correo electrónico no son compatibles con los GIF animados, pero si quieres incluir uno en una campaña, puedes hacerlo directamente desde Giphy.

Si subes un GIF directamente a Mailchimp, te recomendamos que primero edites el contenido animado. Nuestro editor de fotos permite la edición de archivos de imagen; ahora bien, si se trata de contenido animado, es probable que el archivo GIF se rompa.

En la guía de Litmus, encontrarás más información práctica sobre los GIF animados y qué programas de correo electrónico son compatibles con ellos.

Imágenes de fondo

Mailchimp admite imágenes de fondo en las secciones de preencabezado, encabezado, cuerpo, columna y pie de página de nuestras plantillas de arrastrar y soltar. Si usas una plantilla HTML personalizada, puedes añadir una imagen de fondo con tu creador de plantillas. Las imágenes de fondo no se muestran en todos los programas de correo electrónico y pueden mostrarse de otro modo en los móviles, así que es importante que previsualices y pruebes completamente tus campañas antes de enviarlas a tu público.

Añade una imagen de fondo a una página de destino o correo electrónico
Añadir una imagen de fondo a una plantilla HTML personalizada
Previsualiza y prueba tu campaña por correo electrónico

Tipografías web

La barra de herramientas del editor de Mailchimp te permite usar tipografías estándar y seleccionar una serie de tipografías web personalizadas. Si un programa de correo electrónico no admite una tipografía web usada por tu campaña, la sustituiremos por una tipografía estándar.

Echa un vistazo a esta tabla para saber qué programas de correo electrónico admiten o no tipografías web.

Plantillas anchas

A menudo tus contactos abren las campañas en dispositivos móviles o en el panel de vista previa de programas de correo electrónico de escritorio. Los paneles de visión del correo electrónico son estrechos, por lo que cortarán tu mensaje si es más ancho de 600-800 px.

No usar

Casi todos los clientes principales de correo electrónico bloquean los siguientes elementos.

JavaScript

JavaScript es un lenguaje de programación que hace que el contenido web sea interactivo. Es común en los sitios web, pero la gran mayoría de clientes de correo electrónico bloquean los scripts, ya que pueden ocultar contenido malicioso. Evita todo el lenguaje JavaScript.

Prueba a usar gifs para hacer tu contenido más atractivo.

Elementos Iframe

Un <iframe> (marco alineado) es un elemento de código HTML que incrusta el contenido de un sitio web en otro. Los marcos alineados se usan a menudo para insertar anuncios, vídeos, audio o formularios en otros sitios web. Los iframes contienen con frecuencia secuencias de scripts, por lo que la mayoría de clientes de correo electrónico los bloquean.

En su lugar, vincula el contenido que quieres mostrar en tu campaña.

Flash

Flash muestra animaciones y gráficos en los sitios web, pero la mayoría de clientes de correo electrónico los bloquean.

En su lugar, prueba a usar gifs para hacer tu contenido más atractivo.

Formularios HTML

Los campos de texto, entradas de texto, botones de opción y casillas de verificación son elementos de formulario HTML simples, pero el botón de envío a menudo requiere Javascript. Algunos clientes de correo electrónico mostrarán formularios, pero lamentablemente los contactos no podrán enviarlos. Evita los formularios HTML y piensa en una alternativa.

En su lugar, usa una encuesta sencilla o una integración de encuesta Mailchimp para recoger las respuestas de los contactos, o inserta un enlace a un formulario Web.

Los elementos multimedia incrustados

Los elementos multimedia de reproducción automática y aquellos en los que hay hacer clic para su reproducción no funcionarán en una bandeja de entrada a menos que el cliente de correo electrónico de tu contacto sea compatible con las etiquetas <video> y <audio> de HTML5. Solo un gran cliente de correo electrónico, Apple Mail, es compatible con estas etiquetas, así que es mejor evitar los elementos multimedia incrustados y pensar en una alternativa.

En su lugar, comparte un enlace a un reproductor de vídeo con las etiquetas merge o los bloques de contenido de vídeo de Mailchimp. Para enviar archivos de audio, comparte un enlace de archivo de audio.

Recursos de diseño de correos electrónicos HTML para programadores

Tanto si eres nuevo en el correo electrónico HTML como si has programado muchos correos electrónicos antes, estos recursos te pueden ayudar a diseñar plantillas atractivas en una variedad de programas de correo electrónico.

• Referencia de diseño del correo electrónico
  Proporciona recursos para el diseño, métodos de desarrollo, ejemplos de códigos y diseños de correo electrónico descargables para ayudarte a diseñar y crear correos electrónicos.
• Guía de diseño del correo electrónico
  Proporciona el estilo, diseño y consejos de diseño para la campaña en forma de artículo.