Marketing por correo electrónico y automatizaciónVídeos de marketing y ventas

Comprender los desafíos (y frustraciones) del diseño de correo electrónico HTML

Si abre un sistema de gestión de contenidos para crear páginas web, es un proceso bastante sencillo. Compatibilidad con navegadores web modernos HTML, COy JavaScript según estrictos estándares web. Y son sólo algunos de los navegadores de los que los diseñadores deben preocuparse. Hay excepciones, por supuesto... y algunas soluciones simples o funciones específicas para esos navegadores.

Debido a los estándares generales, es sencillo desarrollar creadores de páginas en sistemas de gestión de contenidos. Los navegadores cumplen con HTML5, CSS y JavaScript... y los desarrolladores pueden crear soluciones increíblemente sólidas para crear páginas web que respondan a los dispositivos y sean consistentes en todos los navegadores. Hace dos décadas, prácticamente todos los diseñadores web utilizaban software de escritorio para desarrollar páginas web. Ahora bien, es bastante poco común que un diseñador web desarrolle una página web; la mayoría de las veces, desarrolla plantillas y utiliza editores en sistemas de contenido para completar el contenido. Los editores de sitios web son fantásticos.

Pero los editores de correo electrónico están lamentablemente atrasados. Este es el por qué…

Diseñar correos electrónicos HTML es mucho más complejo que para un sitio web

Si su empresa quiere diseñar un hermoso correo electrónico HTML, el proceso es exponencialmente más complejo que crear una página web por varias razones:

  • sin estándares – NO existe un cumplimiento estricto de los estándares web por parte de los clientes de correo electrónico que muestran correo electrónico HTML. Prácticamente todos los clientes de correo electrónico y cada versión de cada cliente de correo electrónico actúan de manera diferente. Algunos respetarán CSS, fuentes externas y HTML moderno. Otros respetan algunos estilos en línea, solo muestran una colección de fuentes e ignoran todo excepto las estructuras basadas en tablas. Es bastante ridículo que nadie esté trabajando en este tema. Como resultado, diseñar plantillas que se representen en clientes y dispositivos de manera consistente se ha convertido en un gran negocio y puede resultar bastante costoso.
  • Seguridad del cliente de correo electrónico – Recientemente, Apple Mail se actualizó para bloquear todas las imágenes en los correos electrónicos HTML de forma predeterminada que no estén incrustadas en el correo electrónico. O les da permiso para cargar un correo electrónico a la vez o debe habilitar la configuración para deshabilitar esta configuración. Además de la configuración de seguridad del cliente de correo electrónico, también existen configuraciones corporativas.
  • Seguridad IT – Su equipo de TI puede implementar conjuntos de reglas estrictos sobre qué objetos se pueden representar realmente en un correo electrónico. Si sus imágenes, por ejemplo, provienen de un dominio específico que no está en la lista blanca de un firewall corporativo, las imágenes simplemente no aparecerán en su correo electrónico. En ocasiones, hemos tenido que desarrollar correos electrónicos y alojar todas las imágenes en el servidor de la corporación para que sus propios empleados pudieran ver las imágenes.
  • Proveedores de servicios de correo electrónico – Para empeorar las cosas, los creadores de correo electrónico que envían correos electrónicos a los proveedores de servicios (ESPs) en realidad introducen problemas en lugar de limitarlos. Si bien promocionan que su editor es lo que ves es lo que obtienes (WYSIWYG), a menudo ocurre lo contrario con el diseño de correo electrónico. Obtendrá una vista previa del correo electrónico en su plataforma y el destinatario verá todos los problemas de diseño. Las empresas a menudo, sin saberlo, optan por un editor rico en funciones en lugar de uno bloqueado, pensando que uno tiene más funciones. Lo contrario es cierto... si desea correos electrónicos que se muestren de manera consistente en todos los clientes de correo electrónico, cuanto más simple, mejor, porque menos cosas pueden salir mal.
  • Representación del cliente de correo electrónico – Cientos de clientes de correo electrónico procesan HTML de manera diferente en computadoras de escritorio, aplicaciones, dispositivos móviles y clientes de correo web. Si bien el ingenioso editor de texto de su proveedor de servicios de correo electrónico puede tener una configuración para incluir un encabezado en su correo electrónico, el relleno, los márgenes, la altura de la línea y el tamaño de fuente pueden diferir para cada cliente de correo electrónico. Como resultado, debe simplificar el HTML y codificar cada elemento de manera diferente (consulte el ejemplo a continuación) (y, a menudo, escribir excepciones que son específicas del cliente de correo electrónico) para lograr que un correo electrónico se procese de manera consistente. No hay tipos de bloques simples, hay que hacer diseños basados ​​en tablas que son el equivalente a crear para la web hace treinta años. Es por eso que cualquier diseño nuevo requiere tanto desarrollo como pruebas de dispositivos y clientes de correo electrónico cruzado. Lo que ves en tu bandeja de entrada puede ser totalmente diferente de lo que veo en mi bandeja de entrada. Es por eso que herramientas de renderizado como Correo electrónico en ácido or Tornasol son imprescindibles para garantizar que sus nuevos diseños funcionen en todos los clientes de correo electrónico. Aquí hay una breve lista de clientes de correo electrónico populares y sus motores de renderizado:
    • Uso de Apple Mail, Outlook para Mac, Android Mail y iOS Mail WebKit.
    • Uso de Outlook 2000, 2002 y 2003 Internet Explorer.
    • Uso de Outlook 2007, 2010 y 2013   (¡sí, Palabra!).
    • Los clientes de correo web usan el motor respectivo de su navegador (por ejemplo, Safari usa WebKit y Chrome usa Blink).

