Créer des messages parfaits dans tous les clients de messagerie

Sep 14, 2025

Comment

Pour toute campagne de marketing par courrier électronique au travail, le courrier électronique doit atteindre la boîte de réception et se démarquer de tous les autres. Cependant, l'histoire ne se termine pas là. Votre email doit bien rendu si vous souhaitez que vos abonnés ouvrent votre courrier électronique, cliquez sur la CTA et obtenez-en convertis.

Le rendu est un problème car chaque courriel et appareil perçoit le code différemment. Le code qui fonctionne bien avec un client de messagerie peut créer un problème de rendu dans un autre. Pour rendre les choses encore plus difficiles, même les clients de messagerie les plus largement utilisés viennent avec des bizarreries et des problèmes. Dans cet article, je vais examiner les défis et les solutions de contournement pour chacun des principaux clients de messagerie.

Perspectives

[dix]

Ce ne serait pas une hyperbole de dire que nous émettons des développeurs email frémissant à la pensée des perspectives. La raison évidente est les nombreux défis de rendu présentés par ce client de messagerie. Ce qui est surprenant, c'est que les sociétés ont toujours des perspectives comme leur client de messagerie standard et une faible proportion de vos abonnés sont encore fidèles à cela.

Regardez certains des défis et des hacks pour Outlook:

Défi: Outlook ne supporte pas les marges dans & lt; p & gt; et & lt; a & gt;
Pirater: Si vous voulez fournir des marges, utilisez le & lt; td & gt; étiqueter; Les majuscules doivent être utilisées en dehors de la balise et des minuscules en ligne

Défi: Le rembourrage n'est pris en charge que sur certains attributs HTML (sans compter sur & lt; div & gt; ou & lt; p & gt; Mots clés)
Pirater: La disposition basée sur la table est la mise la plus sûre de surmonter ce problème

Défi: Outlook est le seul client de messagerie qui ne prend pas en charge les gifs
Pirater: Comme certains clients ne verront que le premier cadre de votre animation, cela devrait inclure toutes les informations importantes, fonctionner uniquement pour quelques millisecondes et avoir un sens comme une image autonome

Défi: Outlook ne prend pas en charge Google Fonts et implémentera des temps neufs romains comme une relèvement
Pirater: Intégrer le code suivant ...

 & lt;! - [Si MSO] & GT;
& lt; type de style = "text / css" & gt;
.fallback-text {
Font-famille: Arial, Sans Serif;
}
& lt; / style & gt;
& lt;! [endif] - & gt;

Outlook.com

Une nouvelle version de Outlook.com a été introduite au début de 2016 mais la version héritée n'est toujours pas hors d'utilisation. Voici les défis et les hacks particuliers à ce client:

Défi: Un écart inutile de 4-5px est ajouté en dessous des images
Pirater: Définissez la propriété d'affichage comme "img {affichage: bloc;}" Pour enlever le rembourrage

Outlook.com introduces unnecessary spacing between your images — Outlook.com introduit un espacement inutile entre vos images

Défi: Ne supporte pas les frontières rgb
Pirater: Utilisez des codes Hex pour définir la couleur de fond HTML

Défi: Ajouter # dans href Les liens brisent la balise d'ancrage et déplacent le CSS vers un autre endroit
Pirater: Utilisez le nom de domaine plutôt que href #

Application indigène iPhone

L'application de messagerie de l'iPhone native est le client le plus utilisé et prend en charge tous les éléments interactifs que vous trouverez généralement dans le courrier électronique: gifs, menus, accordéions, compte-à-bas, curseurs, etc. De plus, il permet également au marketing par courrier électronique d'utiliser des images de retina haute définition pour une expérience utilisateur géniale.

iOS10 est devenu d'autant plus convoité car les utilisateurs peuvent désormais ajuster le nombre de lignes de texte de prévisualisation dans des courriels et même opter pour la liste-désinscription. Néanmoins, malgré ces points forts, l'application native de l'iPhone présente également certaines lacunes. Nous allons jeter un coup d'oeil.

iOS10 users can opt for list-unsubscribe — Les utilisateurs iOS10 peuvent opter pour la liste-désinscription

Défi: Minuscule texte est automatiquement redimensionné
Pirater: La taille minimale des polices pour les en-têtes doit être de 22px et pour le texte du corps 14px

Défi: La libération de nouveaux modèles iPhone peut causer des problèmes de rendu
Pirater: La disposition du fluide garantit des courriels d'affichage correctement sur tous les appareils

