Vote utilisateur: 5 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles actives
 

 

 

Outlook offre des outils d'éditions plutôt limités.

Si vous souhaitez envoyer des mails de qualité professionnelle, une bonne solution peut-être de créer votre message en HTML, puis de l'importer dans un message Outlook.

Voici comment faire :)

 

Créer votre page html

Commencez par créer votre page dans votre éditeur HTML préféré.

J'utilise pour ma part un éditeur de type WYSIWYG : Dreamweaver

 

Si votre page comporte des images, utilisez impérativement des chemins absolus :

 

Même recommandation si votre page comporte des liens, veillez là aussi à utiliser des liens absolus

 

 

Enregistrez votre page, au format HTML

 

 

 

Création du mail

Ouvrez Outlook, puis créez un nouveau message

 

 

Vérifiez tout d'abord, dans l'onglet "Options" que votre message est bien au format HTML. Corrigez si nécessaire.

 

 

Puis cliquez sur l'onglet "Insertion", et cliquez sur le bouton "Joindre un fichier"

 

 

Mettez votre page HTML prélablement créée en surbillance, avec un simple clic droit de souris

 

 

Puis, au bas de la fenêtre, cliquez sur la flèche de déroulement située à droite du bouton "Insérer", et sélectionnez la commande "Insérer comme Texte"

 

 

Votre page HTML est intégrée dans votre email :)

 

 

 

Pour aller plus loin

Ce n'est pas parce que vous envoyez Outlook que votre destinataire lira forcémment votre email sur Outlook :)

Pour un email en mode texte, il n'y a aucun problème : c'est un standard interprété sans difficulté.

En mode HTML, c'est un art ô combien plus délicat car tous les clients lecteurs d'emails (Outlook, GMAIL, Outlook.com, Hotmail, etc...) ont des comportements bien différents.

Pour ceux qui veulent un peu plus loin, voyons quelques règles de base en matière de codage HTML et donc, forcément, de CSS...

 

 

Clients mails vs Webmails

Les clients mails lourds (Outlook, Lotus, Thunderbird, Incredimail, etc...) ont un fonctionnement radicalement différents des webmails (GMAIL, Yahoo Mail, Hotmail, Outlook.com, etc...)

Les webmails imposent en effet des règles très strictes sur le code HTML et le CSS contenu dans les emails, puisque ces derniers sont affichés directement dans une structure de page web qui a déjà ses propres styles.

Par exemple, Outlook.com ne tolère aucune marge.

Il y a aussi des spécificités pour le moins exotiques : ainsi, Outlook 2013 utilise toujours le moteur d'interprétation HTML de... Word ! Virtuellement, la prise en charge de CSS dans Outlook n'a donc pas changé d'un yota entre les versions 2007, 2010 et 2013 (on se demande finalement ce qu'on paie aussi cher)...

Soyons clair : la réalisation d'email graphique en HTML, au pixel près ou presque, sur toutes les plateformes, est une utopie.

Les conseils qui vont suivre vont néanmoins vous permettre de vous en approcher le plus possible :)

 

 

Utilisez des tableaux

Pour les emails, les tableaux, c'est le bien.

Enfin... C'est plutôt qu'il n'y a pas 50 solutions....

Je ne suis pas en train de vous dire que les éléments de bloc comme <div> ou <p> sont à proscrire, mais quand il s'agit de la mise en plage, il vaut mieux utiliser des tableaux puisque les placements en CSS utilisant display ou même float deviennent problématiques sur les clients mails.

 

 

Du CSS en ligne pour la mise en forme

Là encore, il y a de quoi bondir, mais quand il s'agit d'un email en HTML, il vaut mieux utiliser des styles en ligne directement sur les éléments concernés (style="").

En effet, certains clients mails, dont Android 2.3+ et Gmail, vont ignorer toute balise <style> se trouvant dans la section <head>.

Les feuilles de style externes ont également de fortes chances d'être ignorées en fonction du client mail.

Tout style déclaré de façon pratique, comme dans l'en-tête du document, de façon interne ou externe, est potentiellement voué à être ignoré.

 

Tout ceci est très contraignant, vous en conviendrez....

Un outil en ligne, Premailer, permet d'appliquer automatiquement, dans la mesure du possible, les styles en ligne dans un attribut <style>, pour les balises composant l'email.

 

 

 

Le Doctype

Comme souvent, ne pas avoir de Doctype peut entraîner des erreurs d’interprétation, surtout si votre utilisateur visualise vos mails dans le navigateur (Gmail sur Chrome par exemple).

Si votre email est une newsletters, il vaut mieux pour le moment utiliser un doctype XHTML 1.0 Strict.

Notons cependant que Gmail et Hotmail comprennent le doctype HTML5 depuis 2010.

Pour bien faire, vous pouvez tester votre design sans doctype dans plusieurs navigateurs pour les clients mail qui vont l’ignorer de toute façon, puis ajouter un doctype et voir si le résultat vous convient toujours.

Pour plus d’informations, un article en anglais sur du test de doctype.

 

 

 

1000 caractères restants


Gravatar
Lamine
Thank u.... You save my life