Défini pour la première fois en 2010 par Ethan Marcone, le « Responsive Web Design » est la technique selon laquelle la disposition des éléments graphiques est ajustée selon la grandeur de l’écran de l’utilisateur.

On sait qu’au Québec, depuis décembre 2015, plus de la moitié des courriels est lue sur des appareils mobiles ; une catégorie qui inclut aussi bien les tablettes que les téléphones intelligents. Cette catégorie comprend une multitude de tailles d’écran. 

Les chiffres nous disent que 97 % des courriels ne sont ouverts qu’une seule fois et que les courriels qui s’affichent incorrectement sont simplement effacés sans être lus. Il est pratiquement inutile d’inclure le lien pour « consulter le courriel en ligne ». Personne ne clique.

Vous envoyez des courriels à vos clients et vous ne voulez pas tomber dans le piège ? Voici donc 5 conseils pour vous assurer que vos courriels passent le test :

1) Privilégiez un design sur une colonne

Il vaut mieux penser « mobile en premier » ! Il faut concevoir le plan de votre courriel avec les éléments disposés les uns au-dessus des autres. Ainsi, ils défileront plus facilement sur un écran de portable, ce qu’un plan traditionnel à trois colonnes comme sur un écran d’ordinateur ne permet pas. La largeur optimale à privilégier étant de 600 à 650 pixels. Ceci devrait convenir à la majorité des écrans.

2) Soyez lisible

Assurez-vous d’utiliser une police d’une grosseur minimale de 14 pixels. Certains téléphones intelligents, iPhone pour ne pas les nommer, modifieront automatiquement la police si celle-ci est trop petite. Ne vous y fiez pas. Prenez l’initiative !

3) Pensez « doigts »

Mettez-vous dans la peau de votre public. N’oubliez pas que sur un portable, on utilise son doigt pour cliquer ou pour effectuer une action. Le « doigt type » couvre environ 45 pixels. Prévoyez l’espace nécessaire afin que votre client puisse aisément actionner les liens que vous mettrez dans votre courriel. Un bouton-action clair entouré d’espace blanc fonctionne merveilleusement bien !

4) Allégez

L’espace est roi. Allégez la mise en page ! Assurez-vous d’avoir entre 15 % à 20 % d’espace vide dans votre courriel (white space). Ceci facilite la lecture sur des petits écrans, fait ressortir vos éléments visuels et aide les plus gros doigts à ne pas manquer la cible.

5) Utilisez un logiciel conçu pour le design de courriels mobiles

Créer un courriel adapté aux plateformes mobiles peut être technique. Il existe plusieurs approches : responsive, fluide, évolutive. Chacune avec ses particularités. De plus, vous devez tester les résultats avant l’envoi. Les variantes ne sont pas les mêmes pour un client qui a un iPhone ou un qui utilise un téléphone Android. En plus, qu’il utilise Outlook, Hotmail ou Gmail, le visuel peut s’en trouver modifié par 3 fois encore.

Des sites comme Litmus et Cerberus fournissent des squelettes de courriel type. Ou encore des logiciels spécialisés comme Dialog Insight vous faciliteront grandement la tâche.


Fondée en 2012, Hypcom a pour mission d’aider les entrepreneurs à rester près de leurs clients par la mise en place de systèmes tels que des campagnes par courriel, l’animation de médias sociaux ou la gestion publicitaire sur Facebook.

Nous croyons qu’en aidant les entrepreneurs à démontrer leur valeur ajoutée auprès de leurs clients et ainsi décupler le nombre de recommandations obtenues, ils consacreront moins d’énergie à la recherche de nouveaux clients et passeront plus de temps à faire ce qu’ils aiment. Pour plus de détails : hypcom.ca.

– Marie-Eve Ducharme