×

CONTÁCTANOS

Centro de ayuda de Benchmark Email

Base de conocimientos aero-right Entregabilidad aero-right Limitaciones de HTML para correos electrónicos

Limitaciones de HTML para correos electrónicos

Entregabilidad Actualizado en junio 1, 2021

Los distintos servidores como AOL, Yahoo, Gmail, entre otros, pueden renderizar de forma diferente tus campañas, debido a esto puede que tus correos pueden ser afectados en su apariencia. Benchmark está determinado a que no sufras estos inconvenientes, por eso te alentamos a que realices tus campañas con nuestro editor de arrastrar y soltar, al hacerlas de esta forma tus campañas llegarán sin los errores comunes de HTML a la bandeja de entrada de tus lectores ya que podrás visualizarlos antes de ser enviados con nuestro verificador de buzón.

Las mejores prácticas para la creación de campañas por correo

Existen algunas restricciones inevitables por parte de los servidores de correos, por eso enlistamos a continuación algunos puntos que al considerarlos te ayudarán a mejorar la visualización de tus campañas:

  • Utilizar el editor de arrastrar y soltar – Todas las campañas realizadas con este editor son responsivas, es decir que se verán perfectamente en cualquier dispositivo.
  • Añadir el enlace para ver la versión web
  •  Incluye un enlace para ver la versión web de tu campaña ya que algunos clientes de correo electrónico no cumplen con los estándares de internet y tu campaña puede verse afectada por esto. Activa esta opción usando el bloque de permiso recordatorio.
  • Imágenes de fondo – Es posible que las imágenes de fondo no se muestren correctamente en tus campañas, por eso te recomendamos coloques un color de fondo que pueda reemplazar la imagen en caso de que se vea afectada, al no hacer esto, es posible que el fondo se muestre blanco.
  • Añadir texto alterno – Alt text es usado para describir las imágenes en tu campaña, este texto será mostrado sustituyendo tu imagen en caso de que esta no pueda verse, una buena descripción ayudará a que el usuario comprenda de qué se trata la imagen, además las imágenes con Alt text son menos propensas a ser bloqueadas.
  • Alineación de la imagen – En algunos casos una imagen puede ser demasiado grande, o encontrarse en la posición incorrecta, por eso te sugerimos establecer un tamaño adecuado para tu imagen no mayor a 640 px y la alineación que necesites. Claro, si utilizas el editor de arrastrar y soltar tu campaña se verá perfecta.
  • Evita utilizar URLs muy largas o textos largos sin espacios – Usar textos excesivamente largos o URLs muy largas directamente en los bloques de texto puede ocasionar que no se visualicen completas o correctamente y por ende afectar su funcionamiento. Para prevenir esto te recomendamos añadir URLs a través de enlaces en un texto corto ej. Haz clic aquí, o en imágenes. Para aprender más sobre cómo añadir enlaces haz clic aquí.

Al terminar de aplicar los puntos anteriores, te recomendamos envíes un email de prueba a ti mismo o a personas de tu confianza. Trata de abrir ese email en diversos dispositivos para ver si todo ha quedado configurado correctamente. También puedes usar nuestro verificador buzón y asegurarte de que tu email luzca perfecto antes de enviarlo.

A continuación te damos una lista de los errores más comunes en los diferentes proveedores de correos.

 

Cliente de Correo
Soporte HTML
Errores comunes
AOL 4.0 y 5.0

No

  • Solo texto.
  • Los formularios pueden ser deshabilitados.
AOL 6.0, 7.0, y 8.0

Si

  • HTML estándar.
  • Los formularios pueden ser deshabilitados.
  • Enlaces a hojas de estilo externas son rechazados.
AOL 9.0

Parcial

  • Imágenes HTML y hot links pueden ser desactivados.
  • Los formularios pueden ser deshabilitados.
  • Correos largos pueden convertirse en archivos .zip.
AOL Webmail

Parcial

  • No es totalmente compatible con el cumplimiento de XHTML.
  • Las etiquetas <br /> pueden deshabilitarse.
  • Las anclas no son soportadas – En vez de que el ancla te lleve a la sección deseada, abrirá una nueva ventana.
Apple Mail

Si

  • HTML estándar.
  • No se permiten etiquetas de fuentes – Serán reemplazadas con etiquetas <span>.
  • Deberán hacer clic dos veces en el ancla para que funcione correctamente.
  • En el Capitan OSX, las anclas no funcionan.
Compuserve

No

  • Solo texto.
Comcast Smartzone

Si

  • HTML estándar.
  • Las imágenes de fondo son bloqueadas.
  • Las anclas no son soportadas – En vez de que el ancla te lleve a la sección deseada, abrirá una nueva ventana.
Comcast XFinity

Parcial

  • Correos largos no se visualizan completamente – para visualizar el correo completo incluye el enlace a la versión web o crea un correo corto.
  • Al hacer clic en un ancla o tabla de contenidos en vez de ir a la sección deseada, se abre una nueva ventana.
Entourage (Mac)

Si

  • HTML estándar.
Entourage 2008 (Mac)

Parcial

  • Las imágenes de fondo son bloqueadas.
  • Son compatibles los formularios, elementos flash, CSS, y GIF animados.
  • Las viñetas son reemplazadas con imágenes.
Earthlink

Parcial

  • En ocasiones el texto aparece subrayado.
Eudora 3.1

No

  • Solo texto.
Eudora 4.0, 4.2, 4.3, y 5.0

No

  • HTML estándar es compatible al usar Internet Explorer.
  • Compatibilidad pobre de HTML en el visor HTML de Eudora.
Gmail

