Conseils pour le design des newsletters

Sur cette page, vous trouverez des instructions qui s'adressent principalement aux agences de publicité et aux designers de newsletters.

Format des newsletters

Plusieurs clients fixent certaines limites aux newsletters. Les newsletters au format HTML, en particulier, sont interprétées de manière très différente par les différents clients. Vous trouverez ci-dessous quelques conseils à prendre en compte lors de la conception et de la composition d'une newsletter.

• La largeur maximale recommandée pour une newsletter est de 800 px
• Les contenus importants doivent toujours être sous format texte afin qu'ils soient impérativement visible par tous les destinataires
• Flash, formulaires ou Javascript ne peuvent pas être utilisés
• Incluez toujours une section de texte. Si un message ne contient que des images, il est facilement considéré comme du spam.
• Une structure de base simple permet de l'utiliser facilement à différentes fins
• Assurez-vous toujours que la configuration CSS fonctionne sur tous les programmes. Une liste des différentes configurations CSS : Guide to CSS support in email clients.

Polices de caractères recommandées (polices compatibles avec le web)

Lorsque vous concevez des templates de newsletters, vous devez tenir compte du fait que les ordinateurs des destinataires peuvent ne pas être équipés de polices conçues pour les médias print. C'est pourquoi vous devez utiliser des polices qui peuvent être trouvées dans presque tous les ordinateurs. Il est également possible d'utiliser des polices Web, comme celles de Google, mais comme elles ne seront pas affichées pour tous les clients de services de messagerie différents, vous devez choisir une police parmi les polices Web qui seront forcément affichées. Pour en savoir plus sur les polices que nous utilisons, voir ci-dessous.

Voici une liste des polices qui ont parfaitement fonctionné dans tous nos tests :

• Georgia
• Times New Roman
• Arial
• Verdana
• Courier New

Les polices suivantes ont fonctionné de manière assez satisfaisante :

• Impact
• Tahoma
• Trebuchet MS

Les polices Web sont des polices disponibles en ligne et leur utilisation ne nécessite pas leur téléchargement sur l'ordinateur de l'utilisateur. Les polices Web, telles que les polices Google, peuvent être utilisées dans LianaMailer.

Cependant, tous les systèmes de messagerie ne prennent pas en charge les polices Web et ces dernières peuvent se casser lors de leur utilisation.

Programmes et appareils qui prennent en charge les polices de caractères Web :

• Apple Mail 8, 9
• Outlook 2000
• Outlook 2011 (OS X)
• Outlook 2016 (OS X, not Windows)
• Thunderbird
• Android Mail
• iPhones and iPads
• All modern web browsers. 

Les programmes qui ne prennent pas en charge les polices de caractères Web :

• Outlooks 2002, 2003, 2007, 2010, 2013, 2016 (Windows)
• Gmail App
• AOL Mail, Gmail, Office 365, Outlook.com, Yahoo! Mail

Si vous utilisez une police pour le web, choisissez une police adaptée au web comme police de secours.

Lignes directrices pour les programmers

Nous recommandons de faire appel à un développeur de logiciels professionnel pour le coding d'une newsletter. Ce dernier diffère grandement du coding d'un site web HTML normal. Nous proposons ces services avec des tests, à partir d'une image PSD prête à l'emploi pour un template de newsletter, par exemple. Vous pouvez nous contacter, ou contacter notre équipe support, nous seront ravis de vous aider !

• HTML est préféré à XHTML.
• N'utilisez pas de retours autour des balises img.
• Utilisez le moins possible les tables à l'intérieur des tables.
• Le padding et la marge CSS ne fonctionnent pas de manière fiable avec chaque élément. L'utilisation la plus sûre pour le padding est de le placer sur la cellule du tableau (td). Effectuez le kerning nécessaire avec le padding sur la cellule de tableau (td) ou sur des cellules de tableau vides supplémentaires (td) en leur donnant la largeur et/ou la hauteur requises.
• L'attribut de largeur doit être défini pour toutes les images
• Disposez les images et les textes dans les cellules avec les paramètres d'alignement et de valence des cellules. Le paramètre d'alignement pour les images ne fonctionne pas pour l'arrangement d'une image ou l'entourage de l'image avec du texte.
• Optimisez (= compresser les images)
• Des fichiers gif animés peuvent être utilisés. Ils fonctionnent généralement bien mais avec certaines limitations dans le client de messagerie Outlook, par exemple.
• L'utilisation d'images png transparentes est possible.
• Les boutons CTA peuvent être codés ou des images peuvent être utilisées pour eux. Toutefois, nous ne recommandons pas l'utilisation d'images.
• La couleur de fond des modules ou la couleur des boutons CTA peut être changée par une autre.
• Les liens YouTube peuvent être utilisés dans les newsletters, généralement sans aucune installation séparée.

Verrouiller les sections du template pour les empêcher d'être éditées

Si le paramètre de verrouillage du message est activé, certaines parties du template peuvent être verrouillées afin qu'elles ne puissent pas être modifiées lors de la rédaction du message. Les cellules qui peuvent être éditées seront marquées de la classe "modifiable" (td class="editable"). Dans ce cas, les cellules qui n'ont pas été marquées sont verrouillées lors de la rédaction du message.

Seules les cellules individuelles des tableaux (td) peuvent être marquées comme modifiables, et donc une ligne ou un tableau entier ne peut pas être classé comme "modifiable".