Intégrer un GIF animé dans votre signature de mail est l'option idéale. Quelles sont alors les meilleures pratiques pour l'insertion de GIF animés par courriel ? Aujourd'hui, découvrez comment construire un message avec des GIF animés dans l'éditeur BEE. Les GIF automatisés sont de plus en plus présents dans vos comptes de courrier électronique, mais ils ne sont pas toujours utilisés correctement, notamment dans les campagnes de marketing par courrier électronique. Et pourtant, en suivant les directives ci-dessous, vous pourrez insérer en toute sécurité des GIF animés dans vos courriels d'une manière optimisée pour les mobiles, en minimisant les problèmes de visualisation qui pourraient en résulte, afin d'augmenter le rendement du capital investi de vos campagnes.
GIF automatisés dans les messages électroniques : comment les optimiser et les envoyer ?
L'ironie est que, même s'ils sont souvent mal utilisés, les GIF animés sont en fait assez faciles à utiliser dans les messages : ils peuvent être traités comme n'importe quel fichier image et sont bien pris en charge par la plupart des clients de messagerie. Cependant, dans de nombreux cas, il y a un problème : l'appel à l'action se trouve souvent dans les GIF, comme dans ce courriel d'Ann Taylor. L'icône d'appel à l'action "GO" n'est pas un vrai bouton, mais fait partie de l'image. Cliquer au-dessus, en dessous ou n'importe où autour du "bouton" donne pratiquement le même résultat : vous êtes redirigé vers une page d'accueil du site web d'Ann Taylor, puisque chaque cadre GIF est lié. Cela permet aux lecteurs d'obtenir plus d'informations (et peut-être de compléter un achat) en tapant ou en cliquant n'importe où. Ce système peut toutefois poser des problèmes. Si, pour une raison quelconque, le GIF animé n'est pas affiché, le courriel perd tout son sens. De plus, les utilisateurs d'Outlook ne verront probablement qu'une image statique, car l'animation ne démarrera pas. Pour ces raisons et d'autres encore, il est recommandé toujours une approche de conception qui optimise le code HTML et ne se base pas uniquement sur des images.
Insérer des GIF animés dans les courriels : le tutoriel d'aujourd'hui
Vous allez voir comment recréer le courriel suivant de Banana Republic et qui explique comment insérer des GIF animés dans les courriels pour s'assurer que votre contenu apparaît. Voici le résumé, comme référence : dans l'e-mail de Banana Republic, le message principal avec appel à l'action est inclus dans un seul bloc d'images. Si le corps du courriel et toute la partie noire est entièrement constitué d'un GIF animé. C'est-à-dire que si l'option de visualisation de l'image est désactivée, le GIF est bloqué ou ne peut tout simplement pas se charger, et le message entier est perdu. Découvrez comment résoudre la situation.
Étape 1 : isoler le GIF animé
Le GIF animé contenu dans ce courriel est assez volumineux. Par conséquent, même s'il est affiché dans la boîte du lecteur, il peut ne pas se charger complètement, ce qui fait que le courriel n'est pas lu. Une excellente solution pour éviter ces problèmes consiste à recadrer le GIF animé, en supprimant les parties de l'image qui n'ont pas besoin d'être animées. Dans le cas de l'e-mail de la Banana Republic, cela équivaut à isoler la partie centrale de l'image, celle qui est en fait en mouvement et en recréant la section restante avec des chaînes de texte et du code HTML.
Étape 2 : définir la mise en page du courriel avec des blocs de contenu
Commencer avec un modèle élémentaire à une colonne dans l'éditeur BEE. La structure par défaut des blocs de contenu est très similaire à ce que vous faites : un texte suivi d'une image, suivi d'une autre chaîne de texte et enfin un bouton d'appel à l'action. Il n'est pas nécessaire de modifier la structure puisque les blocs de contenu dont vous avez besoin été déjà présents, commencer donc à insérer le texte en prenant soin de tout aligner au milieu. Supprimer également les blocs de contenu dont vous n'avez pas besoin, comme la boîte de sous-titres en haut. Maintenant que votre contenu est en place, vous pouvez procéder au formatage.
Étape 3 : définir la couleur de fond en HTML
À partir du bloc de contenu "SWEET TREAT", vous allez faire la police en couleur blanche et augmentez sa taille jusqu'à 36 px. Continuer en rendant l'arrière-plan du corps du message noir, comme dans le cas du GIF à l'intérieur de l'e-mail de la Banana Republic. Pour ce faire, vous pouvez simplement ajuster les couleurs d'arrière-plan en sélectionnant les propriétés des lignes dans le menu de droite, en rendant l'arrière-plan des lignes transparente et en attribuant la couleur noire à l'arrière-plan du contenu. Appliquez les mêmes paramètres aux propriétés des rangées pour tous les blocs de contenu à suivre, y compris la couleur de fond derrière notre GIF animé. Le résultat est un bloc de couleur unique et homogène. Pour conclure en formatant le reste du texte. Vous devez apporter quelques modifications finales pour obtenir un espacement global correct et mettre à jour notre bouton CTA, mais votre e-mail semble déjà presque identique à celui de Banana Republic, la seule différence étant que vous avez utilisé des polices compatibles avec l'e-mail et des couleurs de fond HTML. Votre message est devenu incroyablement propre, et vous avez réduit le risque que le GIF n'apparaisse pas. Vous pouvez toujours voir les couleurs, le texte et, surtout, le bouton d'appel à l'action.
Étape 4 : inclure un bouton d'appel à l'action à l'épreuve des balles
Avertissement, spoiler : vous n'avez pas à écrire une seule ligne de code HTML ni à prendre d'autres mesures pour vous assurer que votre bouton d'appel à l'action "TROUVER" fonctionne dans tous les appareils et clients de messagerie électronique. Dans l'éditeur BEE, tous les boutons sont conçus pour être à l'épreuve des balles, c'est-à-dire non basés sur des images, de sorte qu'ils peuvent toujours être affichés correctement sur tous les appareils et dans toutes les circonstances. Il suffit de mettre à jour le style sous Propriétés dans le menu de droite. Tout d'abord, faites en sorte que la couleur de fond du bouton soit blanche et changez la couleur de la police en noir. Former ensuite le texte, augmenter la taille de la police et activer le gras. Une fois la taille augmentée, le CTA apparaîtra sur deux lignes. Maintenant, en revenant à "Content Properties" vous pouvez augmenter la largeur à 35 %. Le bouton de la République Banana a des angles vifs, vous optez pour une apparence moins arrondie pour votre icône. Pour changer la forme du bouton, vous allez réduire le rayon de la bordure à 0.
Étape 5 : Ajustement final de la coupe et de l'espacement
Le texte et le bouton CTA en bas sont trop rapprochés. Pour donner de l'espace à votre message, vous pouvez ajuster la marge interne au-dessus et en dessous de chaque structure de contenu. Cliquez simplement sur n'importe quelle structure (bouton, texte, image), allez dans le menu "Propriétés du contenu" et assurez-vous que vous voyez plus d'options dans la section "Rembourrage" sous "Espacement". Vous avez ajusté la marge interne au-dessus et en dessous du bouton "En ligne uniquement" et du bloc de contenu. Maintenant vous aussi vous savez comment maîtriser ce puissant outil qui vous aidera à augmenter votre clientèle.