Comment créer une page HTML pour un modèle d’e-mail Outlook ?

Si vous avez toujours souhaité pouvoir concevoir votre modèle d’e-mail, vous vous êtes probablement demandé comment le faire dans le programme Office 365 de Microsoft. Il existe plusieurs façons de créer une page HTML, et l’une d’entre elles implique l’utilisation de CSS. Dans cet article, je vais vous montrer exactement comment utiliser cette puissante fonctionnalité pour créer votre propre modèle d’e-mail HTML. Je vous expliquerai également comment éviter de vous fier aux images pour créer une mise en page dynamique dans votre e-mail.

Création de votre propre modèle d’e-mail HTML

Si vous avez un e-mail HTML que vous souhaitez envoyer à vos clients, vous pouvez le convertir en un modèle d’e-mail HTML Outlook en quelques étapes simples. Créez un document Word 97 pour nettoyer le code HTML et le formater correctement. Ensuite, exportez le document vers un fichier Outlook.oft. N’oubliez pas d’utiliser des tableaux pour la mise en page, car la plupart des clients de messagerie ne prennent pas en charge les grilles CSS et les modèles de boîtes. En outre, de nombreux clients de messagerie ne sont pas compatibles avec le HTML sémantique, de sorte qu’un tableau est un bon moyen de procéder. Un conseil important lorsque vous créez du HTML pour des e-mails est de prendre en compte le client de messagerie qui sera utilisé. Par exemple, la plupart des gens utilisent Outlook.

Le problème de l’utilisation de polices sûres pour le Web est qu’elles peuvent ne pas s’afficher correctement dans tous les clients de messagerie. Vous pouvez utiliser des polices sûres pour le Web à la place d’images, ce qui facilite la lecture. En outre, les polices sûres pour le Web peuvent également être utilisées pour éviter les problèmes de compatibilité. Pour vous assurer que votre e-mail HTML est compatible avec Outlook, testez-le plusieurs fois. Envoyez des courriels à vous-même pour vérifier s’ils s’affichent correctement sur différents appareils. Pour de meilleurs résultats, utilisez un vérificateur d’e-mails comme PreviewMyEmail pour prévisualiser votre message dans plusieurs clients de messagerie. Ensuite, faites-en une copie et envoyez-la à vos destinataires. Il doit être aussi attrayant que le vôtre.

Alors, n’oubliez pas de vous envoyer un courriel pour le tester et faites-nous savoir comment il se présente ! Il est facile de créer votre propre modèle d’e-mail HTML pour Outlook. Une fois le modèle prêt, vous pouvez insérer des images, des documents, etc. dans l’e-mail. Les utilisateurs de Microsoft Word et Publisher peuvent insérer des brochures ou des documents. Si vous souhaitez envoyer un e-mail à plusieurs destinataires, vous pouvez également sélectionner l’option « Page par e-mail » dans le menu « Envoyer ». Après avoir créé votre modèle d’e-mail HTML, testez l’e-mail sur différents appareils pour vérifier sa compatibilité.

Ajout d’images

L’ajout d’images à une page HTML pour l’e-mail Outlook est facile une fois que vous avez compris comment utiliser ce format. HTML est l’abréviation de hypertext markup language (langage de balisage hypertexte) et vous pouvez utiliser n’importe quel type de texte dans un message électronique. Lorsque vous envoyez des e-mails en HTML, veillez à inclure une image d’arrière-plan pour que le texte soit visible lorsque les images sont désactivées. Heureusement, il existe de nombreuses façons d’ajouter des images dans les e-mails, moyennant quelques précautions. Tout d’abord, ouvrez votre éditeur de signature d’e-mail. Vous verrez une nouvelle fenêtre intitulée « Insérer une image » en bas. À partir de là, vous saisirez l’URL complète de l’image que vous souhaitez inclure dans la signature. Une fois que vous avez fait cela, vous devez cliquer sur « OK » pour enregistrer le fichier. Une fois que vous l’avez enregistré, vous pouvez l’ajouter à votre courrier électronique Outlook.

