Tablas HTML en el correo electrónico: ¿Qué podría salir mal?

Si ha estado en la industria del correo electrónico durante algún tiempo, es probable que haya experimentado una serie de problemas con sus campañas de correo electrónico. Desde imágenes perdidas hasta problemas de capacidad de entrega, el marketing por correo electrónico está plagado de desafíos. Sin embargo, es posible que no hayas considerado lo que puede salir mal con las tablas (el código real) que está en la base de tus correos electrónicos.

Desafortunadamente, hay muchas cosas que pueden salir mal con las tablas HTML. Hoy, queríamos desglosar algunos de los problemas más comunes que se ven con las tablas HTML y brindarle algunos consejos para garantizar que no encuentre los mismos problemas en sus propios correos electrónicos.

Por que usamos tablas

Primero, un repaso rápido sobre por qué usamos tablas HTML para codificar correos electrónicos. Como discutimos en el pasado, las campañas de marketing por correo electrónico requieren sus propias consideraciones especiales de codificación. Si bien la web y el correo electrónico se basan en las mismas tecnologías (HTML y CSS), las aplicaciones de correo electrónico no se adhieren a los mismos estándares que los navegadores web. Cada aplicación de correo electrónico tiene su propio motor de procesamiento que determina qué código es compatible y cómo se muestran los correos electrónicos. La mala noticia para nosotros es que todos esos motores de renderización admiten diferentes etiquetas HTML y propiedades CSS.

Debido a esto, en gran medida no podemos utilizar los mismos principios de codificación que se utilizan en el diseño web. Para garantizar que los correos electrónicos se muestren correctamente en la mayoría de los clientes de correo electrónico, tenemos que usar tablas HTML para crear la estructura de una campaña de correo electrónico.

Aunque esto ha cambiado recientemente, especialmente con la importante actualización de Gmail el año pasado, algunos clientes de correo electrónico aún no admiten mucho HTML y CSS. El más notable: la familia de clientes de correo electrónico Outlook de Microsoft, que utilizan Microsoft Word como motor de renderizado. Dado que Outlook sigue siendo muy popular (actualmente el número 5 en nuestro rastreador de cuota de mercado de clientes de correo electrónico), los diseñadores de correo electrónico todavía tienen que usar tablas de alguna manera si quieren que sus campañas se muestren correctamente para los suscriptores.

Y cuando tenemos que confiar en tablas HTML, hay una serie de cosas que pueden salir mal ...

Haciendo las cosas complicadas

Uno de los problemas más comunes que vemos con el uso de tablas son los diseños demasiado complejos. Esto es especialmente cierto para las plantillas de correo electrónico heredadas que no se han actualizado en algunos años.

Hasta hace poco, la mayoría de los correos electrónicos se creaban con muchas tablas. Tablas dentro de tablas dentro de tablas, una práctica conocida como anidamiento.

Cuando anida varias tablas dentro de otra tabla, es probable que presente problemas dentro de su código. Es muy fácil colocar accidentalmente una tabla en el lugar equivocado o pegar una etiqueta HTML esencial al cambiar las cosas. Y para algunos clientes (mirándolo a usted, Lotus Notes), puede ver que los correos electrónicos se procesan mal cuando anida las tablas con demasiada profundidad. Es por esta razón que recomendamos crear correos electrónicos con un enfoque modular, algo sobre lo que escribió nuestro amigo Brian Graves. Y trate de mantener las tablas anidadas al mínimo. Anidar mesas es casi inevitable, pero mantener la profundidad de anidación a un máximo de 4-6 mesas ayudará a evitar cualquier problema.

Al igual que el anidamiento complejo, los diseños demasiado complejos también pueden ser problemáticos. No es raro ver correos electrónicos de varias columnas, pero cuando comienza a agregar demasiadas columnas a un correo electrónico, se está preparando para un posible error.

Algunos clientes de correo electrónico tienen problemas incluso con las matemáticas básicas. Se sabe que ciertas versiones de Microsoft Outlook agregan espacio adicional a las columnas de la tabla, rompiendo los diseños de correo electrónico. Si bien puede pensar que tiene sentido usar cuatro celdas de tabla configuradas en anchos del 25%, Outlook agregará espacio adicional a esas celdas y hará que el diseño sea más ancho que el 100%. El correo electrónico resultante colocará algunas de esas celdas en su propia fila, arruinando su campaña de correo electrónico bien diseñada y perfectamente planificada.

