Una guía para los GIF animados en el correo electrónico
Publicado: 2021-02-24Como especialista en marketing por correo electrónico, siempre está tratando de mejorar sus campañas mediante el uso de texto, diseño e imágenes. Pero con tanta competencia por la atención de los suscriptores, no es de extrañar que desee algo que lo distinga, que incite a los lectores a hacer clic y preocuparse por su mensaje. ¿Una forma de hacer esto? GIF animados.
Agregar animación podría ser justo lo que necesita para aumentar la participación de los suscriptores. Los especialistas en marketing por correo electrónico como usted recurren cada vez más a los GIF animados en el correo electrónico para proporcionar ese interés adicional. Según nuestros datos del estado del correo electrónico de 2020, el 51,28% de los especialistas en marketing dijeron que están usando GIF animados al menos a veces en sus correos electrónicos de marketing.
Entonces, ¿cómo puedes participar en esta acción? En esta publicación de blog, cubriremos:
- Que es un GIF
- Los beneficios (con ejemplos inspiradores)
- Las desventajas de los GIF animados
- Cómo hacer GIF animados
- Soporte al cliente de correo electrónico y tiempos de carga
¿Qué es un GIF?
GIF, que significa Graphics Interchange Format, es un formato de imagen desarrollado por CompuServe en 1987. Debido al amplio soporte entre navegadores y clientes de correo electrónico, los GIF han sido un formato de imagen popular desde los primeros días de Internet.
Sin embargo, lo que es más importante, los GIF se pueden animar. Similar a cómo funciona un flipbook, los GIF muestran rápidamente una serie de imágenes para producir la ilusión de movimiento. En los primeros años de Internet, los GIF (y las etiquetas de marquesina y parpadeo) eran el método principal para agregar movimiento a una página web.
Mucho ha cambiado desde la década de 1990. Los GIF animados están disfrutando de un renacimiento tanto en la web como en el marketing por correo electrónico. Si bien todavía existe cierto debate sobre cómo se pronuncia realmente “GIF”, la mayoría estará de acuerdo en que los GIF pueden ser una excelente herramienta de marketing.
Los beneficios de los GIF animados en el correo electrónico
Ya sea que prefiera una "G" dura o que rime GIF con una determinada marca de mantequilla de maní, veamos por qué los GIF son tan útiles en los correos electrónicos.
Capte la atención de sus suscriptores
Agregar movimiento a su correo electrónico con un GIF es una excelente manera de captar la atención de sus suscriptores, indicarles una acción que desea que realicen o mantenerlos desplazándose para asegurarse de que reciban todo su mensaje.
Google usa un lindo GIF para celebrar a sus suscriptores.
Grammarly utiliza una animación sutil para llamar aún más la atención sobre su oferta.
Xfinity coloca su GIF más abajo en el correo electrónico para atraer a sus suscriptores y animarlos a desplazarse.
Usamos un GIF de video falso para llamar la atención sobre nuestro video y hacer que los suscriptores se interesen en hacer clic para ver más.
Muestra tus productos y servicios
Sabes que tu producto es genial. Asegúrese de que sus suscriptores también lo sepan. No hay nada como un GIF animado para mostrar cómo funciona su producto o servicio.
ILIA Beauty muestra su producto en acción con personas reales.
Webflow muestra su producto en acción para que los suscriptores sepan qué esperar.
Magic Spoon muestra sus diferentes sabores y un impresionante diseño de paquete.
Simplifica una idea compleja
Si una imagen vale más que mil palabras, probablemente una imagen animada valga aún más. Use un GIF animado para ilustrar una idea compleja o muestre a sus suscriptores que las cosas son aún más fáciles de lo que piensan.
Baggu llevó instrucciones de limpieza simples al siguiente nivel animándolas. Al hacer cuatro animaciones diferentes, los suscriptores deben desplazarse para ver la historia completa.
Encontrar la calma suena sencillo. Pero durante el año pasado, todos nos dimos cuenta de lo difícil que puede ser. Headspace te muestra cómo encontrar la calma con un GIF mejor de lo que nadie podría explicar con palabras.
Burlarse de algo nuevo o que vendrá pronto
¿Tiene algún contenido o producto nuevo que está a punto de lanzar? ¿Tiene una gran oferta pronto? Utilice un GIF animado para crear conciencia o interés en su producto, y haga que los suscriptores estén atentos a su próximo correo electrónico.
Apple se burla de una oferta extendida del Viernes Negro e insta a los suscriptores a "reservar las fechas" para comprar para que no se pierdan las ofertas.
La bicicleta eléctrica de Linus se insinúa en las sombras en este correo electrónico. Los suscriptores deberán hacer clic para ver el producto real.
Tinker adelanta tanto una venta de Black Friday como un reloj de edición limitada con este GIF animado para mantener a los suscriptores atentos al próximo correo electrónico con más información.
Las desventajas de los GIF animados
Tan maravillosos como son los GIF animados, no están exentos de fallas.
Falta de accesibilidad
Los GIF animados pueden plantear un problema en términos de accesibilidad por diversas razones.
Las velocidades de parpadeo de contenido entre 2 Hz y 55 Hz pueden dañar a los usuarios con epilepsia fotosensible. Además, los usuarios con discapacidad visual pueden tener dificultades para leer o revisar el contenido de un GIF antes de que cambie la animación. Por lo tanto, asegúrese de que sus GIF animados tengan transiciones suaves o no se animen de un cuadro al siguiente a una velocidad alta.
Y, dado que los GIF son archivos de imagen, siempre debe incluir texto alternativo apropiado para los usuarios que dependen de la tecnología de asistencia, como los lectores de pantalla. Las imágenes son inherentemente inaccesibles para muchas personas, por lo que proporcionar una copia y un contexto les permite comprender su mensaje con mayor claridad.
 | Cree correos electrónicos accesibles e inclusivos para todos sus suscriptores Obtenga la información y los consejos paso a paso que necesita para escribir, diseñar y codificar correos electrónicos que cualquier persona pueda disfrutar, independientemente de su capacidad. Aprende cómo → |
