Los errores de codificación de correo electrónico más comunes y cómo evitarlos

A pesar de todas las campanas y silbidos de su correo electrónico, los errores de codificación pueden arruinarlo por completo. Solo un enlace acortado incorrectamente o formato de color incorrecto, y su correo electrónico se verá lamentable, especialmente si un usuario decide verificarlo a través de un teléfono inteligente en lugar de un cliente de correo electrónico web o cambia a un dispositivo con una resolución de pantalla diferente.

En esta publicación, hablaremos sobre errores comunes de codificación de correo electrónico HTML y compartiremos algunos consejos para evitarlos.

¿De dónde provienen los problemas de visualización del correo electrónico?

En pocas palabras, hay dos posibles razones por las que un usuario ve su correo electrónico fuera de la forma que había planeado. El primero está relacionado con las características técnicas del dispositivo de su usuario. El segundo es el cliente de correo electrónico, para ser más precisos: su motor de renderizado.

Características técnicas del dispositivo de un usuario

Existen al menos dos características técnicas de cualquier dispositivo que debes tener en cuenta:

1. Resolución de pantalla : el tamaño de la pantalla, expresado en píxeles. Por ejemplo, el iPhone X tiene una resolución de pantalla de 1125 × 2436 píxeles. Si su correo electrónico contiene dos columnas de texto, 600 píxeles cada columna, no se mostrará correctamente.
2. PPI, o píxeles por pulgada : la cantidad de píxeles en una pulgada de la pantalla. El PPI del iPhone X es 458. Imagínese: necesita agregar un botón de acción en su correo electrónico. Si el botón tiene menos de 44 puntos, lo que para el iPhone X significa 132 × 132 píxeles, ocupará menos de un tercio de pulgada cuadrada del espacio de la pantalla y el usuario apenas podrá tocarlo.

Una cosa más a tener en cuenta: los usuarios a menudo rotan sus dispositivos móviles, por lo que su correo electrónico debe verse ordenado y tener una funcionalidad completa tanto en vista vertical como horizontal.

Para evitar problemas asociados con las características técnicas del dispositivo del usuario, debe utilizar un diseño de correo electrónico receptivo.

Primero, debe agregar consultas de medios en el head de su correo electrónico. Por ejemplo, la @media screen y la consulta (max-width: 600px) 600 (max-width: 600px) significan que el diseño del correo electrónico se optimizará si el ancho de la pantalla es inferior a 600 píxeles. Si el ancho de la pantalla es de más de 600 píxeles, el usuario verá la versión de ancho fijo de este correo electrónico.

En segundo lugar, debe crear un correo electrónico en forma de tabla con celdas:

 <tabla>
<tr>
    <td> ... </td>
</tr>
</table>

Luego, agrega estilo para cada celda, por ejemplo:

 <td> <img src = "http://somewebsite.com/someimage.jpg" width = "600" alt = ""> </td>

Sin embargo, incluso después de haber tomado estas medidas, aún puede tener problemas para mostrar sus correos electrónicos. La fuente del problema es el motor de renderizado del cliente de correo electrónico.

Un cliente de correo electrónico

La segunda fuente de posibles problemas de visualización es el cliente de correo electrónico que utilizan sus destinatarios para abrir sus campañas. La parte central de un cliente de correo electrónico es un motor de renderizado. Recibe un correo electrónico como una secuencia de comandos larga de código, lo procesa y lo genera de la forma en que estamos acostumbrados a recibir correos electrónicos: texto comprensible, estructurado y formateado con imágenes, enlaces y otros medios.

Eche un vistazo al siguiente ejemplo. Es un fragmento de código de un correo electrónico promocional, como lo ve el motor de renderizado de Gmail. Si este correo electrónico se mostró así a un cliente potencial, difícilmente cortará el código y entenderá que hay un código de promoción con un 40% de descuento.

Cada cliente de correo electrónico tiene su propio motor de renderizado, lo que significa que el mismo correo electrónico, abierto a través de diferentes clientes de correo electrónico, puede tener una apariencia totalmente diferente.

Aquí hay una lista de los clientes de correo electrónico más populares en todo el mundo. Obviamente, sus destinatarios usan uno o incluso varios de ellos para abrir los correos electrónicos que envía.

Todos estos clientes de correo electrónico tienen algunas peculiaridades que debe tener en cuenta al realizar la codificación de correo electrónico HTML.

Por ejemplo, Apple Mail para iOS no admite:

• propiedad CSS de inline-size ;
• @media (orientation) consulta de medios;
• enlaces de anclaje;
• Formatos de imagen HDR, PPM y SVG, y más.

Gmail admite varias propiedades CSS y consultas de medios, además de:

• box-shadow, text-shadow, y algunas otras propiedades CSS;
• @media (prefers-color-scheme) consulta de medios y más.

