SlideCare #1 : L'Emailing Responsive

19
EMAILING RESPONSIVE Augmentez les performances de vos emailings en les adaptant à la consultation sur mobile ! SlideCare #1

description

 

Transcript of SlideCare #1 : L'Emailing Responsive

Page 1: SlideCare #1 : L'Emailing Responsive

EMAILING RESPONSIVEAugmentez les performances de vos emailings en les adaptant à la consultation sur mobile !

SlideCare #1

Page 2: SlideCare #1 : L'Emailing Responsive

If you don’t have a mobile strategy, you don’t have a future

strategy.

2

Eric Schmidt, Google, Executive Chairman

Page 3: SlideCare #1 : L'Emailing Responsive

Pourquoi optimiser vos emailings sur mobile ?

Comme 50% de la population,

vous lisez vos emails depuis votre mobile. Vous avez donc dû vous rendre compte à quel point cette tâche peut s’avérer

désagréable

Page 4: SlideCare #1 : L'Emailing Responsive

90%des mobinautes lisent leurs emails sur leurs devices mobiles

En 2013, 42% des emails sont ouverts et lus sur un mobile

90% des emailings ne sont pas adaptés à la taille de l’écran et seulement

14% des annonceurs adaptent leurs emailings à tous les écrans.

Sources : Litmus –”Email Analytics” (March 2013), eConsultancy “Conversion Rate Optimization Report”, Adobe “2013 Digital Publishing Report: Retail Apps & Buying Habits”

Page 5: SlideCare #1 : L'Emailing Responsive

S’adapter aux supports de lecture des cibles

permet donc d’optimiser le ROI et

de favoriser une action lors de la lecture de l’emailing

Page 6: SlideCare #1 : L'Emailing Responsive

- 7,6% + 98% + 49%

La famille s’agrandit …

Source : comscore 2013

Stratégie multi-screen

Evolution des ventes en France en 2012

Page 7: SlideCare #1 : L'Emailing Responsive

Offrir (enfin) une expérience adaptée au support de votre cible

Augmenter le ROI de vos campagnes d’emailings

Proposer une nouvelle expérience à vos utilisateurs

Objectifs

Page 8: SlideCare #1 : L'Emailing Responsive

Quelles sont les bonnes pratiques pour optimiser son emailing ?

Page 9: SlideCare #1 : L'Emailing Responsive

Comment améliorer l’ergonomie de son email ?

74% des utilisateurs mobiles quitteraient un site si celui-ci n’est pas totalement chargé en 5 secondes.Même avec une connexion en Edge, votre email doit se charger vite. Pensez donc à mettre des liens de textes cliquables, en remplacement d’images non-chargées.

Rapidité

Page 10: SlideCare #1 : L'Emailing Responsive

Soignez l’ergonomie de votre email afin de rendre la navigation accessible et l’expérience utilisateur optimale.Placez un visuel attractif et engageant. Utilisez du texte de 14 px minimum placé dans une seule colonne comprise entre 500 à 600 px.

Simplicité

Page 11: SlideCare #1 : L'Emailing Responsive

Comment améliorer l’ergonomie de son email ?

Intégrez des call-to-action visibles et cohérents pour optimiser le ROI de vos emails.Les éléments cliquables doivent être visuellement identifiables. Un bouton doit faire minimum 50 x 50 px pour être cliquable.

Conversion

Page 12: SlideCare #1 : L'Emailing Responsive

Twitter : un cas d’école

Quel email préférez-vous lire ?À gauche, une version non adaptée mobile. A droite, le même emailing en responsive.

Page 13: SlideCare #1 : L'Emailing Responsive

Un peu de technique maintenant !

Page 14: SlideCare #1 : L'Emailing Responsive

Un emailing existe en deux formats

Texte brut : Ce format est parfaitement lu par

tous les clients mail, mais aucune mise en page possible (pas

d’images, pas de CSS, pas de design)

HTML : Permet de réaliser des emails

graphiques mais c’est la source du problème car chaque client mail

interprète le code HTML à sa façon

Par conséquent, maitriser la technique des Media Queries en

CSS rendre compatible votre email sur mobile

Page 15: SlideCare #1 : L'Emailing Responsive

93%des mobiles vendus gèrent les media queries via les clients mail natifs

Les Media-Queries, permettent d'adapter la restitution de sa page html à différentes caractéristiques des terminaux. Il gèrent :

Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation

Page 16: SlideCare #1 : L'Emailing Responsive

La media queries « only screen » est une condition CSS qui est utilisée pour spécifier une visualisation écran. En d’autres termes, cette condition ne concerne pas une imprimante, mais uniquement un écran. A cela s’ajoute une propriété de « taille » maximum qui implique qu’elle ne concerne que les écrans qui ont une taille inférieure à celle spécifiée.

@media only screen and (max-width: 480px) /*condition @media : concerne un écran qui ne doit pas dépasser 480px de large*/{ table[class=1], td[class=1], img[class=1] { /*on applique aux table, td et images de la class 1 une largeur de 135px*/width:135px !important; } img{ /*on applique à toutes les images une hauteur automatique en fonction de la largeur*/height:auto;} } /*on ferme la media queries*/

Code CSS3

Page 17: SlideCare #1 : L'Emailing Responsive

Gardez à l’esprit que l’emailing responsive est une façon de faire évoluer le code HTML et peut s’intégrer facilement dans votre outil de CRM.

Disposer d’une stratégie d’emailing responsive, c’est activer un levier de croissance pour votre marque.

Pour être optimale, cette innovation doit s’inscrire dans la stratégie mobile de votre marque.

Le mot de la fin

Page 18: SlideCare #1 : L'Emailing Responsive

N’hésitez pas à nous solliciter !

Nous réfléchirons ensemble à la mise en place de vos besoins mobiles.

Page 19: SlideCare #1 : L'Emailing Responsive

19

Care8 rue Saint Augustin 75002 Paris

Tél. : 01 40 40 60 60www.agencecare.com

Vos contacts :Raphaël Journé, [email protected]

Nicolas Petremann, [email protected]