Défi: Dans iOS9, quand inline-block Les éléments de niveau sont côte à côte dans le code avec un espace entre les extrémités de deux éléments, cela conduit à un problème d'emballage
Pirater: Enlevez simplement l'espace

Défi: iOS10 ne supporte pas le positionnement fixe
Pirater: Aucun contournement actuel ...

Gmail

Gmail est populaire parce que c'est tellement pratique à utiliser. Cependant, cela ne signifie pas que c'est sans ses défis.

Défi: Si votre fichier HTML dépasse 102 Ko, Gmail clipse-le
Pirater: Évitez les étiquettes et les attributs de style inutiles, et ne copiez pas le code de Microsoft Word ou d'autres éditeurs de texte tels que ce sont (cela ajoutera des balises supplémentaires au fichier HTML)

Défi: Gmail supprimera CSS de la & lt; style & gt; blocage s'il dépasse 8142 caractères ou inclut des erreurs ou une imbriquée @Declarations
Pirater: Assurez-vous que les styles intégrés sont courts et exempts de fautes de frappe

Défi: Les flotteurs, les marges, les paragraphes et le rembourrage ne sont pas pris en charge
Pirater: Utilisez une disposition à base de table avec & lt; td & gt; Pour rembourrage et marges

Défi: Les images de fond ne fonctionnent pas pour les identifiants non-gmail configurés dans Gmail
Pirater: Appliquer la couleur d'arrière-plan comme retombe

Défi: Le sélecteur d'attributs ne fonctionne pas
Pirater: Utilisation .classer Sélecteur à la place

Apple Mail

Apple Mail est peut-être la chose la plus proche d'un client de courriel parfait que nous avons. L'avantage principal de Apple Mail est qu'il est très indulgent en ce qui concerne le codage de mauvais courrier électronique. De plus, comme une application native sur iPhone, il prend en charge l'interactivité dans des courriels, éliminant ainsi la nécessité de visualiser l'e-mail dans le navigateur.

Vous devriez garder à l'esprit deux choses lorsque vous codez des courriels pour vos abonnés Apple Mail:

Évitez d'utiliser des polices Calibri
Hébergez votre email et fournissez les liens vers le serveur, car les liens internes ne fonctionnent pas dans Apple Mail.

Yahoo! Courrier

En tant que nouveaux et meilleurs courriels, les clients sont arrivés, Yahoo! Le courrier est moins fréquemment utilisé ces jours-ci. Certains de ses défis de rendu et des hacks sont discutés ci-dessous.

Challenge: il ne supporte pas le centre d'alignement Attribut HTML
Hack: utiliser Aligner = "Centre"

Défi: min-périphérique-largeur et max-périphérique-largeur ne sont pas pris en charge par les requêtes de média
Pirater: Utilisez l'attribut de largeur et l'ampli; / ou dans le style au lieu de min ou max-largeur
Utilisez le largeur attribut au lieu de min- ou largeur maximale , soit séparément ou intégré dans le & lt; style & gt; étiqueter

Défi: Les tags à flotteur ne fonctionnent pas
Pirater: Ajouter Aligner = "haut" à l'image en question

Sur cette note, nous avons atteint la fin de la discussion sur la plupart des défis de rendu typiques des clients de messagerie. Regarde ici Pour plus de défis et de contournements de contournement. Le marketing par e-mail, s'il est bien fait, peut paver de nouvelles voies pour votre stratégie marketing. Gardez ces solutions de contournement simples et vos abonnés ne verront plus jamais une mise en page de courrier électronique brisée dans vos emails.

Articles Liés:

15 Designs de bulletins de messagerie génial
10 meilleurs outils de newsletter e-mail
Maître HTML Typographie dans le courrier électronique

Créer des messages parfaits dans tous les clients de messagerie

Perspectives

Outlook.com

Application indigène iPhone

Gmail

Apple Mail

Yahoo! Courrier

Comment - Most Popular Articles

Affinity Designer: Comment utiliser des effets et des styles

Comment créer des intérieurs avec Eevee de Blender

Techniques de pose faciles pour les modèles 3D

Tourner les illustrations 2D en art 3D

Commencez avec Webgl en utilisant trois.js

Comment réaliser un meilleur éclairage avec V-ray

Peinture humide mouillée dans les huiles

Comment faire des lettres 3D dans l'illustrateur

Catégories