Badsender
Rechercher
Fermer cette boîte de recherche.

Effet Typewriter et emailing

  • , mis à jour le 

Restez informé·e via les newsletters de Badsender

Chaque mois, nous publions une newsletter sur l’email marketing et une infolettre sur la sobriété et le marketing. En savoir plus.

Votre adresse email ne sera jamais communiquée à un tiers. Vous pourrez vous désabonner à tout moment en un seul clic.

Photo de Luca Bravo sur Unsplash.com

On ne va pas se mentir, c’est chaud en ce moment. Enfin ça ne change rien pour l’équipe de Badsender qui continue le télétravail, comme à l’accoutumée. Et nous ne resterons pas muets ! Non ! Une journée de mutisme de plus me paraissait inconcevable. Je persiste et signe en élaborant de nouvelles techniques pas toujours bien supportées sur la majorité des clients mail, et qui n’amusent sans doute que moi… Aujourd’hui, la maison vous propose, suspense et devinette :

La réécriture d’un mot

Oui parce que le titre de l’article ne veut rien dire. Ou plutôt, c’est le nom « scientifique » donné à cette réaction. Mais un effet « machine à écrire » pour un texte écrit, puis supprimé, puis réécrit, c’est tout sauf ce qu’il est possible de faire via une machine à écrire… Donc, parlons plutôt d’une transition harmonieuse en langages HTML et CSS dans un email qui va simuler la réécriture d’un mot par un ou plusieurs vocables. Hop et boum.

Petit aperçu du produit escompté

Pourquoi ?

J’ai maintes fois réalisé ce résultat via un gif animé. Et là, drame ! Je peux affirmer que ce n’est pas évident. Et bien complexe à mettre à jour. En vérité, la solution escomptée est d’ordinaire bien plus facile à générer via du javascript, mais là, je dis non, et je pèse mon mot : le javascript ne peut qu’impacter négativement votre délivrabilité, et ce n’est sans doute pas ce que vous voulez.

Moult effets semblables sont disponibles sur Codepen par exemple, mais ne sont en rien adaptés à l’emailing. Cela m’a titillé. Je voulais absolument reproduire cet aboutissement dans un email mais sans user de la première technique citée plus haut (et encore moins de la seconde donc, il va sans dire, donc ne le disons pas). J’ai donc fait le choix grandiloquent de m’atteler à sa réalisation en code supporté par les logiciels de messagerie : vous n’assisterez donc pas à un record d’absence d’ineptie claironnante.

Hop, derechef, je m’y attèle.

J’ai choisi pour arriver à ce rendu de faire appel à un ami à la propriété CSS animation. Car qu’est-ce qu’une réécriture sinon le fait d’appliquer une animation à son texte en le supprimant ? Comment ça, non ? Chaque mot disparaît (pendant un temps) pour laisser place à un autre.

Je vois la chose ainsi, du moins sur la technique : les lettres de chaque mot seront tout d’abord dissociées dans des balises de type bloc. Les premières lettres de chaque mot seront présentées dans une 1ère cellule d’un tableau. Les secondes lettres seront regroupées dans une 2nde cellule du même tableau. Les troisièmes lettres seront regroupées dans une 3ème cellule du même tableau. Et ainsi de suite, un peu de sérieux tout de même. J’attends que vous vous fassiez une image de la chose.

<table border="0" cellspacing="0" cellpadding="0" align="center" style="margin:0px auto;" role="presentation" bgcolor="#FFCE3D">
              <tr>
                <td><h1>t</h1>
                  <h1>e</h1>
                  <h1>a</h1></td>
                <td><h1>o</h1>
                  <h1>n</h1>
                  <h1>u</h1></td>
                <td><h1>u</h1>
                  <h1>c</h1>
                  <h1>s</h1></td>
                <td><h1>j</h1>
                  <h1>o</h1>
                  <h1>s</h1></td>
                <td><h1>o</h1>
                  <h1>r</h1>
                  <h1>i</h1></td>
                <td><h1>u</h1>
                  <h1>e</h1>
                  <h1>&nbsp;</h1></td>
                <td><h1>r</h1>
                  <h1>&nbsp;</h1>
                  <h1>&nbsp;</h1></td>
                <td><h1>s</h1>
                  <h1>&nbsp;</h1>
                  <h1>&nbsp;</h1></td>
              </tr>
            </table>

Hein que vous êtes surpris ! Vous les voyez les mots « toujours », « encore » et « aussi » ? Vous avez donc compris la base, et vous m’en voyez ravi. Fichtre, allons plus loin dans la complexité de l’exercice : attribuons un identifiant id à chaque <h1>, ainsi qu’un style permettant au contenu d’être visible au premier <h1> de chaque cellule, et des propriétés CSS qui rendront « invisibles » les autres.

