Plusieurs contraintes et spécifications entrent en jeu quand on parle de design de courriel HTML. Les interpréteurs sont multiples et capricieux et il est difficile de prévoir comment s’affichera votre courriel dans toutes les conditions.
Nous vous présentons les principales règles à respecter pour mettre toutes les chances de votre côté.
1. Largeur maximale recommandée = 600 pixels
Les logiciels et services de courriels contraignent souvent l’espace de lecture. Si vous utilisez le mode expert ou que vous recevez vos maquettes de votre infographe, vous devrez faire attention à ce détail.
Avec l’éditeur régulier de Cyberimpact, votre courriel et vos images seront toujours correctement dimensionnés.
Lisez notre article sur la largeur maximale des courriels html.
2.a) Les images ne sont pas affichées par défaut sur tous les logiciels
Gmail vient d’annoncer l’affichage des images par défaut. Mais pour l’instant, la plupart des logiciels de courriels ne les téléchargent pas avant que l’usager ait choisi de le faire. Ce qui signifie qu’au premier coup d’œil le lecteur ne verra qu’une série de carrés vides. Votre belle mise en page risque de ressembler à une peinture à numéro. Pas très vendeur, n’est-ce pas?
2.b) N’utilisez pas seulement des images
Vous savez maintenant qu’une mise en page composée uniquement d’images vous mettra moins à votre avantage qu’un découpage incluant du texte et des couleurs de fond.
Mais il est bon de savoir aussi qu’un courriel composé uniquement d’images vous défavorisera au niveau des filtres anti-pourriel, ce qui peut faire en sorte que votre courriel soit marqué comme indésirable et ne rejoigne jamais votre membre.
- Réservez le coin en haut à gauche pour un logo de taille raisonnable.
- Fournissez un lien vers la version en ligne de votre courriel ou vers votre site web.
- Ayez une mise en page composée de textes et d’images.
- Entrez un texte alternatif pour toutes vos images.
3. Codez comme en 1998
Les logiciels courriels ont chacun leur propre interpréteur HTML. Certains supportent quelques fonctionnalités plus avancées, mais tous présentent de sérieuses limitations de sécurité et de présentation visuelle.
Par exemple : formulaires, flash, javascript, feuilles de styles et iframe ne fonctionneront pas.
- Créez votre mise en page en tableaux html.
- Codez vos styles css directement sur les éléments.
- Entrez des liens vers les médias (vidéo, page web, etc) plutôt que d’essayer d’intégrer les médias directement.
- Créez plusieurs adresses pour tester vos courriels sur plusieurs logiciels.
*Pour les agences, Litmus est un outil de tests extrêmement pratique, mais son utilisation est payante.
4. Utilisez des polices web
Si vous tentez d’utiliser la police « Bell Gothic » dans votre courriel et qu’elle n’est pas installée sur l’ordinateur de votre membre, son système remplacera automatiquement cette police par une autre.
Utilisez une des polices suivantes : Arial, Comic Sans MS, Courrier New, Georgia, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS ou Verdana. Toute autre police devra être insérée sous forme d’image.
5. Pensez aux téléphones intelligents
De plus en plus de gens possèdent et utilisent un téléphone intelligent pour consulter leurs courriels. Selon une étude de BlueHornet publiée en janvier 2012, 70% des lecteurs suppriment sans les lire les courriels qui ne s’affichent pas correctement sur leur plateforme mobile.
Un autre point important : la vitesse de téléchargement. La bande passante de ces appareils est réduite et les utilisateurs paient pour les données qu’ils téléchargent. Ils préféreront donc un courriel avec une mise en page relativement simple, sans image ou contenu superflu.
Les modèles de Cyberimpact sont désormais compatibles sur mobile.
Utilisez l’éditeur régulier de Cyberimpact ou un modèle pré dessiné et gardez votre courriel simple et droit au but.
6. Soyez facilement identifiable
Les courriels non-désirés prennent le chemin de la corbeille, c’est connu : c’est pourquoi il est important d’avoir la permission de vos membres de leur envoyer des communications par courriel. Dans un même ordre d’idée, il est essentiel que ceux-ci soient en mesure de vous identifier facilement.
Utilisez un visuel simple et à votre image et en faites attention au sujet de votre envoi afin qu’il soit clair et concis.
Par exemple : Cyberimpact – Statistiques et rapports améliorés
Sera beaucoup plus efficace que : Infolettre mars 2013 – des nouvelles de Cyberimpact
Conclusion
La meilleure approche lors du design d’un courriel HTML est toujours de garder ça simple et d’entretenir la relation avec le membre. L’éditeur régulier de Cyberimpact vise à écarter pour vous les difficultés techniques reliées à l’envoi et ainsi vous permettre de vous concentrer sur votre message.
Consultez notre guide pour créer votre modèle avec Cyberimpact