Errores comunes de HTML

Si deseas programar tu propia plantilla de correo electrónico HTML en lugar de utilizar una de nuestras opciones de plantilla prediseñadas, hay varias cosas que debes tener en cuenta a la hora de crear tu contenido.

En este artículo, te explicamos algunos errores comunes de codificación HTML y cómo evitarlos.

Imágenes, enlaces y gráficos

Tu correo electrónico HTML es un gráfico enorme

La mayoría de los programas de correo electrónico bloquean las descargas automáticas de imágenes de forma predeterminada, lo que podría provocar que los destinatarios eliminen tus correos electrónicos o incluso los marquen como spam. Como norma general, recomendamos una proporción de 80 % de texto a 20 % de imágenes en un correo electrónico. Sin embargo, todos los filtros de spam utilizan diferentes criterios para determinar cuál es el equilibrio adecuado entre gráficos y texto.

Si la mayor parte del contenido de tu correo electrónico se incluye en un solo gráfico, añade texto al pie de página (como el enlace para cancelar la suscripción, la dirección física y el recordatorio de permiso) para equilibrar la proporción texto-imagen.

Imágenes alojadas en un servidor local o privado

Si trabajas en un servidor de pruebas o en una unidad de red, el público en general no tendrá acceso a esos servidores y las imágenes aparecerán rotas.

Para evitarlo, sube y aloja todas las imágenes en un servidor público para que se muestren correctamente en tu correo electrónico o usa el Gestor de contenido para subir imágenes y alojarlas en Mailchimp.

Las imágenes y los hipervínculos no utilizan rutas absolutas

Las rutas absolutas para imágenes y archivos incluyen la información del servidor además del nombre del archivo para que las aplicaciones externas puedan buscar el archivo y acceder a este. Aloja siempre todas las imágenes en tu servidor y usa rutas absolutas que lleven directamente a tu servidor.

De este modo, en lugar de codificar una imagen así:

<img src="/images/photo.gif">

La codificarías así:

<img src="http://www.mysite.com/email/images/photo.gif ">

Lo mismo se aplica para los hipervínculos. En lugar de un enlace como este: 

<a href="index.html" shape="rect">Cliquez ici</a>

Codificarías el enlace así:

<a href="http://www.mysite.com/index.html" shape="rect">Cliquez ici</a>

Si codificas mensajes de correo electrónico a nivel local con un editor WYSIWYG, vuelve a comprobar que todas las etiquetas <img/> usen rutas absolutas. Es muy aconsejable que al comienzo del proyecto subas todos los gráficos del correo electrónico a tu servidor. De este modo, utilizarás rutas absolutas desde el principio.

Vista previa y prueba

La campaña no se ha probado completamente

Antes de enviar tu correo electrónico, pruébala exhaustivamente. Te recomendamos que envíes correos electrónicos de prueba a todos los proveedores de correo electrónico más habituales, como Yahoo, Hotmail y Gmail. Si te consta que tus contactos usan un cliente de correo electrónico menos habitual, sigue los pasos igualmente para probarla en ese programa también. Usa nuestra herramienta Inbox Preview para obtener una vista previa de cómo quedará tu correo electrónico en los distintos clientes, o consulta nuestros consejos para probar campañas.

No se han probado los correos electrónicos creados por un diseñador web

Si encargas a un profesional que te diseñe un correo electrónico y pegas el código suministrado, debes realizar igualmente una prueba de envío y asegurarte de que todo se muestre correctamente. Comprueba que el diseño no sea demasiado ancho para que se ajuste al panel de vista previa de la mayoría de programas de correo electrónico. Asimismo, prueba las imágenes y los enlaces para asegurarte de que se muestren perfectamente y estén configurados como rutas absolutas.

Código y software

Se ha usado Microsoft FrontPage, Word o Publisher para crear contenido HTML

Usar Word, Publisher o FrontPage para generar contenido HTML puede generar código adicional que se añade a tu correo electrónico. Este código puede estropear el diseño de tu correo electrónico o incluso dar lugar a que tu campaña acabe filtrada como spam. En su lugar utiliza un editor de texto básico y luego importa la plantilla o pega el código en Mailchimp.

El uso de JavaScript en correos electrónicos HTML

La mayoría de las aplicaciones de correo electrónico bloquean el JavaScript como medida de seguridad. Asegúrate de que tu código no contiene JavaScript, como los botones para enviar formularios, los enlaces a ventanas emergentes, precargadores de imágenes o widgets. Si vas a copiar HTML desde una página web existente, elimina el JavaScript del código. Nuestro Creador de campañas eliminará cualquier JavaScript que pueda detectar, pero te recomendamos que pruebes tu campaña a fondo antes de enviarla para asegurarte de que se muestra correctamente.

CSS utilizado de manera incorrecta

La mayoría de las aplicaciones de correo electrónico quitan las etiquetas HEAD y BODY del correo electrónico entrante para evitar que el CSS incrustado interfiera con el CSS de su página. Te recomendamos que utilices el CSS en línea o que incrustes tu CSS justo antes de tu contenido después de la etiqueta <BODY>.

Conformidad

Usar contenido de apariencia spam

La mayoría de nosotros recibimos spam. Las líneas de asunto suelen ir todas en mayúsculas, las letras están resaltadas en azul o rojo brillante, utilizan una gran cantidad de signos de exclamación y emplean frases como "lo último", "lo mejor" o "¡haz clic ahora!".

Procura que los asuntos de tus correos electrónicos sean breves y directos y que el contenido sea relevante. No intentes emplear expresiones pegadizas y evita siempre palabras que parezcan spam.

No hay enlace para cancelar la suscripción

Requerimos que todos los correos electrónicos de marketing enviados a través de Mailchimp tengan nuestra *|UNSUB|* etiqueta. No hay absolutamente ninguna excepción a esta regla. Debe estar presente tanto en el correo electrónico HTML como en el correo electrónico de texto sin formato.

No hay recordatorio de permiso

Todas nuestras plantillas integradas te piden automáticamente que crees un recordatorio de permiso, pero si programas tu propia plantilla, tendrás que incluirlo en el código de esta. Los recordatorios de permiso les indican brevemente a tus contactos suscritos cómo se suscribieron a tus acciones de marketing; por ejemplo, "Has recibido este correo electrónico porque te has suscrito a nuestro boletín de noticias en www.example.com". Estos recordatorios de permiso evitan denuncias de abuso falsas, que podrían hacer que el nombre de dominio de tu empresa acabara en una lista de exclusión (lo que otros proveedores denominan "lista negra").

No hay dirección postal

Ahora requerimos que todos nuestros usuarios incluyan una dirección postal física válida en todos los correos electrónicos enviados a través de nuestros servidores, de conformidad con la Ley CAN-SPAM de EE. UU. La dirección se inserta de forma automática cada vez que utilizas nuestras plantillas de correo electrónico HTML integradas, así que, si programas tu propia plantilla, tendrás que añadirla manualmente.