Question à 100 bitcoins : pour quelles raisons l’emailing échapperait à la tendance du « mobile friendly » ? la réponse est assez simple : aucune !
Mais ça vous le saviez ! Comme tout bon marketeur et lecteur régulier de ce blog (donc très bon marketeur), vous êtes tout à fait conscient que le smartphone est un support incontournable de consultations des emails.
Quelques chiffres si vous aviez besoin d’être convaincus :
Selon le SCND, les internautes utilisent en moyenne 3 devices pour consulter leurs emails :
- 88% par desktop
- 74% par smartphone
- 40% par tablette
D’après cette même étude, 8 usagers sur 10 suppriment les emails s’ils ne sont pas lisibles sur tablette ou mobile !
C’est dire si l’affichage responsive de vos emails est stratégique…
Et pourtant, de nombreux annonceurs font encore l’impasse sur cette indispensable adaptation, par choix délibéré ou parce qu’ils n’appliquent pas les bons codes du responsive design.
Il est en effet parfois compliqué d’avoir ces codes en tête lorsque l’on n’est pas intégrateur et de comprendre ainsi pourquoi une belle créa email est difficilement intégrable en responsive !
Dataventure vous donne une méthodologie simple pour réussir votre créa d’email responsive :
1. Anticipez le rendu de vos emails sur mobile
Le premier réflexe est de penser vos emails en anticipant le rendu sur mobile ou tablette dès la première étape, celle de la création du template ou maquette de l’email. Le principe de base est donc simple : identifiez les espaces du mail qui devront impérativement s’adapter aux différents devices. Comptez pour cela sur 2 experts : votre graphiste et votre intégrateur html.
Ce sont eux qui seront les plus à même de vous accompagner pour harmoniser votre message pour le rendre lisible partout et par tous.
Version desktop
Version mobile responsive
Concrètement, le responsive, c’est une histoire de blocs, comme un tableau. Des blocs indépendants que l’intégrateur pourra organiser à sa guise en les faisant passer les uns sous les autres. Dès lors, tout ce qui complexifie un découpage simple et propre de votre créa (sous forme de tableau) vous attirera les foudres de votre intégrateur.
(Vous êtes en train de vous rendre compte du prix auquel sont payés les intégrateurs à passer leur journée à jouer à Tetris…)
Le travail de design et de découpage de ces blocs avec le graphiste est donc indispensable pour anticiper les besoins de l’intégrateur qui pense, respire et vit responsive (et Tetris !)
Exemple de créa (avec découpage d’intégrateur)
mal adaptée au responsive
Ce qu’il aurait fallu faire pour optimiser
l’intégration de cet email en responsive :
- Déplacer le 1er call-to-action « Je fais un don » pour qu’il ne chevauche pas le 2ème bloc (en turquoise). Recommandation : prévoir plus de hauteur pour l’intégrer dans le 2ème bloc.
- Même principe pour la photo et texte en signature de mail qu’il faut déplacer. Recommandation : les positionner sous le 2ème call-to-action « Je fais un don » ou réduire les éléments pour tout faire rentrer dans la découpe.
2. Une bonne connaissance de sa base de destinataires
Gmail, Yahoo, Orange, Caramail ou AOL… Chaque fournisseur de messagerie interprète différemment le code de vos emails (ou carrément plus du tout pour certains cités juste avant, mais ça, c’est un autre problème ;-))…
Bien connaître les spécificités de votre base en identifiant les différents fournisseurs de messagerie vous permettra de cibler vos efforts.
Des solutions simples existent ! Nous vous conseillons donc de tester le responsive design de vos templates avant envoi sur les différents supports, qu’il s’agisse des devices, des fournisseurs de messagerie ou encore des différentes applications.
3. Ne confondez pas responsive design et affichage conditionnel
Il est fréquent de confondre ces deux notions pourtant radicalement différentes. Petite touche de rappel pour les non-initiés ou les deux du fond qui n’ont rien écouté…
Le Responsive design consiste à conserver l’ensemble des éléments de base de la créa et à réduire ou déplacer ces blocs pour s’adapter aux différents devices ou fournisseurs de messagerie.
L’affichage conditionnel consiste lui, comme son nom l’indique, à choisir d’afficher ou de supprimer certains blocs que l’on juge inutiles ou inadaptés au mobile. La créa est alors visiblement plus épurée en mobile qu’en desktop.
Sur le principe, l’affichage conditionnel peut se révéler opportun pour éviter des créas trop chargées en visuels et textes qui engendrent un scroll important.
Oui mais voilà, dans la pratique, de nombreux fournisseurs de messagerie ou routeurs manient mal ou ne gèrent pas du tout l’affichage conditionnel. Résultat : des créas toutes cassées ou les blocs sont doublés (desktop ET mobiles) les uns après les autres. Beeuuuurrrk ! Et comme un malheur n’arrive jamais seul, cela augmente considérablement le poids de vos emails, ce qui entrainera en plus une mauvaise délivrabilité…
Exemple de conditionnel
acceptée par la messagerie
Exemple de conditionnel non acceptée par la messagerie
Pour éviter cette double peine et de nombreux autres désagréments (et continuer à discuter tranquille au fond de la classe), reposez-vous sur nous pour des emails vraiment responsive !