<table border="0" cellspacing="0" cellpadding="0" align="center" style="margin:0px auto;" role="presentation" bgcolor="#FFCE3D">
              <tr>
                <td><h1 id="texte01" style="font-size:46px; color:#000000; font-family:Arial, Helvetica, sans-serif;">t</h1>
                  <h1 id="texte09" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">e</h1>
                  <h1 id="texte17" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">a</h1></td>
                <td><h1 id="texte02" style="font-size:46px; color:#000000; font-family:Arial, Helvetica, sans-serif;">o</h1>
                  <h1 id="texte10" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">n</h1>
                  <h1 id="texte18" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">u</h1></td>
                <td><h1 id="texte03" style="font-size:46px; color:#000000; font-family:Arial, Helvetica, sans-serif;">u</h1>
                  <h1 id="texte11" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">c</h1>
                  <h1 id="texte19" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">s</h1></td>
                <td><h1 id="texte04" style="font-size:46px; color:#000000; font-family:Arial, Helvetica, sans-serif;">j</h1>
                  <h1 id="texte12" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">o</h1>
                  <h1 id="texte20" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">s</h1></td>
                <td><h1 id="texte05" style="font-size:46px; color:#000000; font-family:Arial, Helvetica, sans-serif;">o</h1>
                  <h1 id="texte13" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">r</h1>
                  <h1 id="texte21" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">i</h1></td>
                <td><h1 id="texte06" style="font-size:46px; color:#000000; font-family:Arial, Helvetica, sans-serif;">u</h1>
                  <h1 id="texte14" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">e</h1>
                  <h1 id="texte22" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">&nbsp;</h1></td>
                <td><h1 id="texte07" style="font-size:46px; color:#000000; font-family:Arial, Helvetica, sans-serif;">r</h1>
                  <h1 id="texte15" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">&nbsp;</h1>
                  <h1 id="texte23" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">&nbsp;</h1></td>
                <td><h1 id="texte08" style="font-size:46px; color:#000000; font-family:Arial, Helvetica, sans-serif;">s</h1>
                  <h1 id="texte16" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">&nbsp;</h1>
                  <h1 id="texte24" style="font-size:0px; color:#000000; font-family:Arial, Helvetica, sans-serif;">&nbsp;</h1></td>
              </tr>
            </table>

Si la vue de ce code vous révulse comme le vegan à la vue d’une entrecôte saignante, alors je ne peux rien pour vous, nous n’en sommes qu’au début. Vous constaterez que les trois identifiants uniques d’une cellule s’incrémentent de 8 : logique, puisque le mot le plus long, à savoir « toujours », comporte 8 lettres. Si, ne niez pas !

Besoin d'aide ?

Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.


En l’état, nous avons donc le mot « toujours » qui apparaît à l’écran. Joie ! Les deux autres termes sont donc bien « cachés ». Il nous faut maintenant passer à la partie plus ardue : les animations CSS. Fi ! Selon moi, il suffit d’appliquer une animation CSS à chaque lettre des mots, et de décider, par l’intermédiaire de ces mêmes animations, d’agrandir la typographie du texte, ainsi que la largeur de l’élément <h1> concerné. J’en fais mon affaire. Voyons donc en premier lieu comment « appeler » une animation.

#texte01 {animation:typing01 10s infinite;}

Ici, j’attribue à la 1ère lettre de mon 1er mot via l’identifiant #texte01 l’animation CSS portant le nom de typing01. Cette animation durera 10 secondes et tournera en boucle (d’où le infinite en conclusion de ma déclaration… Mais dites-donc, si j’ose dire, c’est que vous comprenez vite !) Mais point trop n’en faut, appliquons-nous désormais à comprendre le fonctionnement de l’animation.

@keyframes typing01 {
0% {width:100%; font-size:46px;}
20% {width:100%; font-size:46px;}
21% {width:0%; font-size:0px;}
62% {width:0%; font-size:0px;}
63% {width:100%; font-size:46px;}
100% {width:100%; font-size:46px;}
}

« Oula, c’est quoi ce charabia, qu’est-ce qu’il nous fait l’artiste ? » me direz-vous. Mais la cuistrerie ne passera pas. Apprenez (à vos dépens) qu’il ne s’agit là que du détail des étapes d’une animation. Pour une seule lettre, soit. Mais rien de bien complexe : la règle @keyframes permet au développeur de définir les étapes qui composent la séquence d’une animation CSS. Cela permet de contrôler une animation plus finement que ce qu’on pourrait obtenir avec des transitions.

