• Suivez le fil RSS !

E-mailing : Place aux emails responsive

7 Mar 2013 par     6 Commentaires    Catégorie: e-Mailing

Emails ResponsiveLes emailings doivent désormais être lisibles sur tous les supports. Pourquoi et Comment réaliser des emails Responsive ?

L’emailing reste un levier marketing important. Désormais, les internautes utilisent de plus en plus leur mobiles et leurs tablettes pour accéder à leurs emails. D’où la nécessité de travailler ses newsletters et autres emailings promotionnels afin qu’ils soient lisibles sur tous les supports.

En outre, on relève que l’email connaît désormais un meilleur taux d’ouverture sur les supports mobiles.

Voici donc les dernières techniques et recommandations en matière d’emails responsive, ou plutôt d’emails optimisés pour un rendu sur différents supports et différents clients de messagerie. Car nous le verrons, l’email responsive, n’est pas des plus adapté : certaines messageries ne supportant pas le langage Media Queries…

Au sommaire :

 

L’avènement du mobile : l’utilisation des téléphones et tablettes pour accéder aux emails

En France, fin 2012, ce sont désormais 24 millions de personnes connectées grâce à un Smartphone. Contre 17 millions fin 2011, soit une hausse de 41%.

Différentes études démontrent que la consultation des emails restent une activité mobile par excellence. Plus besoin d’allumer son ordinateur, les e-mails sont désormais visualisés sur smartphones.

[Source Illustrations : captures de l’infographie de l’agence Edatis]

Usages de l'internet mobile

 

 

 

 

 

 

 

 

Et ces mobinautes consultent plusieurs fois par jour leurs emails :

emails sur mobile

 

 

 

 

 

 

 

Le levier emailing renaît avec le mobile

On le disait mort; grâce à l’avènement de l’utilisation des supports mobiles que sont les smartphones et tablettes, l’emailing n’a pas dit son dernier mot et reste un levier e-marketing incontournable. Selon plusieurs spécialistes, il s’agit même du levier ayant un meilleur taux de clic, un taux de conversion et un ROI plus performants.

Un taux d’ouverture des emails supérieur sur mobile

D’après différentes études en 2012, les emails sur mobile ont désormais un meilleur taux d’ouverture que les emails consultés depuis un ordinateur (ci-dessous, capture de l’infographie de l’agence Edatis)

Taux d'ouverture emails selon les supports

 

 

 

 

 

 

 

 

 

 

 

 

L’étude de l’agence américaine Litmus, “Email Analytics” d’octobre 2012 portant sur près d’un milliard d’emails au niveau mondial, montre également que désormais ce sont 38% des emails qui seraient ouverts sur mobiles, pour 33% sur client mail et 29% sur webmail.

 

 

Les techniques pour concevoir des emails adaptés aux supports mobiles

[source illustrations : Livre Blanc “emails responsive” de Sarbacane Software]
Pour envoyer des emails lisibles sur tous les supports, plusieurs méthodes s’offrent à nous :

 

L’email optimisé pour tous les supports

email-optimisé

 

Il s’agit en fait du même design utilisé pour tous les supports. A condition que ce design soit simple, sur une colonne,  avec des typos de grandes tailles, de grandes images, de larges boutons d’appel.

Les + : un design simple ce qui permet de focaliser le e-mailing sur un seul message

Les – :  Le design sur grand écran est donc limité par les contraintes imposées pour une optimisation mobile.

 

 

 

L’email fluide (ou scalable)

email-fluide

Ici, il s’agit d’utilisé des tailles exprimées en pourcentage, pour définir la largeur de l’email et des visuels.

Ainsi, les blocs de contenu sont redimensionnés en fonction de la largeur du support mais la structure de la page reste identique.

Les + :  Compatible avec la plupart des messageries, une seule version au codage simple.

Les – : n’est pas conçu spécialement pour les supports mobiles. Le design reste sur une colonne.

 