L’utilisation d’une image dans un message électronique est un moyen facile et peu coûteux d’incorporer un contenu visuel dans un message électronique. Toutefois, si vous n’avez pas l’autorisation d’utiliser l’image, elle sera signalée comme un spam par les fournisseurs de boîtes de réception. Vous pouvez toutefois vous assurer que vous utilisez les bonnes images pour votre message électronique en vérifiant les aspects juridiques de leur utilisation. Cela vous permettra de vous assurer que vous envoyez des messages électroniques efficaces pour votre entreprise. Si vous devez utiliser des images de grande taille, vous pouvez également les héberger sur Dropbox. Le dossier public de Dropbox est suffisant pour les petites listes de diffusion, mais pour les grandes, vous aurez besoin d’un réseau de diffusion de contenu pour héberger les images. Vous devez également vérifier si les destinataires de votre courrier électronique disposent des autorisations appropriées pour afficher vos images. Ensuite, ajoutez les images et utilisez le même lien pour tous les messages électroniques. Toutefois, le message électronique risque d’être un peu plus volumineux que vous ne le souhaitez.

Utilisation de CSS

L’utilisation de CSS pour créer une page html dans Outlook est relativement simple et présente de nombreux avantages. Par rapport au HTML, le CSS est beaucoup plus souple et possède davantage d’attributs. Le CSS en ligne permet également de gagner du temps car il permet de mettre à jour plusieurs éléments de conception dans un seul fichier. Il est également moins fiable lorsqu’il est utilisé avec des courriers électroniques, mais la plupart des outils de messagerie les plus courants afficheront le produit fini comme prévu. Pour plus d’informations, lisez la suite ! Tout d’abord, utilisez les propriétés de largeur et de hauteur pour définir la taille de votre courrier. Si vous utilisez Outlook pour Windows, le client de messagerie affichera les images à la taille physique.

Ensuite, utilisez la hauteur automatique et l’affichage en bloc, afin qu’Outlook n’affiche pas de trous sous vos images. Enfin, n’oubliez pas d’ajouter une balise alt aux images si elles contiennent des informations importantes. Les lecteurs d’écran utiliseront la balise alt pour annoncer le contenu de l’image. Si l’utilisation de CSS est plus avancée, elle présente néanmoins des inconvénients. Bien qu’elle puisse augmenter les taux de conversion, elle nécessite également plus de travail, plus de code et plus de tests sur le support de votre client cible.

Néanmoins, il est important d’utiliser le CSS pour garantir la bonne mise en page de votre e-mail. Il est possible de centrer le texte, de réaligner les images, d’échanger des images de tailles différentes et d’ajuster la taille des polices, entre autres choses. Une autre façon de centrer votre contenu est d’utiliser un div avec des marges automatiques. Cela fonctionnera si le client de messagerie le restitue correctement. Cependant, elle ne fonctionnera pas si Outlook supprime les CSS des messages électroniques. Si vous ne pouvez pas utiliser cette méthode dans Outlook, vous devrez utiliser un div avec des marges automatiques. Dans Outlook, la fonction de marges automatiques garantit que le contenu de votre message sera centré dans le message.

Éviter de s’appuyer sur des images

Si vous souhaitez afficher votre page HTML dans un message Outlook, évitez de vous appuyer sur des images. Le client de messagerie Outlook insère des espaces entre les tranches d’image. Ce problème se produit souvent dans les bannières qui comportent plusieurs appels à l’action. Pour éviter ces problèmes, créez votre page HTML en utilisant des tableaux. Ensuite, enroulez votre div autour de l’en-tête réservé aux mobiles, et utilisez une classe « show » pour afficher le contenu caché sur les appareils mobiles. Une autre raison importante d’éviter de se fier aux images est que de nombreux abonnés au courrier électronique disposent d’un logiciel de sécurité qui empêche leur affichage. Si vous ne pouvez pas contrôler le logiciel de sécurité des ordinateurs de vos destinataires, vous pouvez néanmoins prendre des mesures pour maximiser la visibilité de vos images. En fin de compte, c’est le programme qui décide du format de l’e-mail.