Parcial

  • Los marcadores de anclas no son soportados.
  • Correos largos no se visualizan completamente – para visualizar el correo completo incluye el enlace a la versión web o crea un correo corto.
  • Hipervincula los números de teléfono.
Hotmail

Parcial

  • Bloquea las imágenes por defecto.
  • Las etiquetas <head>, <title>, <meta>, y <body> serán deshabilitadas – deberán usarse estilos de línea.
  • Desactiva la protección hot link después de 4 minutos y deshabilita las imágenes de fondo – Se necesita activar la autenticación.
  • Problemas con el CSS
  • En ocasiones el texto aparece subrayado.
  •  Espacio extra es añadido entre párrafos rodeado por la etiqueta <p> – Necesitarás sustituir la etiqueta <p> por <div> en la vista del código o crear un bloque nuevo y reescribir el texto sin copiar y pegar de otra fuente para que no se añadan estilos.
Juno 4.0, y 5.0

Si

  • HTML casi estándar.
  • Problemas con el CSS.
Lotus Notes 4.6

No

  • Sin fuentes ni colores para los enlaces.
Lotus Notes 5.0

Si

  • HTML casi estándar.
  • Problemas con el CSS
Novell GroupWise 5.5

Si

  • HTML estándar.
Office 365

Parcial

  • HTML estándar.
  • Las imágenes son bloqueadas por defecto.
  • Problemas con el CSS.
  • Los enlaces ancla y tablas de contenido no funcionan.
  • Las imágenes se muestra con el tamaño original, lo que provoca una visualización inadecuada. Cambia el tamaño de la imagen y vuelve a insertarla.
Outlook 97

Parcial

  • Sin fuentes ni colores para los enlaces.
  • Problemas de alineación
Outlook 98 y 2000

Si

  • HTML estándar.
  • No es totalmente compatible con CSS
Outlook 98 y 2001 (Mac)

No

  • Acepta unicamente formato RTF (Rich text format).
Outlook 2003

Parcial

  • Las imágenes son bloqueadas por defecto.
Outlook 2007 y 2010

Parcial

  • Formularios, elementos flash, completos, CSS y gifs animados no son soportados.
  • Las viñetas son reemplazadas con imágenes.
  • Los saltos de página insertados en correos largos pueden causar espacios vacíos en el correo.
  • No se admiten bordes de imágenes.
  • En pantallas con definición mayor a 1920 x 1080px formatea el texto más no las imágenes.
  • Los estilos de subtítulos de imagen se reemplazan con el estilo de Outlook.
  • Las imágenes que pasan los 1728px de altura son cortadas.
  • Añade espacio extra entre párrafos o texto a doble espacio.
  • Dependiendo de la configuración del dispositivo, las imágenes pueden aparecer deformes.

Nota: Microsoft ha configurado una herramienta para validar el HTML para Outlook 2007.

Outlook 2007 y 2010 (Mac)

Parcial

  • Los enlaces ancla y tablas de contenido no funcionan.
  • No soporta GIF’s animados.
Outlook 2013 y 2016

Parcial

  • Los saltos de página insertados en correos largos pueden causar espacios vacíos en el correo.
  • Si el último texto de un bloque es una viñeta, se agregará después de este una viñeta extra sin texto – para no tener este problema no termines tu correo con una viñeta o agrega lo siguiente en el código: <div style=”display:none;”>&nbsp;</div> y antes del cierre añade la etiqueta </ul>
  • En pantallas mayores a 1920 por 1080px el texto se escala mas no las imágenes.
  • Dependiendo de la configuración del dispositivo, las imágenes pueden aparecer deformes.
  • No soporta GIF’s animados.
Outlook 2016 (Mac)

Parcial

  • Los enlaces ancla y tablas de contenido no funcionan.
Outlook 365

Parcial

  • El color de los enlaces se establece de forma predeterminada en azul a menos que el enlace anterior tenga un formato de color será necesario colocar la etiqueta: <span> y <td> además de <div>
  • Al hacer clic en un ancla o tabla de contenidos en vez de ir a la sección deseada, se abre una nueva ventana.
  • El texto es justificado por defecto, incluso si tiene alguna alineación.
  • El relleno de la imagen se elimina.
Outlook Web Access

Parcial

  • HTML estándar.
  • Las imágenes son bloqueadas por defecto.
  • Los enlaces ancla y tablas de contenido no funcionan.
  • Las imágenes se muestra con el tamaño original, lo que provoca una visualización inadecuada. Cambia el tamaño de la imagen y vuelve a insertarla.
Outlook Express- PC o Mac

Si

  • HTML estándar.
Pegasus Mail 3.1- Windows

Si

  • HTML estándar.
  • Los colores en los enlaces no están disponibles.
Smartphones Android, iPhone, etc.

Si

  • Los números telefónicos pueden aparecer como enlaces (haz clic para llamar)
  • Las fechas se pueden agregar como un evento en el calendario del usuario usando la dirección física al pie de la página del correo.
Verizon

Si

  • HTML estándar.
  • Los enlaces ancla y tablas de contenido no funcionan.
Yahoo!

Si

  • HTML estándar.
  • Los enlaces de anclas y tablas de contenido no son compatibles con todos los navegadores: Al hacer clic en ellos, el correo se cierra y regresa al lector a la bandeja de entrada.
  • Correos largos no se visualizan completamente – para visualizar el correo completo incluye el enlace a la versión web o crea un correo corto.

Fuente: StudioCloud

Si tienes más preguntas sobre este u otros temas de Benchmark, por favor, contacta a nuestro equipo de soporte vía Email, LiveChat o teléfono.