Techniquement : la largeur de l’email est définie précisément, mais une déclaration CSS précise le pourcentage d’affichage selon les tailles d’écrans :

style = “width : 80%; max-width : 600px; height : auto;”

width : la largeur de l’image en pourcentage
max-width : la largeur maximum de l’image pour les grands écrans
height : la hauteur de l’image est déclarée en automatique, pour en conserver les proportions

 

 

L’email adaptif (ou responsive)

email-responsive

Il s’agit véritablement d’un e-mail responsive,  utilisant une mise page spécifique selon les supports et périphériques, grâce aux déclarations Media Queries. Il est ainsi possible de modifier la position des éléments en fonction des tailles d’écrans de l’utilisateur et même d’afficher une version spécifique pour mobile.
Les + : spécialement conçu pour chaque support avec des designs travaillés en fonction.
Les – : incompatibilité avec certaines messageries et codage plus complexe.

 

Techniquement : il faut utiliser les Media Queries pour spécifier les styles css en fonction des tailles d’écran :

@media only screen and (max-device-width : 480px)

Avec la déclaration @media, on indiquera des styles css pour des écrans dont la largeur ne dépasse par les 480 px par exemple.

 

 

La technique Viewport

Une autre approche, pour pallier à l’incompatibilité des Media Queries sur certains webmails, consiste à utiliser la propriété Viewport. Pour plus de détails, le blog wixiweb explique cette technique.

 

Pour les webdesigners et intégrateurs, je ne peux que recommander cet article complet tel un tutoriel publié récemment par le célèbre site Alsacréations pour tout savoir de la création et des incompatibilités en matière de design d’emails multisupports.

 

 

Les Bonnes Pratiques

Quelle que soit la technique utilisée, les bonnes pratiques sont de mises. En voici la check list :

  • Ratio Texte / Image : certains FAI ou messageries peuvent bloquer les emails ne comportant que des images. Attention à conserver au moins un ratio de 60% d’images et de 40% de textes.
  • Taille des typos : 22 px et plus pour les titres, 14 px pour le corps de texte
  • Taille des boutons “call to action” : privilégier une taille de 44*44 px
  • Favoriser des espaces autour des liens et boutons pour qu’il soit “touchable” aisément
  • Hébergement des images sur serveur
  • Images avec attribut ALT : certaines messageries n’affichant pas les images par défaut, il est important de renseigner la balise ALT afin que le texte remplaçant l’image soit bien visible.
  • Preheader : D’une manière générale, le Preheader doit être bien pensé; s’il contient une image, il ne sera pas forcément visible selon les clients mails. Dans certains webmails, le preheader sera utilisé comme extrait, telle une introduction ou une courte description, tout comme sur iPhone et iPad. Hors une coutume encore actuelle consiste à placer le lien miroir tout en haut de l’email sous la forme d’une phrase type “si vous ne lisez pas cet email, consultez la version en ligne”. Si ce texte est important et doit être placé pour permettre une visualisation en ligne, le texte du haut qui sera visible tel un extrait et que l’on nomme Preheader devrait plutôt consister à une accroche donnant envie d’ouvrir le mail.
  • Connaître les supports utilisés par votre audience : le secteur du luxe voit par exemple une part très importante de mobinautes sur iPad.
  • Tester le design sur les différents supports et sur ceux principalement utilisés par votre audience (voir ci-dessous les outils de testing)

 

L’agence Litmus vient de publier une présentation SlideShare sur les fondamentaux de l’email “Mobile Friendly” :

 

 

Les templates

Bon nombre de sites propose désormais des templates de newsletter pour des emailings Responsive :

 

Zurb – Responsive Email Templates 
Zurb Responsive Email Templates

Zurb nous propose 5 layouts d’emails responsive pouvant s’adapter à tous les écrans et surtout supportés par la grande majorité de clients de messageries (sauf Outlook 2007, 2010 et 2013).

Zurb travaille étroitement avec Campaign Monitor mais ses templates fonctionnent avec d’autres systèmes comme MailChimp.

 

 

 

 