En suivant ces conseils, vous serez en mesure de créer un courriel accessible au plus grand nombre de destinataires possible. Une autre raison importante d’éviter de se fier aux images lors de la création d’une page HTML pour un courriel Outlook est la façon dont Outlook rend les images. Outlook ne redimensionne pas correctement les images, vous devez donc les recadrer pour les rendre plus petites. Il est également important d’éviter d’utiliser des images dont la taille de fichier est importante. L’utilisation d’un outil comme ImageOptimizer accélérera le chargement de votre campagne. Utilisez cet outil pour optimiser vos images et vous assurer qu’elles seront lisibles par la plupart des principaux clients de messagerie.

Enfin, évitez d’utiliser des formats qui ne sont pris en charge que par les navigateurs Web, tels que WebP et SVG. L’utilisation d’images dans le marketing par e-mail est très courante. Bien que cette pratique soit efficace, elle est problématique pour les clients de messagerie qui désactivent les images. En outre, de nombreux clients de messagerie bloquent les images par défaut, et le contenu d’un courriel n’est pas visible ou lisible pour l’utilisateur. Si vous souhaitez que votre contenu soit vu et lu par tout le monde, évitez de vous fier aux images et incluez plutôt du texte alternatif.

Test de votre modèle

Lorsque vous créez votre modèle d’e-mail Outlook, vous ne vous rendez peut-être pas compte qu’il est rendu différemment sur Outlook. Vous devez vous assurer d’ajouter un texte alternatif à l’image que vous avez créée. Le texte alt apparaîtra à la place de l’image dans la zone d’image et sera inclus dans le document HTML de l’e-mail. Sinon, votre modèle d’e-mail Outlook ne s’affichera pas correctement. Heureusement, il existe quelques moyens de contourner ce problème. Voici quelques conseils. Utilisez la fonction d’aperçu de l’e-mail pour vérifier votre e-mail. Cela vous permettra de voir l’aperçu de l’e-mail et vous donnera également une idée de l’existence ou non de problèmes. Testez-le sur différents clients de messagerie et envoyez-le à vous-même.

Si votre destinataire ne l’ouvre pas, utilisez la fonction d’aperçu pour le tester sur différents appareils. En testant votre message sur différents appareils, vous saurez quels problèmes vous devez résoudre. Pour éviter les risques de rejet de votre message par les filtres anti-spam, envoyez-vous un courriel de test. Une autre façon de tester votre modèle d’e-mail Outlook est d’utiliser la fonction de test d’envoi. Elle vous permet d’ajouter un nombre illimité de destinataires à votre e-mail de test. Elle vous permet également de les supprimer. Vous pouvez ensuite revoir votre e-mail de test en utilisant l’icône de la corbeille. Vous pouvez également utiliser la fonction d’envoi de test pour supprimer des destinataires de votre message test. Il est important de tester les modèles d’e-mails avant de les envoyer à vos clients.

Sinon, votre courriel pourrait se retrouver dans une boîte à spam et donner l’impression que vos clients sont ennuyés. Si vous avez utilisé des GIF animés dans vos modèles d’e-mails Outlook, vous devez vous assurer qu’ils ne constituent pas une distraction. Le GIF animé n’est pas toujours visible dans Outlook, et s’il l’est, vos lecteurs se désabonneront probablement de votre liste. Heureusement, le GIF peut servir d’élément de soutien – un élément qui accentue les autres éléments sans nuire au message central. Pour de meilleurs résultats, choisissez des couleurs compatibles avec la palette de couleurs d’Outlook.