Poca transparencia de fondo
Si necesita aportar más color o algo de transparencia de fondo a su contenido animado, es posible que un GIF animado no sea el camino a seguir.
Los GIF no son elegantes cuando se trata de fondos transparentes. Pero no temas, puedes traer una alternativa animada al correo electrónico en forma de PNG animado (APNG). Asegúrese de tomar nota de los mismos consejos y trucos de compresión que compartimos a continuación, ya que a los APNG también les gusta acumular kilobytes (KB).
Y si está buscando otra alternativa a los GIF animados, es posible que desee explorar las animaciones CSS.
Cómo hacer un GIF animado para correo electrónico
La creación de GIF se puede realizar de varias formas. Puede utilizar creadores en línea que le permiten animar una selección de fotos o convertir un video en un GIF animado. O puede usar software como Adobe Photoshop o Adobe Animate para hacer que los diseños personalizados se muevan.
Mi forma preferida de crear GIF animados es trabajar con Adobe Animate. Esto nace de años de trabajo en Flash en el pasado. Cuando Flash se retiró, Adobe Animate asumió el control, conservando algunas de las funciones de Flash y brindando más opciones de salida como HTML5, video y GIF animado.
Así que me sumergiré en cómo hacer un GIF animado en Adobe Animate.
Crear con Adobe Animate
Paso 1: cree un nuevo archivo e introduzca las dimensiones
Para hacer un GIF en Adobe Animate, primero cree un nuevo archivo e ingrese las dimensiones que le gustaría que fueran. Consejo profesional: cree su animación al doble del tamaño para la pantalla retina, tal como lo haría para las imágenes estáticas.
Paso 2: Importa los gráficos a animar
Puede diseñar su animación directamente en el lienzo, utilizando las herramientas de dibujo y forma del software, creando una capa para cada elemento. Si creó el diseño para su animación en Adobe Illustrator, simplemente puede copiar y pegar sus gráficos vectoriales en su lienzo. De lo contrario, puede importar gráficos en Adobe Animate yendo a archivo> importar> importar al escenario. O si está importando un gráfico que se reutilizará varias veces, puede "importarlo a la biblioteca".
Paso 3: crea tu animación
Ahora puedes usar la línea de tiempo para crear tu animación. Hay muchas posibilidades con software como este, y sería difícil abordarlas todas en una sola publicación de blog. Sin embargo, existe una gran cantidad de recursos con muchas guías útiles en YouTube, en los tutoriales en línea de Adobe y dentro del propio software.
Recomendaría prestar especial atención al contenido en torno a los símbolos, la interpolación y la facilidad. Solo con estas tres funciones, puede crear animaciones muy atractivas que lo ayuden a captar la atención, impulsar su mensaje y deleitar a su audiencia. Todo ello mientras aporta gran cantidad de personalidad de marca a sus correos electrónicos.
Simbolos
Un símbolo es un gráfico, botón o clip de película que se crea una vez y luego se reutiliza seleccionándolo de la biblioteca.
Una vez que haya creado un símbolo, puede reutilizarlo dentro de su animación; esto se denomina instancia. Si tuviera que editar su símbolo, como cambiar el color, ese cambio se realizaría en todas las instancias (similar a los parciales de correo electrónico). Pero si tuviera que editar una instancia, su cambio solo se aplicaría a esa instancia.
Para los GIF animados, sugiero que solo convierta sus elementos de diseño en símbolos gráficos. Tanto los clips de película como los botones tienen su propia línea de tiempo adjunta, por lo que puede animarlos independientemente de la línea de tiempo principal. Sin embargo, como las animaciones creadas fuera de la línea de tiempo principal no se respetan cuando exporta su animación como GIF, tiene sentido seguir con los símbolos gráficos que solo se animan en la línea de tiempo principal.
Interpolación
La interpolación es la forma de animar de un estado a otro. Puede utilizar interpolaciones de forma, movimiento o clásicas.
Una interpolación de forma solo se puede utilizar con formas o elementos que haya dibujado en el lienzo o en los vectores importados mediante las preferencias del importador de IA (en lugar de como un mapa de bits). Esto se debe a que una interpolación de forma le permite alterar la forma de un objeto. Por ejemplo: puede agregar un círculo a un fotograma clave en su línea de tiempo, agregar un cuadrado en otro y luego transformar su círculo en su cuadrado con la interpolación de forma.
Las interpolaciones de movimiento se utilizan para crear movimientos de animación especificando diferentes valores entre el primer y el último fotograma. Con este tipo de interpolación, puede modificar las propiedades de un objeto, incluida la posición, el tamaño, el color, los efectos, los filtros y la rotación.
La interpolación clásica es muy similar a la interpolación de movimiento. Se transfirió de Flash y se conserva en Animate como una opción adicional. Esta es mi forma preferida de aplicar la interpolación de movimiento, ya que las técnicas de relajación (que se describen a continuación) son un poco más sencillas de aplicar.
Facilidad
La relajación va de la mano con la interpolación. Si mover un objeto de una posición a otra usando la línea de tiempo es el pastel, ¡entonces suavizar es el glaseado!
Con la funcionalidad de facilidad de Animate, puede hacer que la interpolación acelere o desacelere al principio o al final. O agregue un poco de rebote cuando se complete la interpolación. Esto realmente ayuda a darle personalidad a tu animación.
La facilidad aplicada a esta interpolación inicia la animación rápidamente y se ralentiza al final.
Aquí he aplicado una facilidad de rebote a mi interpolación.
Para obtener información sobre cómo aplicar suavizado, consulte este video en YouTube.
Paso 4: exporta tu GIF animado
Guardar su animación de Adobe Animate como GIF es agradable y simple. Simplemente dirígete a Archivo> Exportar> Exportar GIF animado.
Mantener el tamaño de su archivo bajo
Independientemente de cómo cree su GIF animado, ya sea con Adobe Animate o con otra cosa, mantener el tamaño del archivo bajo es crucial para el correo electrónico. Hay algunas cosas que vale la pena considerar para ayudarlo a mantener sus animaciones lo más ligeras posible.
Compresión
Herramientas como Animate y Photoshop tienen opciones de compresión limitadas para GIF; a menudo es mejor utilizar software externo para la compresión. Recomiendo ImageOptim, que se puede descargar gratis, o EZgif, una herramienta de optimización de GIF en línea gratuita, para reducir el tamaño de su archivo a su peso óptimo. Personalmente, me gusta mantener el mío por debajo de 1 megabyte (MB), pero el tamaño de archivo óptimo variará y depende del tiempo de carga del correo electrónico, que discutiremos más adelante en esta publicación de blog.
Color plano
Incluir fotografías o degradados en su animación agrega peso debido a la cantidad de colores y sombras que contienen. Un GIF solo puede contener 256 colores, en comparación con un JPEG que puede incluir más de 16 millones, lo que a menudo hace que la calidad se vea afectada. Así que mantener las cosas simples es clave.
Marcos limitados
Cuanto más corta sea la animación, mejor. Cada fotograma que contiene su animación agrega peso al GIF. Dado que una animación realmente debería ser un complemento de su copia, tiene sentido limitar el tiempo que se reproduce la animación y alentar a los lectores a desplazarse hacia abajo en el correo electrónico.
Si descubre que su GIF tiene demasiado peso después de guardarlo y comprimirlo, puede eliminar los marcos con Photoshop o EZgif.
Prueba de su GIF animado
Ahora que ha completado su GIF, es posible que desee obtener comentarios o aprobación antes de colocarlo en su correo electrónico. Con una herramienta de colaboración en tiempo real como Litmus Proof, puede centralizar los comentarios y aprobaciones de todos.
Implementación de GIF animados en el correo electrónico
Una vez que tenga su GIF listo para usar, puede incluirlo en su correo electrónico de la misma manera que agregaría cualquier otro archivo de imagen: