WP Engine WP Engine

Je ne savais pas qu'un email pouvait faire ça ! (Partie I)

Voici quelques astuces pour optimiser le design d'email et impressionner vos collègues avec la classe de Salt Bae.

Capture - Je ne savais pas qu'un email pouvait faire ça ! (Partie I)

Je publierai la semaine prochaine une seconde partie avec de belles innovations pour designer un template e-mail. L'objectif est de vous apporter des solutions simples et élégantes en prenant en compte toutes les contraintes que l'on connait au secteur. J'ai sélectionné des approches qui permettent d'innover sans nécessiter de lourds investissements en développement ou en configuration.

Au programme

  1. Afficher un logo d'expéditeur dans Gmail & Inbox by Gmail ;
  2. Accompagner l'objet avec un texte de description/preheader fantôme ;
  3. Afficher un élément en position fixe dans un email ;
  4. Proposer un bouton d'action directement depuis la boîte de réception ;
  5. Lire une vidéo dans un email (disponible dans la partie II) ;
  6. Insérer un bouton centré dans un email (disponible dans la partie II) ;
  7. Supprimer l'icône de téléchargement de l'image dans Gmail (disponible dans la partie II) ;
  8. Expérimenter avec les Web Fonts (disponible dans la partie II).
WP Engine
WP Engine

1. Afficher un logo d'expéditeur dans Gmail & Inbox by Gmail

Le moyen le plus rapide pour sortir du lot parmi les dizaines d'emails reçus chaque jour par vos lecteurs. Google offre la possibilité d'afficher votre logo ou une photo de profil à côté du nom d'expéditeur.

LOGO DU MAGAZINEDUWEBDESIGN DANS INBOX BY GMAIL.PNG
Logo du magazineduwebdesign dans inbox by gmail

Note : j'ai investi 6 mois pour faire fonctionner cette astuce. C'est pour cette raison que je la mets en première position #Fier #PasDoué.

How-To : Gmail en mode grille et Inbox by Gmail affichent l'avatar utilisé sur la page Google+ de l'expéditeur. Plusieurs conditions sont à réunir :

  • L'adresse email de l'expéditeur doit correspondre à celle avec laquelle la page Google+ a été créée.
  • La page Google+ doit être une page vérifiée.
  • Les e-mails doivent être authentifiés en utilisant les méthodologies SPF (Sender Policy Framework) ou DKIM (DomainKeys Identified Mail). SPF spécifie quels hôtes sont autorisés à envoyer des messages à partir d'un domaine donné en créant un enregistrement SPF. DKIM permet à l'expéditeur de signer électroniquement les e-mails légitimes d'une manière qui peut être vérifiée par les destinataires en utilisant une clé publique. La plupart des fournisseurs de services pour gérer des campagnes email proposent la possibilité de personnaliser les SPF et DKIM via l'interface d'administration du compte utilisateur.
  • Pour savoir le SPF et le DKIM de vos campagnes, ouvrez le menu déroulant situé à droite de l'email dans Gmail ou Inbox et cliquez sur Afficher l'original.
SPF ET DKIM DE LA GAZETTE DU MDW.JPG
Spf et dkim de la gazette du mdw

Note : j'ai testé différentes approches pour optimiser mon taux d'ouverture. La photo de profil est un bon moyen de proposer un visage plus humain aux emails envoyés tout en optimisant l'ouverture.

J'ai remarqué que Google n'applique pas immédiatement les changements d'avatars dans les boîtes de réception. C'est pour cela que certains abonnés de la newsletter du Magazine du Webdesign aperçoivent le logo du MDW à la place de ma photo de profil. Certainement une histoire de mise en cache.

2. Accompagner l'objet avec un texte de description/preheader fantôme

Le moyen le plus rapide d'augmenter votre taux d'ouverture sans polluer le corps de votre template email. De nombreux clients email affichent un texte supplémentaire à côté ou en-dessous de l'objet de l'email. Ils extraient pour cela le premier texte qu'ils trouvent dans le corps de l'email. On peut faire l'économie d'afficher ce preheader dans le corps de l'email avec une ligne de CSS.

EMAIL DANS BOITE DE RECEPTION AVEC TEXTE DE PREHEADER APPARENT.PNG
Email dans boite de reception avec texte de preheader apparent
EMAIL OUVERT SANS TEXTE DE PREHEADER APPARENT.PNG
Email ouvert sans texte de preheader apparent

3. Afficher un élément en position fixe dans un email

Le moyen le plus rapide d'augmenter le taux de clics d'une campagne email.

POSITION FIXE DANS UN EMAIL.GIF
Position fixe dans un email

How-To : Email on Acid explique en détails le process de création d'un email utilisant la position fixe d'un élément pour enrichir l'interaction. Testez la position fixe avec la démo 1 et la démo 2.

4. Proposer un bouton d'action directement depuis la boîte de réception

Le moyen le plus rapide d'augmenter son taux de clics sans nécessiter l'ouverture de l'email dans Gmail et Inbox by Gmail. Par exemple, lorsqu'un utilisateur reçoit une invitation à un événement, on peut lui présenter l'option de confirmation à partir de la boîte de réception.

BOUTON ONE CLICK ACTION GMAIL ET INBOX BY GMAIL.JPG
Bouton one click action gmail et inbox by gmail

How-To : Google propose différentes typologies d'actions : one-click, review, go-to, etc. La déclaration se fait via une structuration des données au format JSON-LD ou MICRODATA. Condition supplémentaire : l'expéditeur de l'email doit être digne de confiance aux yeux de Google.

On en parle ?!

Avez-vous des commentaires, des questions, de l'amour ou de la haine ? Envoyez tout ça à guillaume@magazineduwebdesign.com. Si vous n'aimez pas les e-mails, envoyez un tweet à @MagDuWebdesign.

Rendez-vous la semaine prochaine pour découvrir la 2ème partie de cette série d'articles.

Supporté par Sarbacane

Chez Sarbacane, notre approche de l'emailing nous pousse sans cesse à proposer les meilleurs outils essentiels à la réussite de vos projets. C’est pourquoi nous sommes fiers de soutenir MDW dans son effort pour défendre et promouvoir une large communauté de créateurs d'email.

Sarbacane est l’application emailing de référence en France qui vous permet de :

  • Gérer / nettoyer / corriger vos listes de contacts (+ connecteurs avec Wordpress, Magento, PrestaShop…) ;
  • Créer des formulaires de collecte (responsives) ;
  • Créer des emails (responsives aussi) facilement à partir des 250 templates gratuits fournis ou partir de zéro ;
  • Prévisualisez gratuitement vos emails avant envoi dans les principales messageries.
  • Envoyer via une plateforme de routage haute délivrabilité ;
  • Obtenir des statistiques détaillées sur vos envois avec des infos inédites comme le temps de lecture moyen ;
  • Et plus de 50 autres fonctionnalités à découvrir qui en font l’une des solutions les plus complètes du marché.

Si vous avez apprécié cet article, vous pourriez être intéressé(e) par :

Prenez soin de vous. A bientôt — @guillaumpalayer.

WP Engine
WP Engine

Accédez au meilleur des interfaces directement depuis votre boîte mail

Pixels à explorer

Développez vos talents en explorant ces collections

3 sections à explorer. Des centaines de conseils & d'astuces pour rendre le monde meilleur, pixel après pixel, balise après balise.