Errores comunes de codificación de correo electrónico y cómo evitarlos

El mejor consejo general para evitar errores de codificación de correo electrónico es limitar su inventario al código admitido por la mayoría de los clientes de correo electrónico, sin importar la antigüedad de sus versiones. En palabras simples, retroceder y codificar como si fuera 1999. Por ejemplo, se recomienda ampliamente usar:

• CSS2 en lugar de CSS3,
• HTML4 en lugar de HTML5,
• color en lugar de imágenes de fondo,
• table-layout lugar de <div> ,
• CSS en línea en lugar de conjuntos de estilos o bloques <style> .

Se cree que este enfoque evita la mayoría de los problemas con la visualización de correos electrónicos. Pero echemos un vistazo más de cerca a algunos errores de codificación particulares que pueden arruinar su correo electrónico y tratemos de encontrar soluciones.

Sin versión de texto sin formato

Problemas potenciales. Algunos clientes de correo electrónico, como Outlook y Gmail, pueden definir su correo electrónico como spam si no tiene una versión de texto sin formato. Además, a veces los clientes de correo electrónico tienen problemas con la representación del código HTML. Debido a esto, los correos electrónicos HTML pueden mostrarse incorrectamente, mientras que los correos electrónicos de texto sin formato siempre tienen el mismo aspecto.

Prevención. Agregue una versión de texto sin formato a su correo electrónico. Afortunadamente, la mayoría de los proveedores de servicios de correo electrónico lo agregan automáticamente.

Puede implementar correos electrónicos de texto sin formato en su estrategia de marketing por correo electrónico. En primer lugar, estos correos electrónicos parecen más personales y, por lo tanto, pueden mejorar su comunicación con los suscriptores. Además, algunas personas prefieren ir directamente al punto del correo electrónico, y un diseño colorido las desanima.

Usar JavaScript, ActiveX, Flash y más

Problemas potenciales. La mayoría de los clientes de correo electrónico no admiten estos idiomas, marcos y complementos, por lo que una parte de su correo electrónico no se procesará y sus suscriptores no verán nada más que un espacio en blanco. Además, el correo electrónico puede estar prohibido por un software antivirus.

Prevención. Conserve los lenguajes que utiliza para codificar los correos electrónicos en HTML y CSS. Si necesita agregar algún video o audio, cárguelo en un sitio web y proporcione un enlace.

Observe cómo NiftyImages presenta las nuevas características del producto: la compañía eligió una secuencia de imágenes, aunque podría ser un video explicativo.

Demasiados redireccionamientos

Problemas potenciales. Los redireccionamientos, aunque necesarios para el análisis, pueden hacer más daño que bien a su correo electrónico. Por ejemplo, hacen que el tiempo de carga de una página web sea significativamente más largo. Luego, existe la posibilidad de que el navegador de un usuario bloquee las redirecciones, por lo que la URL será inaccesible.

Prevención. Intente evitar las redirecciones. Pero si aún tiene que usarlos, verifique cuánto tiempo toma la carga de una URL de destino: pruebe su correo electrónico antes de lanzar toda la campaña. Considere la experiencia de sus suscriptores: si están dispuestos a esperar a que se cargue la URL o no.

Enlaces acortados

Problemas potenciales. Los enlaces acortados ponen sus correos electrónicos en riesgo de terminar en la carpeta de correo no deseado. El caso es que en los enlaces abreviados, la URL de destino no está clara. En palabras simples, podría llevar a cualquier parte. Naturalmente, los piratas informáticos y los spammers se aprovechan de eso.

Prevención. No utilice enlaces abreviados. Si su objetivo es hacer que su correo electrónico se vea ordenado, sin URL largas, será mejor que use la siguiente etiqueta HTML: <a href="URL">...</a> . Puede insertar cualquier URL aquí, sin importar su longitud.

Si todavía está ansioso por acortar los enlaces, acorte sus propias URL en lugar de utilizar herramientas de terceros. Al menos escanee las listas negras de acortadores de enlaces de antemano.

Tamaño de archivo de cuerpo de correo electrónico grande

Problemas potenciales. Tanto los clientes de correo electrónico como los proveedores de servicios de correo electrónico tienen límites de tamaño de cuerpo de correo electrónico, ya que están diseñados para transferir volúmenes de información relativamente pequeños. Si no se ajusta a esos límites, es posible que su correo electrónico quede recortado; su final se ocultará.

Eche un vistazo a un boletín de un sello discográfico. Cuando se abre a través de Gmail, está recortado.

Para ver su versión completa, el suscriptor debe tocar un enlace.

Un gran tamaño de archivo de cuerpo de correo electrónico también puede causar problemas con la capacidad de entrega. Además, debido al gran tamaño, el software antivirus del usuario puede considerar el correo electrónico como una amenaza para la seguridad.

