Newsletter, emailing : passez au responsive design

50 % des emails sont ouverts depuis un mobile. Ce chiffre marque toute l’importance d’optimiser vos newsletters et vos emailings pour les terminaux mobiles. 

emailing-newsletter-responsive-design-10-actuces

10 points d’attention pour assurer un bon confort de lecture à vos utilisateurs mobiles

1. Le point de rupture : 480 px

Les emails responsive changent en général l’agencement des blocs de texte et d’images : les 2 ou 3 colonnes d’origine sont réorganisées en une seule.

2. Des polices sûres

Ne prenez pas de risques avec des polices hors normes et utilisez les plus courantes comme Arial. La taille doit être de 14 pixels au minimum pour le texte courant et de 22 pixels pour les titres.

3. De gros boutons

Soyez généreux dans la taille des calls-to-action. 44 pixels de large et 44 de hauteur sont un minimum pour qu’ils soient visibles et facilement cliquables.

4. Des éléments cliquables évidents

Dans un email, il n’y a pas de changement d’état sur les éléments cliquables quand vous pointez votre souris (pas de changement de couleur, pas de souligné pour les liens…). A vous d’être créatifs et de tester des solutions pour mettre en évidence les éléments cliquables : soulignement, contraste de couleur, bordures…

5. Le plus important au début

Le call-to-action, une promotion par exemple, doit apparaître au début de l’emailing, sans obliger l’utilisateur à scroller.

6. Une colonne, une !

L’agencement le plus simple est le plus efficace et le plus lisible sur tous les terminaux. Evitez le multi-colonnage.

7. Un agencement logique

Si vous persistez malgré tout à mettre des colonnes, d’abord ne venez pas vous plaindre si personne ne vous lit et ensuite, faites en sorte de respecter la hiérarchie des contenus pour que les blocs s’affichent dans un ordre logique.

8. Une largeur optimale

Certaines applications comme gmail bloquent le responsive et adaptent la largeur de l’email à celle de l’écran. Choisissez une largeur de 320 pixels minimum et ne dépassez par les 550 px.

9. Des visuels adaptés

Les visuels sont réduits : la plupart des détails seront perdus. Un détail à garder à l’esprit quand vous cherchez des illustrations.

10. Le bonheur est dans le pré(-header) #haha

Il s’agit de la première phrase de votre email, souvent négligée. Elle constitue pourtant un critère décisif d’ouverture ou non du mail.

L’infographie qui va

Tout cela est très bien illustré dans cette infographie réalisée par Freshmail. A garder par devers vous.

Make responsive email newsletters! #infographic

Lire à ce sujet

Email : sommes-nous rentrés dans l’ère mobile ?

[Infographie] Ouverture des emails en France en 2014