2015 est peut-être l’année charnière du responsive design. Lorsque Google annonce que les sites web non adaptés pour mobiles seront déclassés dans les résultats de recherche sur navigateur embarqué en Avril dernier, on comprend que ce n’est pas une simple mode.
Pour les emails, c’est la même chose. Alors que 30,4 millions de français possèdent un smartphone, la Mobile Marketing Association France (mmaf) annonçait en Décembre 2014 que 41,4% des emails en France étaient ouverts depuis un smartphone ou une tablette.
Vous avez déjà essayé d’ouvrir un mail non adapté sur smartphone ? Vous vous retrouvez à devoir zoomer car la police est minuscule et à scroller de droite à gauche pour voir les textes en entier, tout ça pour lire un email dont le design n’a plus aucune allure sur votre support de poche. Généralement, ça énerve, on ne lit pas, on garde une mauvaise image de l’envoyeur et on cherche le bouton de désinscription en se disant « plus jamais ça… ». Oui, c’est du vécu.
Mobile-friendly ou responsive ?
Vous me direz « Pas nous. Nos emails sont mobile-friendly et adaptés à une lecture sur mobile ». Et là je vous réponds : attention ! Ne pas confondre mobile-friendly avec responsive design.
Le premier découle d’une approche inspirée de l’expérience utilisateur. C’est une bonne chose de vouloir créer un email qui sera facilement lisible sur mobile en utilisant des polices de caractères plus grandes, en plaçant ses éléments sur une seule colonne, en faisant attention au nombre et au poids des images, en intégrant des call-to-action bien visibles et facilement cliquables au doigt, etc… Mais ce serait s’imposer une contrainte finalement contre-productive pour les autres supports. Bref, l’approche est louable mais la technique n’est pas là.
Le responsive, c’est un travail de fond. Il ne suffit pas de créer un email dont la structure peut tenir facilement sur un mobile, il faut aller plus loin que ça et travailler le code même de l’email pour que sa structure puisse s’adapter facilement à tout support.
Pour cela, l’intégrateur peut utiliser plusieurs techniques et les combiner :
- La technique des « emails fluides » consiste à utiliser des tailles relatives (en pourcentage) pour la mise en page.
- Les Media Queries sont un ensemble de conditions selon lesquelles la mise en page s’adapte en fonction du support de lecture (pour les applications compatibles). Cette technique est une spécificité CSS3 très utile en responsive design qui permet une adaptation parfaite pour les petits supports. Les conditions sont combinables pour s’adapter à toutes les tailles d’écran (voire même résolution et orientation).
Bien entendu, je ne suis pas rentré dans les détails, mais vous pouvez lire notre livre blanc sur l’email responsive pour en savoir d’avantage.
NB : Il peut être utile d’ajouter pour la copie web une balise ‘META viewport’ dans le code html. Celle-ci permet d’adapter le zoom initial de l’email à la taille de l’écran (échelle 1.1) dans un navigateur. Mais cette balise à elle seule ne peut pas modifier la mise en page de l’email.
Tout ça pour dire qu’un email responsive adaptera non seulement sa taille à l’écran, mais également sa structure et le placement de ses contenus en fonction de l’écran d’affichage. Plus besoin de scroller horizontalement ou d’aller zoomer pour en déchiffrer le contenu.
Nous vivons aujourd’hui dans un monde hyper connecté, où chacun utilise 2 à 3 types de supports tous les jours pour lire ses emails et parcourir le web. Il est alors grand temps de passer du « mobile-friendly » au tout responsive, que ce soit pour un site web ou pour ses emails.
J’imagine que vous pouvez trouver cela compliqué, que les histoires de code html, de CSS3, de balises META, etc… vous laissent perplexe. Mais le responsive est désormais à portée de tous.
Le responsive, tout simplement, avec Sarbacane Desktop
Parce que Sarbacane a pour vocation d’être facile d’utilisation sans connaissances techniques, nous y avons intégré l’EmailBuilder : c’est un éditeur extrêmement intuitif qui permet à n’importe qui de créer des emails esthétiques et responsive sans avoir besoin de toucher au code HTML.
Il va de lui-même intégrer tous les codes nécessaires pour une adaptation parfaite de votre email à n’importe quel type de support. Vous pouvez créer votre email de toute pièce en utilisant des blocs de textes et d’images très simplement ou utiliser des templates existants conçus par les designers Sarbacane.
Testez Sarbacane Desktop et l’EmailBuilder gratuitement, et créez des emails responsive qui décupleront l’impact et la lisibilité de vos newsletters, tous supports confondus.