Un ejemplo de HTML para Web vs. Correo electrónico

Si desea un ejemplo que ilustre la complejidad de diseñar en el correo electrónico versus la web, aquí hay un ejemplo perfecto del artículo de Mailbakery. 19 grandes diferencias entre correo electrónico y HTML web:

Enviar correo electrónico HTML

Debemos crear una serie de tablas que incorporen todo el estilo en línea necesario para colocar el botón correctamente y garantizar que se vea bien en todos los clientes de correo electrónico. También habrá una etiqueta de estilo adjunta en la parte superior de este correo electrónico para incorporar las clases.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left">
         <table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
            <tr>
               <td class="text-button"  style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
                  <a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

HTML web

Podemos utilizar una hoja de estilo externa con clases para definir el caso, la alineación, el color y el tamaño de una etiqueta de ancla que aparece como un botón.

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

Cómo evitar problemas de diseño de correo electrónico

Los problemas de diseño de correo electrónico se pueden evitar siguiendo un proceso decente:

  1. Prueba de plantilla – Comprender los clientes de correo electrónico que utilizan sus suscriptores y asegurarse de que su correo electrónico HTML esté completamente probado en dispositivos móviles y de escritorio es fundamental antes de implementar cualquier plantilla. Podemos diseñar un correo electrónico literalmente a partir de un diseño de Photoshop... pero dividirlo en un cliente de correo electrónico cruzado basado en tablas es esencial para implementar diseños de correo electrónico que sean óptimos y consistentes.
  2. Pruebas Internas – Una vez que su plantilla esté diseñada y probada, debe enviarse a una lista de semillas interna dentro de la organización para revisarla y aprobarla. Incluso es posible que desee comenzar con un subconjunto muy limitado de personas para asegurarse primero de que no haya problemas de firewall o de seguridad asociados con la representación interna del correo electrónico. Si se trata de crear una instancia en un nuevo proveedor de servicios de correo electrónico, es posible que incluso encuentre algunos problemas de filtrado o bloqueo asociados incluso con el envío de su correo electrónico a la bandeja de entrada.
  3. Versionado de plantillas – No cambie sus presentaciones o diseños sin trabajar en una nueva versión de su plantilla que pueda diseñarse, probarse e implementarse adecuadamente. A muchas empresas les encantan los diseños únicos para cada campaña... pero eso requiere que cada correo electrónico se diseñe, desarrolle e implemente para cada campaña. Esto agrega mucho tiempo al proceso interno de marketing por correo electrónico. Y corre el riesgo de no comprender qué elementos de su correo electrónico funcionan bien y cuáles no. La consistencia no es solo una forma de facilitar el proceso, también es importante para el comportamiento de sus suscriptores.
  4. Excepciones del proveedor de servicios de correo electrónico – Prácticamente todos los proveedores de servicios de correo electrónico tienen un medio para solucionar los problemas que presenta su creador de correo electrónico. A menudo, podemos agregar CSS sin procesar a una cuenta, o incluso tener un bloque de contenido que debe incluirse en cada correo electrónico, para que la empresa utilice el editor de correo electrónico incorporado y no rompa el diseño de su correo electrónico. Por supuesto, eso puede requerir algo de capacitación y control de procesos para implementar esos pasos y garantizar que se cumplan. O, literalmente, puede querer desarrollar su diseño de correo electrónico en una solución que se haya probado que funciona en todos los clientes y dispositivos, y luego volver a pegarlo en su proveedor de servicios de correo electrónico.

Plataformas de diseño de correo electrónico

Debido a que las plataformas de servicio de correo electrónico han hecho un trabajo deficiente en la construcción y el mantenimiento de constructores de clientes cruzados y dispositivos cruzados, han llegado al mercado varias plataformas excelentes. Uno que hemos usado mucho es stripo.

Stripo no es solo un generador de correo electrónico, también tiene una biblioteca de más de 900 plantillas que se pueden importar fácilmente. Una vez que diseñe el correo electrónico, puede enviarlo a más de 60 ESP y clientes de correo electrónico, incluidos Intuir Mailchimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlooky gmail. Lo mejor de todo es que las plantillas de Stripo vienen con pruebas de representación de correo electrónico incluidas para que puedas asegurarte de que hayan sido probadas y funcionen de manera consistente en más de 40 clientes de correo electrónico.

Inicie sesión en la demostración de Stripo Editor

Douglas Karr

Douglas Karr es CMO de AbrirINSIGHTS y el fundador de la Martech Zone. Douglas ha ayudado a docenas de nuevas empresas exitosas de MarTech, ha colaborado en la diligencia debida de más de $5 mil millones en adquisiciones e inversiones de Martech y continúa ayudando a las empresas a implementar y automatizar sus estrategias de ventas y marketing. Douglas es un orador y experto en transformación digital y MarTech reconocido internacionalmente. Douglas también es autor de una guía para principiantes y de un libro sobre liderazgo empresarial.

Artículos Relacionados

Volver al botón superior
Cerrar

Adblock detectado

Martech Zone puede proporcionarle este contenido sin costo porque monetizamos nuestro sitio a través de ingresos publicitarios, enlaces de afiliados y patrocinios. Le agradeceríamos que elimine su bloqueador de anuncios mientras visita nuestro sitio.