Et, joie, dans notre cas de figure, il n’y a rien de plus simple : de l’étape 0% à l’étape 20% de notre animation typing01 d’une durée de 10 secondes (soit 20% de 10 secondes, soit 0.2 secondes) la lettre comprise dans le <h1> ciblé a une taille de typographie de 46px, et le <h1> concerné prend toute sa largeur. Ensuite, de 21% à 62%, la lettre devient presque invisible puisque réduite à une taille de 0 pixel, quand le <h1> voit sa largeur diminuée à 0%. Enfin, de 63% à 100% de l’animation, la lettre et son conteneur reprennent leurs tailles initiales. Autrement dit, la lettre « t » du mot « toujours » commence tout d’abord par être affichée pendant 0.2 seconde, puis « disparaît » pendant 0.4 seconde (pour laisser la place tout d’abord à la lettre « e » du mot « encore », puis à la lettre « a » du mot « aussi »), pour finalement réapparaître…

Qu’entends-je ? Qu’ouïjai-je ? « Je me gratte pour me faire rire ? » Je vous méprise et je vous ris au nez, sots ! Passons à l’entièreté du style CSS avec l’ensemble des animations propres aux 24 « lettres ».

<style>
h1 {color:#000000; font-family:Arial, Helvetica, sans-serif; overflow:hidden; margin:0 auto; font-size:0px; font-weight:bold;}

#texte01 {animation:typing01 10s infinite;}
#texte02 {animation:typing02 10s infinite;}
#texte03 {animation:typing03 10s infinite;}
#texte04 {animation:typing04 10s infinite;}
#texte05 {animation:typing05 10s infinite;}
#texte06 {animation:typing06 10s infinite;}
#texte07 {animation:typing07 10s infinite;}
#texte08 {animation:typing08 10s infinite;}
#texte09 {animation:typing09 10s infinite;}
#texte10 {animation:typing10 10s infinite;}
#texte11 {animation:typing11 10s infinite;}
#texte12 {animation:typing12 10s infinite;}
#texte13 {animation:typing13 10s infinite;}
#texte14 {animation:typing14 10s infinite;}
#texte15 {animation:typing15 10s infinite;}
#texte16 {animation:typing16 10s infinite;}
#texte17 {animation:typing17 10s infinite;}
#texte18 {animation:typing18 10s infinite;}
#texte19 {animation:typing19 10s infinite;}
#texte20 {animation:typing20 10s infinite;}
#texte21 {animation:typing21 10s infinite;}
#texte22 {animation:typing22 10s infinite;}
#texte23 {animation:typing23 10s infinite;}
#texte24 {animation:typing24 10s infinite;}


@keyframes typing01 {
0% {width:100%; font-size:46px;}
20% {width:100%; font-size:46px;}
21% {width:0%; font-size:0px;}
62% {width:0%; font-size:0px;}
63% {width:100%; font-size:46px;}
100% {width:100%; font-size:46px;}
}
@keyframes typing02 {
0% {width:100%; font-size:46px;}
21% {width:100%; font-size:46px;}
22% {width:0%; font-size:0px;}
63% {width:0%; font-size:0px;}
64% {width:100%; font-size:46px;}
100% {width:100%; font-size:46px;}
}
@keyframes typing03 {
0% {width:100%; font-size:46px;}
22% {width:100%; font-size:46px;}
23% {width:0%; font-size:0px;}
64% {width:0%; font-size:0px;}
65% {width:100%; font-size:46px;}
100% {width:100%; font-size:46px;}
}
@keyframes typing04 {
0% {width:100%; font-size:46px;}
23% {width:100%; font-size:46px;}
24% {width:0%; font-size:0px;}
65% {width:0%; font-size:0px;}
66% {width:100%; font-size:46px;}
100% {width:100%; font-size:46px;}
}
@keyframes typing05 {
0% {width:100%; font-size:46px;}
24% {width:100%; font-size:46px;}
25% {width:0%; font-size:0px;}
66% {width:0%; font-size:0px;}
67% {width:100%; font-size:46px;}
100% {width:100%; font-size:46px;}
}
 @keyframes typing06 {
0% {width:100%; font-size:46px;}
25% {width:100%; font-size:46px;}
26% {width:0%; font-size:0px;}
67% {width:0%; font-size:0px;}
68% {width:100%; font-size:46px;}
100% {width:100%; font-size:46px;}
}
@keyframes typing07 {
0% {width:100%; font-size:46px;}
26% {width:100%; font-size:46px;}
27% {width:0%; font-size:0px;}
68% {width:0%; font-size:0px;}
69% {width:100%; font-size:46px;}
100% {width:100%; font-size:46px;}
}
@keyframes typing08 {
0% {width:100%; font-size:46px;}
27% {width:100%; font-size:46px;}
28% {width:0%; font-size:0px;}
69% {width:0%; font-size:0px;}
70% {width:100%; font-size:46px;}
100% {width:100%; font-size:46px;}
}


@keyframes typing09 {
0% {width:0%; font-size:0px;}
21% {width:0%; font-size:0px;}
22% {width:100%; font-size:46px;}
40% {width:100%; font-size:46px;}
41% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
@keyframes typing10 {
0% {width:0%; font-size:0px;}
22% {width:0%; font-size:0px;}
23% {width:100%; font-size:46px;}
41% {width:100%; font-size:46px;}
42% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
 @keyframes typing11 {
0% {width:0%; font-size:0px;}
23% {width:0%; font-size:0px;}
24% {width:100%; font-size:46px;}
42% {width:100%; font-size:46px;}
43% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
@keyframes typing12 {
0% {width:0%; font-size:0px;}
24% {width:0%; font-size:0px;}
25% {width:100%; font-size:46px;}
43% {width:100%; font-size:46px;}
44% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
@keyframes typing13 {
0% {width:0%; font-size:0px;}
25% {width:0%; font-size:0px;}
26% {width:100%; font-size:46px;}
44% {width:100%; font-size:46px;}
45% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
@keyframes typing14 {
0% {width:0%; font-size:0px;}
26% {width:0%; font-size:0px;}
27% {width:100%; font-size:46px;}
45% {width:100%; font-size:46px;}
46% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
@keyframes typing15 {
0% {width:0%; font-size:0px;}
27% {width:0%; font-size:0px;}
28% {width:100%; font-size:46px;}
46% {width:100%; font-size:46px;}
47% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
@keyframes typing16 {
0% {width:0%; font-size:0px;}
28% {width:0%; font-size:0px;}
29% {width:100%; font-size:46px;}
47% {width:100%; font-size:46px;}
48% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}


@keyframes typing17 {
0% {width:0%; font-size:0px;}
41% {width:0%; font-size:0px;}
42% {width:100%; font-size:46px;}
62% {width:100%; font-size:46px;}
63% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
@keyframes typing18 {
0% {width:0%; font-size:0px;}
42% {width:0%; font-size:0px;}
43% {width:100%; font-size:46px;}
63% {width:100%; font-size:46px;}
64% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
@keyframes typing19 {
0% {width:0%; font-size:0px;}
43% {width:0%; font-size:0px;}
44% {width:100%; font-size:46px;}
64% {width:100%; font-size:46px;}
65% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
@keyframes typing20 {
0% {width:0%; font-size:0px;}
44% {width:0%; font-size:0px;}
45% {width:100%; font-size:46px;}
65% {width:100%; font-size:46px;}
66% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
@keyframes typing21 {
0% {width:0%; font-size:0px;}
45% {width:0%; font-size:0px;}
46% {width:100%; font-size:46px;}
66% {width:100%; font-size:46px;}
67% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
@keyframes typing22 {
0% {width:0%; font-size:0px;}
46% {width:0%; font-size:0px;}
47% {width:100%; font-size:46px;}
67% {width:100%; font-size:46px;}
68% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
@keyframes typing23 {
0% {width:0%; font-size:0px;}
47% {width:0%; font-size:0px;}
48% {width:100%; font-size:46px;}
68% {width:100%; font-size:46px;}
69% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
@keyframes typing24 {
0% {width:0%; font-size:0px;}
48% {width:0%; font-size:0px;}
49% {width:100%; font-size:46px;}
69% {width:100%; font-size:46px;}
70% {width:0%; font-size:0px;}
100% {width:0%; font-size:0px;}
}
</style>

Et j’en passe. Vous souhaiteriez prendre acte du rendu de ce code développé ? Vous touchez à un point sensible. Paf, miracle sans précédent :

Et le support, quid ? On me brime, mais ça ne fait rien, c’était prévu. Au vu du support de la seule propriété animation détaillé par Campaign Monitor, je pense ne pas exagérer en affirmant que vous pouvez tabler sur un soutien assez faible, puisqu’il s’agit principalement des systèmes sous iOS qui garantiront l’effet espéré… Mais évidemment, cela dépend de la cible sur laquelle vous allez tester ! Et cependant, je tiens à vous rassurer : si jamais la transition venait à ne pas fonctionner, seul le premier mot s’affichera, quand les autres resteront masqués.

Problèmes, questions, troubles, angoisse et désarroi, je suis là pour y répondre.

Soutenez l'initiative "Email Expiration Date"

Brevo et Cofidis soutiennent financièrement le projet. Rejoignez le mouvement et ensemble, responsabilisons l’industrie de l’email face à l’urgence climatique.

Je me renseigne
Partagez
L’auteur
Image de Thomas Defossez
Thomas Defossez
Thomas a démarré sa carrière en tant qu'intégrateur emailing chez Experian avant de créer sa propre agence web. Aujourd’hui, Thomas a décidé de se focaliser sur l’email afin d’être un spécialiste de l’intégration HTML de ce médium. Depuis fin 2014, Thomas collabore à divers projets de l'Agence Badsender.com.
Toutes les publications

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *