J’ai tout dernièrement voulu innover et proposer à un client un Carrousel (avec deux « r » et un seul « s », mot qui vient de l’italien carosela qui est un jeu de cavaliers, c’est fou ce qu’on peut apprendre chaque jour) au sein d’une campagne. Ça m’apprendra! Méchant Dobby, méchant! Un carrousel, nommé aussi Slider, Slideshow ou Bannière animée, est un élément visuel et graphique qui consiste en un ensemble d’images ou de photos qui défilent.
Il s’agit de présenter du contenu de façon ergonomique. En général, il s’agit d’un diaporama employant une navigation facile et efficace. A ne pas confondre avec une galerie, qui est constituée de visuels fixes.
Un Slideshow dans un email, c’est possible ça?
Cette technique dans l’email marketing n’est pas interprétée par l’ensemble des clients mails, d’où son utilisation restreinte (et son apparition plutôt faible). Pour autant elle permet, pour un site de vente en ligne par exemple, de promouvoir plusieurs produits, ou plusieurs visuels d’un même produit (vue de face, de profil, porté, etc.) Freshinbox a mis en ligne un générateur très pratique de carrousel, où il suffit de renseigner quelques paramètres et les urls des images appelées pour obtenir un code plutôt simple à mettre en place.
Et si son support n’est pas totalement convaincant (fonctionne principalement sur iOS Mail, Samsung Mail, Apple Mail, Yahoo! Mail, AOL, SFR, La Poste et Outlook 2003), la technique a le mérite si elle est bien pensée (et c’est presque le cas de la part de Freshinbox), de proposer une solution de secours en affichant au moins un des visuels présents dans le carrousel. Souvent, il s’agira du visuel contenu dans la première vignette. Du moins, c’est qu’il est censé se passer. Car, lors des tests d’email preview, je me suis vite aperçu qu’Orange n’affichait rien du tout. Bug. Aucun post ou commentaire non plus sur le blog de Freshinbox qui traite pourtant plus en profondeur les possibilités de cette solution et de ces extensions.
Orange poserait des soucis sur un mail?
En inspectant un peu le code HTML généré (j’insiste encore une fois sur le fait de chercher à comprendre les codes HTMLs des générateurs), en débogant et en procédant par déduction, je me suis aperçu que deux éléments <input> situés en haut du code HTML généré semblaient poser souci sur Orange. Lorsque je supprimais ces éléments, l’image principale apparaissait bien, mais le carrousel était alors off. Et comme « Google est mon ami » comme le disent si bien mes collègues, j’ai recherché des résultats sur le combo input + webmail + orange.
Bon, pas de suspense, je crois que vous savez par avance que je suis arrivé sur le site de Rémi Parmentier hein, comme d’hab’ j’ai envie de dire. Rémi précisait justement que le générateur de carrousel pour emails de Freshinbox ne fonctionnait pas dans le webmail d’Orange, qui remplace les <input type= »checkbox » /> par des balises <noinput>. Cependant, Rémi ne détaillait (pour une fois) pas de solution à cette problématique (c’est gentil de laisser un peu de taf pour les autres, on appelle ça l’altruisme 😉 ).
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
J’ai couplé cela à une autre info dénichée sur un autre article de Rémi : Comme la balise <noinput> n’existe pas, lorsqu’un navigateur moderne rencontre une balise auto-fermante qu’il ne connaît pas, il va faire comme si c’était une balise de type bloc et englober tout le contenu suivant. Autrement dit, le code suivant :
<input type="checkbox" class="h8u-checkbox" style="display:none;" />
<div class="h8u-menu-wrapper">
<a class="h8u-nav-item h8u-nav-item--1">…</a>
<a class="h8u-nav-item h8u-nav-item--2">…</a>
<a class="h8u-nav-item h8u-nav-item--3">…</a>
</div>Sera converti en:
<noinput type="checkbox" class="h8u-checkbox" style="display:none;">
<div class="h8u-menu-wrapper">
<a class="h8u-nav-item h8u-nav-item--1">…</a>
<a class="h8u-nav-item h8u-nav-item--2">…</a>
<a class="h8u-nav-item h8u-nav-item--3">…</a>
</div>
</noinput>Autrement dit, mes éléments <input> en display:none !important venaient appliquer ce style sur les éléments suivants… Problématique (et vous l’aurez compris): mes visuels produits sont compris dans ce cas de figure. Comment alors changer le cours des choses sans modifier la structure du code?
Comment faire apparaître la solution de secours du carrousel sur Orange?
Il fallait pour ce faire procéder par étapes:
- Tout d’abord, supprimer le « !important » attribué au display:none de mes deux éléments <input>. Sans cela, il est impossible d’écraser le style (et il semblerait que cela ne change en rien le comportement du carrousel).
- Ensuite, il faut attribuer un id propre à chaque élément <input>, pour pouvoir mieux les cibler dans les styles en tête de l’email.
- Enfin, il faut ajouter le code suivant en tête de mail:
noinput#id_01 {display:block !important;} noinput#id_02 {display:block !important;} Ainsi, je cible les éléments <input> seulement sur le client mail Orange, puisqu’il est le seul à transformer les <input> en <noinput>. J’oblige donc Orange à passer en display:block les éléments compris dans ces <noinput>, autrement dit le visuel principal (donc, la solution de secours). Et la boucle est bouclée. Ce qui nous donne, en définitive, le code suivant:
<style>
noinput#cible_01 {
display:block !important;
}
noinput#cible_02 {
display:block !important;
}
input {
display: none;
}
@media screen and (max-width:9999px) {
.cboxcheck:checked + input + * .thumb-carousel {
height: auto !important;
max-height:none!important;
max-width:none!important;
line-height:0;
}
.thumb-carousel span {
font-size:0;
line-height:0;
}
.cboxcheck:checked + input + * .thumb-carousel .car-content {
display:none;
max-height:0px;
overflow:hidden;
}
.cbox0:checked + * .content-1, .thumb-carousel .cbox1:checked + span .content-1, .thumb-carousel .cbox2:checked + span .content-2, .thumb-carousel .cbox3:checked + span .content-3, .thumb-carousel .cbox4:checked + span .content-4, .thumb-carousel .cbox5:checked + span .content-5 {
display:block!important;
max-height:none!important;
overflow:visible!important;
}
.thumb-carousel .thumb {
cursor:pointer;
display:inline-block !important;
width:17.5%;
margin:1% 0.61%;
border:2px solid #bbbbbb;
}
/* hide for thunderbird as it doesn't support checkbox toggling */
.moz-text-html .thumb {
display:none !important;
}
.thumb-carousel .thumb:hover {
border:2px solid #444444;
}
.cbox0:checked + * .thumb-1, .thumb-carousel .cbox1:checked + span .thumb-1, .thumb-carousel .cbox2:checked + span .thumb-2, .thumb-carousel .cbox3:checked + span .thumb-3, .thumb-carousel .cbox4:checked + span .thumb-4, .thumb-carousel .cbox5:checked + span .thumb-5 {
border-color: #333333;
}
.thumb-carousel .thumb img {
width:100%;
height: auto;
}
.thumb-carousel img {
max-height: none !important;
}
.cboxcheck:checked + input + * .fallback {
display:none !important;
display:none;
max-height: 0px;
height: 0px;
overflow: hidden;
}
}
@media screen and (max-width:600px) {
.car-table.responsive, .car-table.responsive .thumb-carousel, .car-table.responsive .thumb-carousel .car-content img, .car-table.responsive .fallback .car-content img {
width:100% !important;
height:auto;
}
}
/* Hide interactive from Yahoo! Mail iOS since it doesn't support nested label interactivity */
.yfix {
}
@media screen yahoo and (max-width:600px) {
.thumb-carousel {
display:none!important;
}
.fallback {
display:block!important;
height:auto!important;
max-height:none!important;
}
}
</style>
<!--[if !mso]><!-- -->
<!-- do not wrap with a form tag - prevents bottom thumbnails from working in IE -->
<input type="radio" class="cboxcheck" style="display:none" id="cible_01" checked>
<input type="radio" name="car-rd1" class="cbox0" style="display:none" id="cible_02" checked>
<!--<![endif]-->
<table class="car-table" cellpadding="0" cellspacing="0" border="0" width="300">
<tr>
<td><div>
<!--[if !mso]><!-- -->
<div class="thumb-carousel" style="width:300px;height:0px;max-height:0px;max-width:0px;overflow:hidden!important;text-align:center">
<label>
<input type="radio" name="car-rd1" class="cbox3" style="display:none !important;">
<span>
<label>
<input type="radio" name="car-rd1" class="cbox2" style="display:none !important;">
<span>
<label>
<input type="radio" name="car-rd1" class="cbox1" style="display:none !important;">
<span>
<div class="content-1 car-content"><a href="https://www.badsender.com"><img src="https://dummyimage.com/300x200/cccccc/000000.jpg" width="300" height="200" alt="" style="display:block;max-height:0" border="0"></a></div>
<div class="content-2 car-content"><a href="https://www.badsender.com"><img src="https://dummyimage.com/300x200/999999/000000.jpg" width="300" height="200" alt="" style="display:block;max-height:0" border="0"></a></div>
<div class="content-3 car-content"><a href="https://www.badsender.com"><img src="https://dummyimage.com/300x200/000000/ffffff.jpg" width="300" height="200" alt="" style="display:block;max-height:0" border="0"></a></div>
<span class="thumb thumb-1"><img src="https://dummyimage.com/300x200/cccccc/000000.jpg" width="50" style="display:block;max-height:0" border="0"></span>
</span>
</label>
<span class="thumb thumb-2"><img src="https://dummyimage.com/300x200/999999/000000.jpg" width="50" style="display:block;max-height:0" border="0"></span>
</span>
</label>
<span class="thumb thumb-3"><img src="https://dummyimage.com/300x200/000000/ffffff.jpg" width="50" style="display:block;max-height:0" border="0"></span>
</span>
</label>
</div>
<!--<![endif]-->
<div class="fallback">
<div class="car-content"><a href="https://www.badsender.com"><img src="https://dummyimage.com/300x200/cccccc/000000.jpg" width="300" alt="." style="display:block;" border="0"></a></div>
</div>
</div></td>
</tr>
</table>
