Cet article s'adresse aux Utilisateurs qui sont familiers avec le code HTML : à la fois les développeurs avancés qui ont travaillé avec le code pour les e-mails, et ceux qui ont besoin d'être guidés.

Ce guide vous indique ce qu'il faut garder à l'esprit !

Dans cet article

Cordialement, les meilleures pratiques

Éléments restreints Compatibilité des appareils Images

Feuilles de style

Cordialement, les meilleures pratiques

Il est important d'être très attentif quand vous insérez du code HTML dans l'élément, afin que le code n'interfère pas avec votre E-mail. Voici les meilleurs conseils généraux que nous puissions vous donner quand vous travaillez avec l'élément HTML dans l'éditeur d'E-mail :

En cours d'utilisation, utilisez des feuilles de style CSS simples et des polices sûres pour le web. Si un client d'e-mail ne prend pas en charge une police, celle-ci sera remplacée par une police de secours. Peu importe les liens inclus dans l'élément HTML, ils ne peuvent pas être suivis par Google Analytics.

Vous pouvez créer des tableaux HTML statiques, imbriqués et autres.

Les appareils mobiles peuvent avoir du mal à afficher correctement votre e-mail. Respectez la largeur standard des modèles, comprise entre 600 et 800 px. Accordez une attention particulière à la prévisualisation de votre e-mail quand vous utilisez des polices web personnalisées.

Les images d'arrière-plan, les correspondances et les mises en page plus larges que le corps de l'e-mail doivent être utilisées avec précaution.

Si vous prévoyez d'utiliser du CSS intégré, testez votre e-mail dans différents clients de messagerie avec Litmus pour vous assurer qu'il fonctionne avec le reste de votre modèle.

Éléments restreints

Les éléments suivants ne sont pas pris en charge ou OU recommandés quand on travaille avec l'élément HTML dans Apsis One.

JavaScript

JavaScript est un langage de programmation qui permet de créer du contenu interactif. Il est bloqué par la plupart des clients d'e-mail afin d'éviter les contenus malveillants masqués dans les e-mails. Vous pouvez utiliser d'autres stratégies pour rendre votre e-mail plus attrayant, comme une conception remarquable, un contenu captivant et même des animations GIF.

Flash

Flash fait référence au contenu animé créé avec Adobe Flash. La plupart des clients d'e-mail bloquent Flash.

Éléments de l'Iframe

Un iframe est un élément HTML utile pour ajouter du Contenu à partir d'un autre site Web. Il est bloqué par la plupart des clients d'E-mail en raison de la présence de scripts. Si vous devez afficher du contenu provenant d'un autre site Web, veuillez ajouter un lien vers une image qui peut faire entrer les Profils dans le site Web.

Médias

Très peu de clients de messagerie prennent en charge HTML5 pour l'utilisation des balises vidéo et audio afin d'intégrer des médias dans les e-mails. Nous vous suggérons d'utiliser plutôt un lien.

Formulaires

Malheureusement, pour Soumettre les informations saisies dans un formulaire, vous devez utiliser Javascript. Ce dernier étant bloqué par la plupart des clients d'e-mail, il est préférable d'éviter cette pratique.

Compatibilité des appareils

Assurez-vous que la version mobile de votre élément HTML fonctionne comme prévu en utilisant les fonctions Prévisualiser et Test du client de messagerie pour vérifier qu'il fonctionne à la fois sur ordinateur de bureau et sur mobile.

La règle de base est que vous créez du contenu optimisé pour être visualisé sur mobile, et du contenu optimisé pour être visualisé sur Ordinateur. Toutefois, vous pouvez obtenir une compatibilité maximale en suivant l'une des deux méthodes suivantes :

Visibilité des lignes dans le code HTML

Définir la visibilité des rangs dans les Paramètres des rangs

1. Visibilité des lignes dans le code HTML

Au lieu de créer deux rangées avec deux éléments HTML pour entrer votre code, vous pouvez utiliser les classes par défaut d'Apsis Un pour afficher une rangée dans différents appareils. Regardez cet exemple.

2. Visibilité des rangs dans les Paramètres des rangs

Une solution très simple est de travailler avec le code HTML de la même manière qu'avec les éléments du panneau de conception d'APSIS One.

Créez deux versions différentes du contenu HTML de votre e-mail, l'une pour le mobile et l'autre pour l'ordinateur de bureau. Pour des résultats optimaux, prenez contact avec votre équipe de développement ou de conception pour vous assurer que votre code HTML fonctionne comme prévu.

Vous pouvez choisir d'afficher une rangée uniquement sur l'Ordinateur de bureau, uniquement sur le Mobile ou sur les deux. Suivez ces étapes pour afficher votre rangée sur un seul appareil, mais n'oubliez pas de créer une rangée alternative pour l'autre appareil.

Voici comment procéder :

1. Ajoutez un élément HTML dans le Canevas et collez le code HTML pour la version desktop ou mobile de votre E-mail.

Il s'agit des éléments que l'éditeur d'E-mail prend en charge quand il s'agit de masquer ou d'afficher des rangées dans différents appareils. Si vous avez l'intention d'utiliser un élément qui n'est pas listé ci-dessous, testez simplement votre E-mail avec Litmus pour vous assurer qu'il est masqué.

}.hide, .hide th, .hide table, .hide tr, .hide td, .hide div, .hide a, .hide img, .hide span { display : none !important ; line-height : 1px !important ; max-height : 0px !important ; max-width : 0px !important

2. Cliquez sur la rangée dans le panneau Structure pour ouvrir les Paramètres de la rangée.

3. Les Paramètres des rangées s'ouvrent.

Il est conseillé de donner un Nom à votre rangée afin que vous puissiez voir que cette rangée est celle qui contient votre code HTML pour ordinateur de bureau ou mobile dans le panneau Structure.

4. Cliquez sur l'icône mobile ou de bureau pour choisir l'appareil sur lequel ce Row doit s'afficher.

Répétez cette étape pour la version de l'Autre appareil, ou peut-être une version qui fonctionne bien dans tous les appareils.

Images

Si vous décidez d'utiliser des images dans votre code HTML, utilisez des images hébergées sur votre propre serveur afin de vous assurer qu'elles sont disponibles au moment de l'envoi. Si, ultérieurement, vous décidez de remplacer une image qui est utilisée dans votre élément HTML, vous devez vérifier que la nouvelle image a les mêmes dimensions pour ne pas perturber votre code HTML.

Quand il s'agit des dimensions des images en HTML, nous vous recommandons d'ajouter leur largeur en tant que style souligné pour que vos e-mails fonctionnent de manière optimale dans Outlook.

De plus, vous devez tenir compte du fait que vos destinataires devront charger tout le contenu de votre e-mail pour le visualiser, et que les personnes disposant de connexions plus lentes ou de plans de données restreints sur leurs appareils mobiles risquent d'être affectées. Alors que la taille moyenne d'un fichier image se situe entre 2 et 2,5 Mo, nous vous recommandons de limiter la taille du fichier à 1 Mo ou moins.

Ceci s'applique également à l'élément Image dans l'éditeur d'E-mail, si vous disposez de la version mise à jour d'une image via une URL.

Feuilles de style

Notre éditeur d'E-mails dispose d'une feuille de style par défaut pour le rendu par le Canevas de tous les éléments disponibles dans le panneau de Conception. Quand vous écrivez du code HTML pour vos E-mails, il est bon d'avoir à l'esprit à quoi ressemble cette feuille de style afin d'écrire un code qui fonctionne parfaitement.

â€'

En cours d'utilisation, voici les classes que vous pouvez utiliser dans votre code :

Classes générales

.imgfix

Supprimer le rembourrage ajouté par le client aux images - FullW

Afficher l'élément à 100 %.

â€'

â€'

Classes mobiles

â€'.m-show-row

Afficher la ligne dans le mobile, ajouter au tableau environnant

.m-masquer

Masquer l'élément dans le mobile

â€'

.m-show / .m-block - Affichage de l'élément en tant que bloc - .m-table

Affichage de l'élément sous forme de tableau - .m-inline

Affichage de l'élément en tant qu'inline

Bloquer ".m-inline-block

Affichage de l'élément comme un bloc en ligne.

â€'.body-padding

Éléments : supprimer tout le rembourrage... ".m-vertical-spacing

Ajouter 10px de padding-bottom

â€'

Entier â€'.m-full-width - Afficher l'élément à 100% â€'.m-half-width

Afficher l'élément à la moitié de sa largeur

â€'.m-align-center â€'Aligner au centre

Étape suivante

Éditeur d'e-mails - Éléments