Prevención. Consulte los límites de tamaño del cuerpo del correo electrónico de su proveedor de servicios de correo electrónico y de los clientes de correo electrónico que utilizan sus suscriptores. Por ejemplo, Google reclama un límite de tamaño de cuerpo de correo electrónico de 200 KB. Pero se recomienda ampliamente limitar sus correos electrónicos a 100 KB para cumplir con los requisitos de la mayoría de los clientes de correo electrónico. En realidad, el correo electrónico del ejemplo anterior tiene un tamaño de 136 KB.

Demasiadas fuentes y colores

Problemas potenciales. Debido a las diferencias entre los clientes de correo electrónico, no todas las fuentes y colores se pueden mostrar correctamente. Además, no todas las fuentes y colores se combinan bien entre sí, por lo que corre el riesgo de crear un diseño de correo electrónico de poca calidad.

También debe tener en cuenta que los dispositivos de sus suscriptores tienen diferentes configuraciones de pantalla, como el brillo, por ejemplo. Y mientras intenta hacer que su correo electrónico sea más vívido, los usuarios pueden sufrir este derroche de color.

Este es un ejemplo cuestionable de diseño de correo electrónico: cada bloque tiene sus propios colores; todo esto distrae al usuario de la información más importante.

Prevención . Elija fuentes compatibles con correo electrónico, como Arial, Comic Sans MS, Courier New, Times New Roman o Verdana: son compatibles con los clientes de correo electrónico más populares. El tamaño de la fuente del texto no debe ser inferior a 12-13 px; de lo contrario, el usuario tendrá que hacer zoom en su correo electrónico o forzar la vista.

En cuanto a los colores, no conviene utilizar más de dos: uno para el bloque de texto general, y otro para resaltar cosas importantes, así como para enlaces y botones. Asegúrese de que los colores que ha elegido coincidan con el fondo y se vean bien si un usuario cambia a un modo oscuro.

Copiar el código HTML de la plantilla de correo electrónico desde un editor de texto o un sitio web

Problemas potenciales. Si usa Microsoft Word o algo por el estilo para crear texto para su correo electrónico y luego simplemente lo copia, corre el riesgo de detectar algún formato innecesario, que puede estropear el diseño de su correo electrónico. Y si copia imágenes o algunas partes de texto de un sitio web, es posible que se agreguen elementos JavaScript o Flash a su correo electrónico.

Prevención. Para codificar un correo electrónico, use editores de texto que no agreguen su propio formato, como el Bloc de notas para Windows o TextEdit para Mac. También hay algunas herramientas en línea que pueden limpiar su formato, como TextCleanr. También puede usar una herramienta HTML Cleaner, que le permite crear un correo electrónico en un editor fácil de usar y verificar el código al mismo tiempo.

Uso de códigos de color HEX de tres dígitos

Problemas potenciales. Aunque los formatos de color de tres y seis dígitos deberían ser equivalentes, a veces los clientes de correo electrónico representan un formato de tres dígitos de una manera ligeramente diferente. Por ejemplo, con Gmail, corre el riesgo de que se vuelva morado en lugar del negro que planeó: el color: #000 convierte en color: #500050 .

Prevención . Como regla general, apéguese al formato de color de seis dígitos y asegúrese de usarlo en todo el correo electrónico.

Archivos adjuntos

Problemas potenciales. Por lo general, los spammers y los piratas informáticos adjuntan algunos archivos a sus correos electrónicos. Si agrega un archivo adjunto, puede considerarse una amenaza para la seguridad.

Prevención. Proporcione un enlace a una página de carga de archivos en lugar de agregar el archivo directamente al correo electrónico.

A continuación, se muestra un ejemplo de cómo puede otorgar a los usuarios acceso al archivo que prometió. Preste atención a cómo se designa el enlace: debe ser un fragmento de texto comprensible en el que se pueda hacer clic para que el usuario sepa lo que sucederá cuando toque el enlace.

Falta el texto alternativo

Problemas potenciales . Algunos usuarios deshabilitan la descarga de imágenes en su navegador. Si reciben un correo electrónico, que incluye imágenes sin texto alternativo, solo verán espacios en blanco en lugar de imágenes y no entenderán el sentido del correo electrónico.

Funciona igual cuando la conexión a Internet de alguien es demasiado baja para descargar las imágenes lo suficientemente rápido. El texto alternativo ayuda a resolver este problema de alguna manera: cuando la descarga de las imágenes sale mal, un usuario puede ver un texto en su lugar.

Prevención. Agrega un atributo alt a todas las imágenes que usas. Asegúrese de hacerlo correctamente, agregándolo a una etiqueta img : <img alt="text"> . Limite el texto alternativo a 125 caracteres, incluidos los espacios. Por lo general, basta con agregar un par de palabras que describan la imagen con precisión. Si le queda algo de espacio, puede agregar algo de contexto a esta descripción.

