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
Lors de la conception d’un nouveau modèle d’e-mail dans Klaviyo, la largeur par défaut de chaque modèle est de 600 px. Vous pouvez ajuster ce paramètre dans l’onglet Styles des paramètres de votre e-mail, mais 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 600 px, nous recommandons également d’effectuer des tests approfondis pour vérifier l’apparence de votre e-mail sur différents clients de messagerie et 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 s’efforce d’offrir à ses clients "le meilleur des deux mondes" -- nous recommandons vivement de concevoir vos e-mails à une largeur de 600 px afin qu’ils soient parfaits sur les clients de bureau, puis nous ferons le travail difficile pour afficher vos e-mails afin qu’ils soient également responsifs sur les écrans plus petits (comme les appareils mobiles).
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
Comme indiqué plus haut, la largeur définie de votre modèle crée le cadre de votre contenu d’e-mail. Bien que vous puissiez vérifier manuellement que tout le contenu que vous ajoutez à votre modèle a une largeur maximale qui s’adapte au cadre défini de votre e-mail, Klaviyo s’en chargera également pour vous à mesure que vous ajoutez du contenu à votre modèle.
Klaviyo réduira automatiquement la taille des images, en conservant les proportions, et limitera par ailleurs la largeur de tous les blocs afin qu’ils ne dépassent jamais la largeur définie du modèle lui-même. Cela signifie qu’à mesure que vous ajoutez des images dans votre modèle, ou que vous créez un tableau avec plusieurs colonnes, vous verrez que tous les blocs restent contraints par la largeur d’e-mail de votre modèle.
Si vous ajoutez du code personnalisé dans des blocs de modèle, veillez à prendre en compte la largeur définie dans les paramètres Style de votre modèle. La largeur d’e-mail définie dans vos paramètres Style aura un impact sur le rendu de tous les blocs de modèle, y compris ceux contenant du code personnalisé qui pourrait tenter de définir une largeur différente, plus grande.