Comment créer un e-mail interactif impressionnant

Dans ce monde numérique, l'interactivité est apparue comme l'un des éléments les plus attrayants pour améliorer l'expérience utilisateur.

Vous connaissez peut-être déjà l'interactivité sur le site Web de Mercedes ou de BMW – où les visiteurs peuvent visualiser une voiture de différentes couleurs et de différents motifs en déplaçant simplement quelques curseurs et en cliquant sur quelques boutons.

Et si vous pouviez faire la même chose dans un email?

En faisant défiler vers le bas cet email sur la droite, vous pouvez voir un bus qui traverse une prairie,

Alors que les sites Web ont adapté l'interactivité il y a plus de dix ans, le courrier électronique interactif est un exploit très applaudissable, étant donné que le courrier électronique interactif est uniquement alimenté par l'animation CSS.

La plupart des marques intègrent désormais une partie ou une autre forme d'interactivité dans leurs emails pour améliorer l'expérience utilisateur.

Cet article vous présentera la conception de courriels interactifs et la façon d'ajouter de l'interactivité à vos courriels.

Être pratique avec des courriels interactifs

2014 (et aussi un client de messagerie électronique moderne prenant en charge CSS3), les courriels interactifs font fureur auprès des grands spécialistes du marketing par courriel pour offrir une expérience unique à leurs abonnés.

Ils croient que le conseil de marketing par courriel numéro un est que plus un abonné passe de temps sur son courriel, plus ses chances d'être converti sont grandes. Il n'est peut-être pas aussi complexe que l'interactivité que vous voyez sur les sites Web, puisque Javascript et Flash sont désactivés dans les courriels en raison de problèmes de sécurité.

Heureusement, avec l'aide des animations CSS, vous pouvez expérimenter une interactivité aussi simple qu'un contenu à onglets avec effet Accordéon …

… aussi complexe que d'avoir un jeu dans votre boîte de réception.

Créer un email tel que Super Mail Quest (voir ci-dessus) demande beaucoup de temps (presque un an avec de nombreux changements) et parfois vous devez apprendre à marcher avant de pouvoir voler et ainsi nous

Un guide pour créer un curseur d'image interactif dans votre email

Même si une image transporte un millier de mots, l'ajout de plus de deux images dans votre email mange précieux réel immobilier qui augmente la longueur de votre email.

C'est un défi sérieux surtout pour le commerce électronique et les détaillants en ligne qui comptent sur les images de leurs produits à vendre.

Un curseur d'image interactif peut empiler plusieurs images, ce qui réduit la longueur de l'e-mail, facilitant ainsi la navigation entre les utilisateurs.

L'interactivité dans les emails est comme les ingrédients d'une recette. pour le plaisir. Il doit augmenter la saveur existante. Cela signifie que la planification d'un e-mail interactif commence avec la phase de conception.

Supposons que vous ayez 6 images à afficher dans le premier pli de l'e-mail suivi d'une description textuelle de vos produits.

Ce qu'il faut garder à l'esprit, c'est que si la largeur de votre courriel est 600px, vous devez concevoir le curseur d'image de 500-550 largeur pour éviter le défilement horizontal:

[19659002Certainsélémentsdecourrierélectroniqueinteractifstelsquel'effetd'accordéonsontcréésspécifiquementpourlesappareilsmobiles

Dans ce cas, vous devez également créer une mise en page mobile distincte.

Un curseur d'image est actuellement pris en charge sur iOS Mail, Apple Mail, Thunderbird, Android Native et Samsung Mail. Pour ceux qui utilisent d'autres clients de messagerie non conformes, vous devez créer une conception de secours afin d'éviter d'envoyer un e-mail endommagé.

Dans le cas d'un curseur d'image, vous pouvez afficher toutes les images sont empilés ensemble comme un repli …

Ou seulement montrer une image primaire et cacher les autres …

vous affichez toutes les images dans le fallback, prenez note que votre email de secours dans la disposition mobile sera extra-long.

Astuces à retenir:

• Utilisez toujours des images de la rétine. Si votre curseur d'image est 550px, vos images doivent être de 1100px.
• Avoir deux ensembles de la même image. Un pour la vignette et l'autre est votre image réelle.

Coder l'image Slider – Made Simple!

Comme indiqué précédemment, l'interactivité est possible en utilisant l'animation CSS enroulée autour d'un code HTML. La classe CSS est spécifiée dans la balise

d'un e-mail et elle est référencée dans la balise HTML.

Pour votre facilité, nous avons créé le code CSS d'un curseur d'images interactif avec 6 images:

  
  
 <! -

Et le code HTML est le suivant:

  
    

        

            

                

                    

                

                
 
                

                    

                    

                                                                 
                                                                   

                                                                    
                                                                     
             
                                                                         
                                                                        
                                                                        
             
    
                                                                            
             
    
        
            
    
        
            
    
        
            
    
        

        

        

        

        

        

          
        
    
        
           
    
        
           
    
        
    
    
                                                                            
                                                                            
                                                                          
                                                                            
                                                                            
                                                                          
                                                                            
                                                                        
                                                                        
                                                                         <! - 
                                                                       

                                                    

                                                        
                                                    
                                                

                                                
                                        

                                    
                                
 
                            
                        
                
            
    
  

Dans le code ci-dessus, modifiez le tag A ( un href) pour changer le lien où l'abonné doit être redirigé lorsqu'il clique sur l'image. Et changez l'étiquette d'image (img src) pour changer l'image qui est montrée sur le glisseur d'image.

Produit final

Félicitations! En ajoutant les deux codes à votre modèle d'e-mail existant, vous avez ajouté un curseur d'image à votre adresse e-mail. Pour ceux qui souhaitent éviter les problèmes de codage à partir de zéro, essayez la navigation Menu et image Slider en utilisant un outil de bricolage interactif

Wrapping Up

L'avantage d'envoyer un e-mail interactif , est progressivement montré aux abonnés seulement quand ils interagissent avec l'email aidant à stimuler la curiosité.

Vous devez vous demander, "si les courriels interactifs peuvent augmenter l'engagement d'email, pourquoi n'y a-t-il pas beaucoup d'email interactifs"?

Les principales raisons sont …

• Le code n'est pas réutilisable
• Il faut plus de temps pour le développement et encore plus de temps pour tester le rendu entre différents clients de messagerie
• le code (par exemple MailChimp)
• Certains éléments d'e-mail interactifs ont besoin d'un repli pour éviter d'envoyer un e-mail à un abonné, ce qui signifie plus de temps pour concevoir un e-mail. un e-mail interactif et utilisez des outils tels que Email on Acid et Litmus pour tester le rendu sur différents clients de messagerie

  Auteur Bio:

  

  Kevin George – Responsable du marketing de la principale marque de conception et de codage de courrier électronique EmailMonks – se spécialise dans l'élaboration de beaux modèles d'e-mails, la conversion d'e-mails PSD en HTML et modèles d'e-mails HTML gratuit . Il aime les gadgets, les vélos, le jazz et respire le marketing par courriel. »Il aime partager ses idées et ses réflexions sur les conseils et les pratiques exemplaires en matière de marketing par courriel sur son blogue de marketing par courriel.