Tutorial: cómo incorporar imágenes GIF en los email

¿Has notado cómo los email con animaciones y movimiento son cada vez más frecuentes en la bandeja de entrada? Nosotros sí. En calidad de diseñador o profesional del marketing por email, es posible que hayas intentado usarlos para aumentar las conversiones a través del email. Pero también hemos notado que los profesionales del marketing no siempre incorporan GIF animados en los mensajes usando las mejores prácticas de diseño.

Lo interesante es que los GIF animados son en realidad muy fáciles de usar en el email: pueden usarse como cualquier otro archivo de imagen, y son perfectamente compatibles con la mayor parte de los clientes de email. El problema con muchos GIF en los email es que los llamados a la acción en los mensajes a menudo están dentro del GIF, como en este email de Ann Taylor:

El «GO» de llamado a la acción no es en realidad un botón: es una parte de la imagen. Cualquier clic, encima, debajo o alrededor del «botón», tendrá el mismo efecto: te llevará a una página de aterrizaje en el sitio de Ann Taylor, porque el enlace se extiende a todo el GIF animado. A los lectores les resulta así muy fácil recibir más información (y posiblemente hacer una compra) con solo tocar o hacer clic en prácticamente cualquier punto. Pero esto también puede ser problemático. Si el GIF animado no se presenta correctamente por una u otra razón, el mensaje pierde toda su función. Esto puede ocurrir si…

• Hay distorsiones del tamaño de la imagen en el dispositivo lector móvil
• En el cliente donde se lee email no está activada la visualización de imágenes.
• Un programa de bloqueo de anuncios bloquea el GIF.
• El GIF es un archivo grande y el lector no espera a que acabe de cargarse

Además, los usuarios de Outlook lo más probable es que sólo vean una imagen fija, porque la animación no funcionará. Por estas razones y otras, siempre recomendamos adoptar en el diseño email un enfoque que optimice el HTML y no se base únicamente en imágenes. ¿Quieres saber cómo utilizar tus impresionantes GIF animados en el email y asegurarte al mismo tiempo de que tus llamados a la acción siempre se muestren? Sigue leyendo.

Hoy vamos a recrear el siguiente mensaje de Banana Republic y a mostrarte cómo optimizar el uso de GIF animados en un email para asegurarte de que tu contenido aparece.

Aquí está nuestro resumen en un tutorial de vídeo:

Y, como referencia, aquí está el mensaje completo de Banana Republic:

En el email de Banana Republic, el mensaje clave, que incluye el llamado a la acción, se encuentra en un solo bloque de imagen, como en el email de Ann Taylor antes visto. Casi todo el mensaje —toda la parte negra— es un GIF animado:

Esto significa que si la visualización de imágenes está desactivada o el GIF se bloquea o no se carga, se pierde todo el mensaje.

Vamos a arreglar eso.

El GIF animado en este mensaje es grande. Así que incluso si aparece en la bandeja de entrada, es posible que no se cargue, o que no se cargue completo, de modo que el mensaje acaba no leído. Para evitar estos problemas, una buena práctica consiste en recortar la animación GIF, cortando las partes de la imagen que no necesitan animación. En el mensaje de Banana Republic, eso significa que queremos aislar la parte central de la imagen, la parte que se mueve —en el cuadro rosa abajo— y recrear el resto con texto y HTML.

Para recortar la imagen rápidamente, usamos ezGIF.com. Y aquí tenemos nuestro nuevo GIF animado:

Hoy empezaremos con una plantilla básica de una sola columna en el editor de email BEE.

La estructura predefinida de los bloques de contenido es muy similar a lo que necesitamos: texto, seguido de la imagen, seguido por más texto y seguidamente un botón de llamado a la acción.

No hay necesidad de realizar cambios en la estructura, pues los bloques de contenido que necesitamos ya están presentes, así que simplemente empezamos por llenar el texto, asegurándonos de dar una alineación centrada a todo a medida que progresamos. Borramos además los bloques de texto que no necesitamos, como el marcador de posición de los subtítulos en la parte superior.

