Référence de largeur optimale du modèle d’e-mail
Objectif de cet article
Découvrez pourquoi la largeur par défaut des modèles d’e-mail est de 600 px, pourquoi il s’agit d’une norme du secteur pour les e-mails marketing aujourd’hui, et comment vous assurer que vos e-mails s’affichent de manière cohérente sur tous les appareils.
Largeur du modèle d’e-mail
La largeur par défaut dans l’éditeur d’e-mail par glisser-déposer de Klaviyo est de 600 px. Pour ajuster la largeur :
- Dans l’éditeur d’e-mail, sélectionnez Modifier les styles.
- Saisissez une valeur en pixels dans le champ Largeur.
- Fermez le panneau Modifier les styles pour enregistrer vos modifications.
Klaviyo ne recommande pas d’augmenter la largeur de votre modèle, sauf si cela est nécessaire pour une mise en page plus avancée. Si vous ajustez la largeur au-delà de 600px, nous vous recommandons également de tester l’apparence de votre e-mail dans différents clients de messagerie et sur différents appareils.
Comprendre la largeur des e-mails
Lorsque vous concevez un e-mail dans Klaviyo, la largeur établie de votre modèle crée le cadre de votre contenu d’e-mail. Tout contenu que vous ajoutez à votre modèle doit tenir dans ce cadre.
La largeur d’e-mail de 600 px est devenue une norme du secteur en marketing par e-mail, car, historiquement, la taille moyenne d’un viewport dans tous les clients de messagerie desktop populaires se situait entre 500 et 600 px. Le viewport est la zone encadrée sur un écran d’affichage dans laquelle un destinataire lira votre e-mail. En définissant la largeur de votre e-mail à 600 px, vous pouvez vous assurer que, pour la taille moyenne du viewport, vos destinataires n’auront pas à effectuer beaucoup de défilement horizontal pour voir l’ensemble de votre contenu.
La norme des e-mails d'une largeur de 600 pixels est restée et demeure courante aujourd'hui, même si l'optimisation des e-mails sur différents appareils (tels que les mobiles) devient de plus en plus importante. Klaviyo recommande de concevoir vos e-mails avec une largeur de 600 px pour les clients de messagerie sur ordinateur. Dans l’éditeur d’e-mails par glisser-déposer, activez Optimiser pour mobile sous Modifier les styles > Optimisation mobile afin d’appliquer des ajustements responsives pour les écrans plus petits, puis fermez le panneau pour enregistrer vos modifications. Les clients de messagerie varient dans leur prise en charge de l’optimisation mobile, alors testez votre e-mail sur différents clients et appareils.
Notez toutefois que le fait de s'en tenir à une largeur de 600 px permet d'optimiser les e-mails créés avec Klaviyo pour l'affichage sur mobile. Les messages électroniques conçus pour être beaucoup plus larges risquent davantage d'être faussés lorsqu'ils sont réduits sur un appareil mobile, à moins qu'ils n'aient été soigneusement conçus et optimisés à cet effet. C'est pourquoi nous vous encourageons à ne pas augmenter la largeur de votre modèle au-delà de 600px, à moins que vous ne disposiez d'un concepteur et/ou d'autres ressources dédiées à l'optimisation de votre mise en page pour tous les clients/appareils.
En savoir plus sur les options de Klaviyo en matière d’optimisation pour mobile.
Contenu du modèle et définition de la largeur de l’e-mail
La largeur définie de votre modèle crée le cadre de votre contenu d’e-mail. Les marges intérieures et les bordures réduisent l’espace disponible pour le contenu au sein de ce cadre.
Klaviyo réduit automatiquement l’échelle des images dans les blocs d’image afin qu’elles s’adaptent à l’espace disponible, tout en préservant le rapport hauteur/largeur. Les blocs de tableau utilisent la largeur disponible pour leurs colonnes. Ces paramètres vous aident à maintenir votre mise en page dans la largeur d’e-mail du modèle, mais ils ne garantissent pas que le HTML personnalisé s’y adaptera.
Si vous ajoutez du code personnalisé dans des blocs de modèle, veillez à ce que ses largeurs restent dans l’espace disponible de votre mise en page. Vérifiez le paramètre Largeur de votre modèle dans Modifier les styles. Du HTML personnalisé avec des largeurs fixes supérieures à l’espace disponible peut déborder ou s’afficher différemment selon les clients de messagerie. Testez votre contenu personnalisé sur ordinateur et sur mobile avant l’envoi.