Mantener los diseños de su correo electrónico simples ayuda a evitar problemas potenciales con sus campañas y mantiene contentos a sus suscriptores.

Etiquetas faltantes

Los correos electrónicos suelen contener mucho código. Y la mayoría de los equipos de correo electrónico trabajan en horarios muy rápidos y ajustados. Esta combinación puede dar lugar a errores que pueden arruinar una campaña de correo electrónico.

Como repaso rápido, veamos cómo se escribe HTML. HTML consta de etiquetas que rodean el contenido. En la mayoría de los casos, el marcado adecuado requiere una etiqueta de apertura y cierre. Tome esta tabla HTML como ejemplo:

 <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>

Puede ver que hay tres etiquetas diferentes: la tabla, la fila de la tabla y la celda de la tabla. Estas etiquetas se abren y luego se cierran (indicadas con el símbolo /).

Aunque HTML es un lenguaje de marcado tolerante, los clientes de correo electrónico y sus motores de renderizado a menudo se ahogan cuando faltan las etiquetas HTML. Desafortunadamente, la falta de etiquetas de cierre es un problema muy común en los correos electrónicos. Esos tiempos de respuesta rápidos pueden hacer que los diseñadores de correo electrónico codifiquen demasiado rápido y se olviden de cerrar una tabla, fila o celda. Si bien esto puede estar bien en algunos clientes, en otros conducirá a campañas rotas.

Herramientas como el servicio de validación de marcado W3C pueden ayudar a identificar las etiquetas faltantes. Las etiquetas faltantes y el marcado con formato incorrecto también son la razón por la que recomendamos usar plantillas de correo electrónico o herramientas como Parciales y Fragmentos de constructores para ayudar a crear correos electrónicos. No solo ayudan a garantizar que su código esté bien escrito y probado correctamente, sino que tienen el beneficio adicional de acelerar su flujo de trabajo, lo que le permite cumplir con esos plazos ajustados y mantener a su equipo feliz.

Atributos faltantes

Al igual que las etiquetas faltantes pueden causar problemas, los atributos HTML faltantes en las tablas pueden dar lugar a diseños de aspecto extraño.

Los atributos HTML son propiedades adicionales que se pueden establecer en etiquetas HTML. Estas propiedades controlan aspectos como el ancho y la altura de los elementos, la alineación e incluso el espaciado. El espaciado inesperado alrededor de las celdas de la tabla es uno de los problemas más comunes que verá con las tablas HTML.

Casi todas las aplicaciones de correo electrónico (y navegadores web) agregan sus propios estilos a las tablas HTML. Las tablas HTML se utilizan tradicionalmente para mostrar datos tabulares y no estaban diseñadas originalmente para diseñar y diseñar contenido. Debido a esto, necesitamos anular el comportamiento predeterminado de los navegadores y las aplicaciones de correo electrónico para garantizar que las tablas se muestren correctamente.

Al agregar los atributos de espacio de celdas y relleno de celdas a la tabla, y establecer ambos en cero, podemos estar seguros de que ningún cliente de correo electrónico agregará espacio adicional a las celdas de la tabla o alrededor de ellas.

 <table cellpadding="0" cellspacing="0"> </table>

Del mismo modo, si tiene problemas con el ancho de la tabla o la alineación del contenido de la tabla, debe asegurarse de no olvidar el ancho o alinear los atributos en las tablas o celdas de la tabla.

Aprenda a solucionar problemas

¿Quiere aprender cómo solucionar sus propias campañas de correo electrónico y evitar problemas embarazosos para sus suscriptores? Únase a nosotros en Litmus Live para un taller completo sobre solución de problemas de correo electrónico como un profesional. Repasaremos los errores más comunes del correo electrónico, sus soluciones y los mejores métodos para solucionar problemas de campañas.

¡Consiga sus entradas para Litmus Live! ¡Regístrese hoy para celebrar el correo electrónico con nosotros! Regístrese ahora →