Fallbacks para el correo electrónico interactivo: cómo combatir el soporte limitado para la interactividad

Por tercer año consecutivo, las experiencias de correo electrónico interactivo fueron elegidas como una de las tendencias de diseño de correo electrónico más populares . Entonces, ¿por qué no vemos correos electrónicos más interactivos en nuestras bandejas de entrada? Para muchas marcas, el soporte limitado del proveedor de la bandeja de entrada es la razón principal por la que no envían campañas más interactivas.

No tiene que temer el apoyo limitado si tiene una alternativa. Hay muchos métodos que lo ayudan a crear correos electrónicos atractivos e interactivos donde sean compatibles, al mismo tiempo que garantizan una experiencia funcional y hermosa en todas las demás bandejas de entrada.

Por qué son importantes las alternativas

La compatibilidad con HTML y CSS varía según los clientes de correo electrónico, y es posible que muchos de los elementos HTML y CSS que puede utilizar para potenciar la interactividad en el correo electrónico no sean compatibles en todas partes.

Si no tiene en cuenta los casos en los que no es compatible, su correo electrónico puede parecer roto. Veamos este ejemplo de un hermoso carrusel de imágenes interactivo:

El carrusel interactivo con sus poderosas imágenes se ve muy bien en Apple Mail, lo que permite a los suscriptores hojear las imágenes usando las flechas o casillas de verificación. Pero así es como se muestra ese mismo correo electrónico en Yahoo! Envíe un correo electrónico si no hay una alternativa:

Sin respaldo, el correo electrónico parece roto y probablemente no verá muchos clics. ¡No queremos que eso suceda! Así que veamos cómo podemos hacer que los correos electrónicos interactivos funcionen en todas partes con alternativas a prueba de balas.

Usando el poder del marco hide and show

El marco de ocultar y mostrar es la táctica más básica y común para configurar la interactividad y las alternativas en el correo electrónico. Si bien es simple, sigue siendo muy poderoso.

El marco hace exactamente lo que sugiere su nombre: oculta la interactividad para los clientes que no lo admiten y, en su lugar, muestra un respaldo.

Configura dos secciones completamente separadas en su HTML: una para su contenido interactivo y otra para su respaldo estático. De esa manera, no solo puede especificar esos dos tipos diferentes de contenido, sino también configurar diferentes enlaces y un seguimiento diferente para cada versión de su correo electrónico, lo que hace posible rastrear y comparar versiones interactivas versus estáticas. Piense en ello como una prueba A / B dentro de un correo electrónico.

Veamos cómo hace que esto suceda dentro de su código de correo electrónico con este ejemplo simplificado (o consulte CodePen):

 <!-- start INTERACTIVE_SECTION --> <!--[if (!mso)&(gte IE 10)]> <! -- --> <div > <div class=" content " > This is where the Interactive Content goes. </div> </div> <!--<![endif]--> <!-- end INTERACTIVE_SECTION --> <!-- start FALLBACK_SECTION --> <div > This is where the Fallback Content goes. </div> <!-- end FALLBACK_SECTION -->

La sección interactiva utiliza declaraciones condicionales para ocultar el contenido de los clientes de correo electrónico que no admiten la interactividad. Esto incluye declaraciones condicionales de MSO que ocultarán todo entre ellas de las versiones de Outlook que no admiten la interactividad, así como CSS en línea que oculta visualmente el contenido de otros clientes de correo electrónico no interactivos (ese es el código en verde). Luego, el código resaltado en rojo oscuro extrae estilos que anulan el código de la sección interactiva y, en su lugar, obligan a la sección de respaldo a ocultarse.

Queríamos llamar "visualmente" porque el contenido todavía se carga, incluso si no es visible. Es importante tener esto en cuenta porque todas las imágenes y otros archivos que pueda incluir en la sección interactiva afectarán el tiempo de carga del diseño de reserva. Como solución alternativa, intente aprovechar las mismas imágenes tanto como sea posible para ambos diseños.

Para el contenido, puede completar la sección de respaldo con cualquier código de correo electrónico convencional o simplemente envolver esos <div> s alrededor de cualquier código de correo electrónico estático existente que pueda tener. Para la sección interactiva , siéntase libre de jugar con cualquier tipo de técnicas solo de CSS que esté interesado en implementar. ¡La búsqueda de carruseles, puntos de acceso, cuestionarios, efectos de desplazamiento, etc. solo de CSS puede brindar una gran inspiración!

Utilizar hojas de estilo vinculadas externamente

Mientras tanto, el CSS al que se hace referencia en el código rojo oscuro está alojado en un archivo CSS vinculado externamente que contiene un código como este:

 #interactive { display: block !important; max-height: inherit !important; overflow: visible !important; } #staticfallback { display: none !important; } #interactive .content { Font-family: Arial, Helvetica, sans-serif; font-size: 20px; line-height: 30px; display: block; color:#ffffff; }

Los estilos #interactive y #staticfallback tienen todos ! Important; reglas para permitirles anular el CSS en línea en su HTML. Estas son las declaraciones de estilo clave que ocultan y muestran sus diseños. La declaración #interactive .content representa el código que usaría para diseñar su contenido interactivo, aunque los diseños interactivos generalmente requerirían más que este ejemplo para funcionar. Por ejemplo, si desea diseñar un CTA que solo aparece en el diseño interactivo, debe crear una nueva declaración como #interactive .cta (o .interactive-cta , siempre que el selector sea exclusivo de la sección interactiva) y agregar sus estilos al archivo CSS.

Luego, agregaría una etiqueta de enlace a su HTML que haga referencia a esta hoja de estilo externa en la parte inferior de su etiqueta <head> , como en este ejemplo simplificado.

 <head> <style type="text/css"> /* Boilerplate Styles */ /* Responsive Media Query Styles */ /* Progressive Enhancement Styles */ </style> <!-- External CSS for Interactive Version --> <link rel="stylesheet" type="text/css" href=" http://your-url.com/hideshow.css "> </head>

Dominar la especificidad de CSS

Como puede ver, hay muchos trucos de especificidad de CSS involucrados. CSS en sí significa " Hojas de estilo en cascada", que se refiere al orden en el que su CSS Y la especificidad determina qué regla es la que gana. Por lo tanto, la ubicación de la etiqueta <link> después de todo su CSS incrustado es crucial para permitir que todos los estilos del archivo CSS externo anulen los estilos anteriores.

Entonces, ¿por qué un archivo CSS vinculado externamente, en lugar de CSS incrustado o en línea? Porque si un cliente de correo electrónico admite esta función, lo más probable es que admita todos los estilos contenidos en el archivo CSS externo. Mantener su CSS interactivo separado de esta manera significa que reduce la probabilidad de que sus estilos interactivos entren en conflicto con su código no interactivo, por lo que no terminará con resultados no deseados.

La guinda del pastel: Optimice para un soporte interactivo limitado con mejoras progresivas

Una vez que haya configurado sus dos versiones principales, la interactiva y la alternativa estática, puede continuar y mejorar su versión alternativa estática con algunos elementos interactivos básicos. Aquí está la versión estática del correo electrónico anterior, más atractiva usando efectos de desplazamiento para el logotipo y la CTA:

Puede aprender a crear estos efectos de desplazamiento simples pero poderosos aquí .

¿QUIERES MÁS RECURSOS COMO ESTE?

Obtenga los mejores consejos, estadísticas y recursos de diseño y marketing por correo electrónico directamente en su bandeja de entrada y manténgase a la vanguardia de la innovación del correo electrónico.

Manténgase informado →