Email et Responsive Design : analyse de quelques réalisations

Depuis quelques mois, la tendance s'accélère et les réalisations d'emails adaptés à la lecture sur mobile se multiplient.

Il semble que le responsive design soit la technologie actuellement la plus déployée plutôt que d'adapter le contenu sur des formats (tableaux) qui se redimensionnent quelle que soit la taille de l'écran.

Les emails adaptatifs sont assez délicats à réaliser, car maintenir un code compatible avec les plateformes Outlook, Yahoo Mail notamment, et celle d'iOS, est assez difficile et complexe. Il faut une certaine habitude et j'ai vu quelques agences développer du code responsive mais sans toujours tester l'impact sur les autres environnements.

Enfin, dernière précision importante et décevante : le responsive ne fonctionne pas sur Android client gmail, quelle que soit la version de ce dernier. Pour le client natif Android (E-mail) pas de problème de rendu.

Alors, est-ce vraiment intéressant et performant de coder en adaptatif ? Ce sera l'objet de mon prochain article, mais je peux vous affirmer d'ores et déjà que les résultats sont parfois décevants.

Deux tendances de conception semblent se dessiner sur les emails responsive, qui sont liées à deux usages :

• l'email relai d'un média/journal, et
• l'email de promotion et de vente.

Email relai d'un média/journal : gestion fine du multi-colonnage

Pour l'email média, le principe est de passer d'un multicolonnage à un colonnage simple et ré-agençant les colonnes de droite (ou de gauche) pour les faire passer en bas de l'email. C'est ce que nous avons fait pour la newsletter du blog Pignonsurmail que je vous présente ci-dessous dans un premier essai (perfectible je pense).

Rendu fixe et mobile (iOS)
Si vous vous abonnez à la newsletter de Pignonsurmail (en haut à droite du blog), vous aurez le plaisir de recevoir ce code chaque mois dans votre boite aux lettres.
Le code source est accessible ici (conception Grenade & Sparks et P. Corvino).

Voici d'autres exemples :

Nom de l'annonceur : Viadeo
Rendu fixe et mobile (iOS)

Pour la promotion d'une application mobile, il est évident que le code doit être responsive, ce que réalise très bien Viadeo (réalisation par LSFinteractive).
Le code source est accessible ici

Nom de l'annonceur : Sarbacane
Rendu fixe et mobile (iOS)

Il y a longtemps que le studio de Sarbacane réalise des emails adaptés au mobile avec différentes technologies. Le tarif est d'ailleurs clairement présenté sur leur site avec un coût de 199 € (!) pour une adaptation mobile à partir d'une création existante.
Cerise sur le gâteau, Sarbacane vient de publier un livre blanc bien réalisé de 34 pages sur le responsive design.

Enfin, le CIC avec ses voeux adaptatifs, et qui a été l'un des premiers annonceurs avec Experian à généraliser en 2012 tous ses emails en "Responsive".  

Nom de l'annonceur : CIC
Rendu fixe et mobile (iOS)

 

Email de vente : simplifier le contenu et remonter un appel au clic

Pour l'email de vente, la conception est différente. C'est la compréhension très rapide de l'offre et la possibilité de générer un appel au clic rapide qui sont prioritaires. On va donc simplifier le message (fonction hide qui permet de cacher des visuels) et remonter en haut de l'email l'appel au clic (dans un format très lisible) et la présentation de l'offre.

Exemple avec La Redoute

Un exemple de simplicité dans le redesign où seul le message principal apparaît avec un appel au clic. C'est la bonne pratique.

Rendu fixe et mobile (iOS)

Codage interne Laredoute avec l'aide de l'agence Bmobile.

Les emails de nos formations seront maintenant en Responsive Design. Le code source est accessible ici.

Quelques difficultés de codage rencontrées régulièrement dans ces exercices de responsive :

• Le webmail de Yahoo interprète le responsive design il  faut donc le désactiver
• Enfin, bizarrerie des mobiles, il faut que le code HTML fasse une longueur de 1 019 caractères pour être correctement chargé,
• ...

Je remercie les prestataires que nous avons fait travailler sur ce dossier et notamment :

• l'agence Grenade and Sparks, qui conçoit avec habileté la quasi intégralité de mes supports en ligne, et dont je vous invite à découvrir la dernière web série "Digital Désespérément",
• Pascaline Corvino, free lance infographiste et intégratrice HTML de talent, qui travaille sur ces sujets depuis longtemps.
• Enfin, Email on Acid et ses forums sont une source précieuse d'information que je vous recommande.

On pourra lire aussi, pour alimenter un débat contradictoire sur l'intérêt du responsive Design

Le responsive design n'est pas la bonne réponse de B Fridlansky,

Stop Wasting Time Mobile Email Responsive Design de Tim Watson

Et enfin un article plus technique sur le responsive Design sur le blog d'AlsaCréations

Vous souhaitez en savoir plus sur le sujet, découvrez comment sur notre site avec la prestation de conseil diagnostic mobile : adapter vos emailing au mobile., ou encore avec la formation de Camille Afchain lors de la prochaine Email Academy Développer son email en HTML.

Comments

[Rédigé par : Guillaume Fleureau]

Bonjour Bruno,

J'en profite pour signaler la parution du livre blanc de Sarbacane : "l'email responsive : optimiser vos campagnes pour l'affichage mobile" disponible gratuitement ici : http://www.sarbacane.com/livre_blanc_email_responsive.asp

[Rédigé par : Pignonsurmail]

Merci de pour cette précision Guillaume, ce livre blanc est d'ailleurs cité dans l'article ci dessus. Peux tu nous dire quelques mots sur ton premier livre que tu viens de sortir sur l'emailing ?

[Rédigé par : yana]

il ne faut pas oublier les pratiques classique de l'emailing.. viadeo est bien jolie mais sur spammassasin il est a 8.2 points.