03 20 68 01 62 contact@pole-emailing.fr

Comment adapter votre newsletter pour les résolutions mobiles ?


Aujourd'hui plus de la moitié des ouvertures de newsletters se fait sur smartphones. L'application d'une mise en forme dédiée aux résolutions mobiles se généralise et devient dès lors indispensable. Les statistiques sont implacables : Plus de 70% de vos destinataires ayant ouvert votre newsletter sur smartphone supprimeront instantanément votre message si celui ci n'est pas adapté à leur résolution d'écran. (source sarbacane marché us). Quels sont donc les bonne pratiques à adopter pour un confort de lecture optimal condition sine qua none à la diffusion d'un message efficace ?

- Proposer un gabarit fluide

Proposer une newsletter responsive, ce n'est pas concevoir un gabarit fixe et centré sur le terminal du destinataire (visuel gauche). Qui plus est avec la prise en compte par Gmail des media queries (et donc d'une mise en forme appliquée à une résolution définie), un grand nombre de smartphones aux grands écrans et fonctionnant sous le système d'exploitation android sont affectés. Il convient donc à l'instar des applications mobiles de s'adapter naturellement à toute la largeur de l'écran en proposant un gabarit fluide (visuel droite). On appel "Point de rupture" la résolution d'écran à partir de laquelle la mise en forme responsive s'appliquera. Ce dernier est égal à la largeur de la newsletter version desktop : "Si la résolution du support de lecture ne permet plus d'englober la newsletter dans sa globalité, alors on appliquera la mise en forme fluide."




- S'assurer de la lisibilité des contenus textuels sur les illustrations

Si votre image est parfaitement significative sur une version desktop, cela est il toujours le cas sur une résolution mobile ? Cela concerne notamment le cas d'images contenant du texte et prenant toute la largeur sur la version originale. Si on prend en compte le principe de fluidité vu précédemment, l'image va prendre 100% de votre écran mobile. Veuillez donc à ce que le contenu textuel soit encore lisible sur les petites résolutions mobiles. Pour cela il suffit d'augmenter la taille de texte de la version originale. L'idée par laquelle mettre une image en arrière plan et le texte par dessus est à éviter. En effet, les images en arrière plan sont mal supportées sur certaines messageries (notamment les logiciels Outlook) et nécessitent des commentaires conditionnels. D'autre part, elles ne pourront pas se redimensionner en fonction de la résolution mobile: Elles seront "rognées" sur les cotés. Une autre solution consisterait à proposer deux images différentes, l'une pour la version desktop et l'autre pour la version mobile. Proposer une adaptation responsive, c'est jouer avec la mise en forme css et non le contenu même. Bien que cela est techniquement réalisable (mais nécessitant encore des commentaires conditionnels pour Outlook), cela risque de compliquer la maintenance de votre newsletter et alourdir le poids de votre message.





Dans cet exemple, le contenu textuel est illisible sur une résolution en 320 pixels.

- Réduire les marges

A l'heure où les messages courts sont tendances et mieux accueillis par vos abonnés, la mise en place d'une version responsive fluide nous place face à un dilemme. En effet, une résolution d'écran plus petite va intrinsèquement étirer votre message sur la hauteur. Si pour l'exemple une marge de 50px peut être favorablement accueillis sur une version desktop, celle-ci paraîtra bien plus imposante sur une version mobile. Aussi, afin d'éviter les défilements interminables et ennuyeux pour vos lecteurs, n'hésitez pas à réduire vos marges verticales sur mobile !





- Adapter la taille du texte

Pour les mêmes raisons que la gestion des marges, n'hésitez pas à revoir la taille de vos titres.
Si une grande taille de police d'écriture sur la version desktop de votre newsletter peut être apprécié, cela peut vite devenir incohérent et imposant sur une petite résolution d'écran. Assurez vous que vos titres n'excède pas deux lignes sur les plus petites résolutions mobiles.
Au contraire, une taille de police trop petite pour les textes de description peut vite devenir inconfortable pour la lecture. En raison de la mobilité et l'environnement changeant liée à l'utilisation d'un smartphone, il est recommandé d'avoir une taille de police d'écriture supérieure à 14px.
Pour conclure, nous vous rappelons que pôle-emailing met à votre disposition un outil d'encodage pratique pour la gestion des retours à la ligne indésirables des éléments de ponctuation.


- Ressources utiles

Outils encodage html
Mailchimp text-size
Golden rules mobile email design
Contraintes design email par Badsender



Revenir au blog >