Es el momento de arrastrar el GIF animado recortado y soltarlo en el marcador de posición para imágenes, como haríamos con una imagen cualquiera.

Ahora que nuestro contenido está en su lugar, podemos empezar a formatear.

A partir del bloque de contenido «SWEET TREAT», establecemos el color blanco para la fuente y aumentamos su tamaño a 36 píxeles. Proseguimos ahora estableciendo el negro como color de fondo del mensaje, como en el GIF del mensaje de Banana Republic.

Para hacerlo, simplemente definimos los colores de fondo en el menú de Propiedades de fila a la derecha, estableciendo el fondo de la fila transparente y el fondo del contenido negro.

Damos las mismas Propiedades de fila a todos los bloques de contenido que siguen, incluyendo el color de fondo por detrás del GIF animado.

Ahora el mensaje se presenta como un bloque de color ininterrumpido. Para terminar, formateamos el resto del texto.

Aún tenemos que hacer algunos ajustes finales de relleno para tener los espacios correctos, y actualizar nuestro botón de CTA, pero nuestro mensaje ya es casi idéntico a la imagen de Banana Republic; sin embargo, lo hemos hecho con fuentes seguras para el email y con colores de fondo HTML.

Nuestro mensaje tiene un aspecto cuidadísimo, y hemos reducido significativamente el riesgo de que se pierda si no se ve el GIF. Los colores, el texto y lo más importante, el botón de llamado a la acción, sí aparecerán.

Alerta de spoiler: no necesitamos codificar una sola línea de HTML ni hacer nada en absoluto para asegurarnos de que nuestro botón de llamado a la acción «MÁS INFORMACIÓN» funcionará en toda clase de dispositivos y de clientes de email. En el editor BEE, todos los botones están hechos a prueba de bala por defecto, lo cual significa que no se basan en una imagen, por lo cual siempre aparecerán, serán adaptativos y se verán muy bien.

Todo lo que tenemos que hacer es actualizar el estilo en el menú de Propiedades de contenido a la derecha. En primer lugar, damos al botón un color de fondo blanco, y  cambiamos el color de la fuente a negro.

Hecho esto, el botón presenta el siguiente aspecto:

Entonces formateamos el texto, aumentando el tamaño y de la fuente y poniéndola en negrita. Cuando aumentamos el tamaño, el CTA aparece en dos líneas:

Pero, de nuevo en el menú de Propiedades de contenido, aumentamos el ancho a un 35%:

Como vemos, el botón de Banana Republic tiene unos ángulos muy marcados, así que el nuestro debería ser menos redondeado. Para cambiar la forma del botón, disminuimos el radio del borde hasta 0.

¡Así queda nuestro mensaje! Casi está listo.

El texto y la parte inferior del botón de CTA están demasiado cerca. Para crear un poco de espacio, ajustamos el relleno por encima y por debajo de cada estructura de contenidos.

Simplemente hacemos clic en una estructura (botón, texto, imagen), vamos al menú de Propiedades de contenido, y nos aseguramos de ver Más opciones en la sección Relleno en Espacios:

Ajustamos entonces el relleno por encima y por debajo del botón, y por encima y por debajo del bloque de contenido «Solo Online».

Así queda el email final:

Su aspecto en la vista previa del móvil es perfecto:

Hemos recreado el mensaje de Banana Republic casi exactamente, con su diseño moderno y ágil y con su GIF animado, pero hemos optimizado nuestro uso de los colores HTML de fondo y los botones de llamado a la acción, de modo que tenemos la seguridad de que se verá perfectamente en toda clase de dispositivos y de clientes de email.

Esperamos que te haya gustado este taller sobre el uso de imágenes gif en email. ¿Alguna pregunta? Puedes hacernos llegar tus dudas a continuación en los comentarios. ¡Y asegúrate de intentarlo en el editor de email BEE!