Templates de MailChimp
MailChimp Email Templates

 

36 templates flexible sont proposés pour un rendu testé sur la plupart des messageries.

On peut ensuite les customiser dans un éditeur de code.

 

 

Template Builder de CampaignMonitor 

Campaign Monitor Template Builder

Un système de construction pour des emails adaptés à l’affichage sur les différents supports et les différents clients mail.

 

 

 

 

 

 

 

 

Les outils pour vérifier le rendu graphique et la délivrabilité

On ne peut parler d’emailing sans évoquer la délivrabilité.

Plusieurs problématiques sont inhérentes en terme de délivrabilité des emails, d’une part côté conception technique de l’email étant donné le nombre de plateformes existantes, et d’autre part pour éviter que l’email ne se retrouve dans les spams.

 

Email on Acid

 

Email on Acid

Pour tester le rendu graphique mais aussi la délivrabilité : 2 emailings en tests sont possible gratuitement.

 

 

 

Email Spam Test

 

Email Spam Test

Pour tester la délivrabilité de l’email.

 

 

 

 

 

Si vous connaissez d’autres outils ou avez d’autres pratiques, n’hésitez pas à commenter ci-dessous.

 


Sources :
– Livre blanc “L’e-mail responsive” de l’agence Sarbacane Software (février 2013)
– Graphique “Mobile Emails Opens Increase” par l’agence Litmus (octobre 2012)
– Infographie “Email désormais majoritairement mobile” par Returnpath (décembre 2012)
– Infographie “Emailing Mobile” par Edatis (février 2013)
Infographie “Anatomy of the Perfect Mobile Email” par l’agence Litmus (février 2013)
– Article et commentaires “Un e-mail en HTML responsive multi-clients” par Alsacréations (janvier 2013)
– Article “Optimiser vos emailings pour mobile : 5 astuces” sur Webmarketing.com (janvier 2013)
– Article “L’intégration d’e-mails responsive” sur Hteumeuleu (janvier 2013)
– Article “L’emailing en 2013 : responsive et comportemental” sur Blogolifeld (février 2013)
– Article “Anatomie d’un email mobile efficace”  sur c-marketing (février 2013)
– Article “M-commerce : de l’intérêt d’utiliser le Responsive Design en Email” sur Web Marketing Waves (mars 2013)


 

6 Commentaires + Ajouter un commentaire

  • Excellente synthèse. Merci pour ce travail.
    Vu les sources et leur qualité difficile d’être plus exhaustif.
    Voici un dérivé d’ “Email On Acid” qui peut être intéressant : http://www.emailology.org/
    Au plaisir de lire d’autres articles aussi intéressant :)

  • un article complet et interessant.
    L’emailing et loin d’être mort, reste à bien cibler, avoir un l’objet percutant.
    Aujourd’hui avec la consultation multi-devices le contenu se doit être en plus être responsive, cela devient indispensable.

    Après il faut une bonne création, pour avoir des exemples il y a ce site de veille http://emailing-archives.net qui peut être très utile. les contenus sont à jour quasi quotidiennement.

    My 2 cents
    Ayo

    • Merci Ayo. Ce lien semble être une bonne source d’inspiration et de tendances e-mailing.

  • […] votre mail sanctionner directement par les messageries. Ici un article ou figure un rappel de ces bonnes pratiques de l’emailing et ici vous trouverez un site conçu spécialement pour vous rappeller les […]

  • Bonjour et merci pour votre article !

    Je n’arrive pas à trouver ma réponse sur le web, pouvez vous m’aider :
    Je réalise de emailings en images, en général 3, max 4.
    Donc le fichier html est très simple, juste un appel des jpg.

    J’aimerai trouver un code qui, en fonction de la largeur écran charge 3 autres image jpg que j’aurai adapté.

    Existe t’il un bout de code simple ?
    Merci de votre aide !

Quelque chose à dire ? Allez-y, postez un commentaire !

XHTML: Vous pouvez utiliser ces balises: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>