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.

Correo electrónico HTML versus HTML web

La tecnología de visualización de un cliente de correo electrónico típico no está tan actualizada como un navegador web. Los navegadores web muestran contenido interactivo y dinámico que se actualiza a menudo. Sin embargo, los elementos interactivos como Flash, JavaScript o los formularios HTML no funcionarán en la mayoría de bandejas de entrada de correo.

Consulta la siguiente tabla para obtener más información.

Seguro de usar Utilizar con precaución No usar
  • diseños estáticos basados ​​en tablas

  • HTML y tablas anidadas

  • anchura de la plantilla de 600-800 px

  • simple,  CSS en línea

  • fuentes seguras para Web

  • imágenes de fondo

  • fuentes personalizadas para Web

  • diseños anchos

  • mapas de imagen

  • CSS incrustado

  • JavaScript

  • <iframe>

  • Flash

  • audio incrustado

  • vídeo incrustado

  • formularios

  • estratificación <div>

Seguro de usar: ampliamente compatible con la mayoría de clientes de correo electrónico

Utilizar con precaución: compatibilidad limitada con la mayoría de clientes de correo electrónico

No usar: no es compatible con la mayoría de clientes de correo electrónico

Utilizar con precaución

Puedes incluir ciertos elementos en tus plantillas de MailChimp, como imágenes de fondo y fuentes personalizadas. No todos los clientes de correo electrónico admiten estos elementos, así que te recomendamos que visualices previamente y pruebes tus campañas antes de enviarlas a toda tu lista.

Imágenes de fondo

MailChimp admite imágenes de fondo en la pre-cabecera, cabecera, cuerpo, columna y pie de página de tus plantillas arrastrar-y-soltar. Si usas una plantilla HTML personalizada, puedes añadir una imagen de fondo con tu Constructor de plantillas. Las imágenes de fondo no se muestran en todos los clientes de correo, y pueden mostrarse de otro modo en los clientes móviles, así que es importante que visualices previamente y pruebes completamente tus campañas antes de enviarlas a tu lista.

Añadir una imagen de fondo a una campaña

Añade una imagen de fondo a una plantilla HTML personalizada

Visualiza previamente y prueba tu campaña

Fuentes Web

La barra de herramientas Editor de MailChimp te permite usar fuentes estándar y seleccionar una serie de fuentes Web personalizadas. Si un cliente de correo no admite una fuente Web usada por tu campaña, la sustituiremos por una fuente estándar.

Echa un vistazo a esta tabla para descubrir qué clientes de correo admiten y no admiten fuentes Web.

Admiten fuentes Web No admiten fuentes Web

Apple Mail 

Lotus Notes 7

Lotus Notes 8

Lotus Notes 8.5

Outlook 2011 para Mac

Gmail

iOS Mail

Yahoo!

Outlook 2016

Outlook.com

Aplicación Android

Outlook 2003

Android Mail  2.3

Outlook 2007 

Android Mail 4.2

Outlook 2010 

Android Mail  4.4

Outlook 2013

 

Thunderbird

 

IBM Notes 9

 

AOL

  Blackberry
  Alto

Plantillas anchas

A menudo tus suscriptores abren campañas en dispositivos móviles o en el panel de vista preliminar de clientes 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. La compatibilidad es muy limitada o inexistente.

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 comandos porque pueden ocultar contenido malicioso. Evita todo el lenguaje JavaScript.

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

Elementos Iframe

Un(marco alineado) es un elemento 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 comandos, 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 usar gifs para hacer tu contenido mucho 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 suscriptores 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 suscriptores, o inserta un enlace a un formulario Web.

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 suscriptor sea compatible con HTML5y

las etiquetas. 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 codificadores

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

Referencias para el diseño de correos electrónicos

Proporciona recursos para el diseño, métodos de desarrollo, ejemplos de códigos y modelos de correo descargables para ayudarte a diseñar y crear correos electrónicos.

Colección de plantillas de codificación propia

Proporciona artículos paso a paso sobre temas de plantillas con codificación personalizada.

Guía de diseño de correos electrónicos

Proporciona el estilo de la campaña, diseño y consejos de diseño en forma de artículo.

¿Te fue útil este artículo?
¿Hay algo más que podemos hacer para mejorar nuestro sitio?

Servicio técnico