Eche un vistazo a un extracto de un correo electrónico de Sephora.

Si consulta el código de este correo electrónico, puede encontrar un CTA como texto alternativo para la imagen. Incluso si los usuarios no ven la imagen, comprenderán lo que ofrece la marca.

Diseño de solo imagen

Problemas potenciales. Si su correo electrónico solo consta de imágenes y no tiene texto, puede tener problemas con la capacidad de entrega, la visualización y más. Por ejemplo, si un usuario bloquea la descarga de imágenes, literalmente no verá nada en su correo electrónico. En segundo lugar, muchas imágenes aumentan el tamaño del cuerpo del correo electrónico y es probable que los clientes de correo electrónico lo recorten. En tercer lugar, un usuario no podrá encontrar su correo electrónico en una carpeta mediante la búsqueda por palabra.

Prevención. Al crear un correo electrónico, combine texto e imágenes. No olvide agregar una versión de texto sin formato del correo electrónico y texto alternativo para las imágenes; tenga en cuenta los otros consejos que le hemos dado anteriormente.

Eche un vistazo a este correo electrónico de Ecwid. Tiene un diseño receptivo que incluye el diseño de la tabla y las consultas de medios, como max-width: 570px . El correo electrónico combina diferentes tipos de contenido: una imagen y un texto coloridos y cautivadores. Se utiliza el formato de color de seis dígitos, por ejemplo, color:#979797 o color:#4A4A4A . No hay muchas imágenes en el correo electrónico, por lo que el tamaño de su cuerpo no es demasiado grande. Además, no encuentre enlaces abreviados ni redireccionamientos en el correo electrónico. En general, este correo electrónico cumple con la mayoría de las recomendaciones dadas anteriormente.

Por lo tanto, hemos echado un vistazo a los errores de codificación de correo electrónico HTML más comunes. Aplique nuestros consejos y no olvide probar sus correos electrónicos antes de enviarlos: use al menos tres clientes de correo electrónico populares para abrir su correo electrónico; si es posible, compruébalo también a través de diferentes dispositivos. Los emuladores también serán útiles.

Una forma más de evitar errores de codificación de correo electrónico

Hay una verdad: no cometerá errores de codificación HTML si no codifica. Afortunadamente, el diseño de correo electrónico sin código lo está esperando con SendPulse.

Con nuestro editor intuitivo de arrastrar y soltar, ya hemos evitado que cometa errores de codificación de correo electrónico. Simplemente agregue imágenes, texto o video a su correo electrónico, configure las fuentes y los colores para que coincidan con el estilo de su marca y agregue enlaces a sus páginas de redes sociales.

Para simplificar aún más todo, puede elegir entre nuestras plantillas de correo electrónico gratuitas. Todos los correos electrónicos creados con SendPulse son receptivos, por lo que se verán bien sin importar qué dispositivo elija el usuario para abrirlos.

Lista de verificación para evitar errores comunes de codificación de correo electrónico HTML

A continuación, encontrará las reglas principales sobre cómo evitar errores comunes de codificación de correo electrónico HTML. Siguiendo estas reglas, puede evitar problemas con la capacidad de entrega y la visualización de sus correos electrónicos.

• Agregue una versión de texto sin formato a sus correos electrónicos.
• No utilice JavaScript, ActiveX, Flash o más. Si necesita agregar algún video o audio, cárguelo en un sitio web y proporcione un enlace.
• Trate de evitar los redireccionamientos para no aumentar el tiempo de carga de una página web.
• No utilice enlaces abreviados: transforme un fragmento de texto o una imagen en un enlace utilizando HTML.
• Intente limitar el tamaño del cuerpo de su correo electrónico a 100 KB, o al menos verifique los límites de su proveedor de envío y los clientes de correo electrónico que más utilizan sus suscriptores.
• Elija fuentes compatibles con correo electrónico, como Arial, Comic Sans MS, Courier New, Times New Roman o Verdana.
• Trate de no combinar más de dos colores en un correo electrónico; de lo contrario, parecerá una distracción.
• No copie texto e imágenes para su correo electrónico desde editores de texto como MS Word o sitios web: existe el riesgo de detectar algún formato innecesario.
• Utilice un formato de color de seis dígitos.
• No adjunte archivos; en su lugar, proporcione un enlace a una página de carga de archivos.
• No olvide agregar texto alternativo a las imágenes.
• No envíe correos electrónicos solo con imágenes, agregue siempre algo de texto.
• No olvide probar un correo electrónico antes de iniciar una campaña. Utilice al menos tres clientes de correo electrónico y dispositivos diferentes.

Y para no tener que pensar en todo eso, ¡comience a usar SendPulse gratis!