Comment trouver un '' Perspectives Compatible messagerie Tool Designer »

Question

je dois concevoir un courrier de bulletin html réactif en utilisant html,-css intégré et javascript et quelques js libs.

Maintenant, je sais que le client Outlook est un cauchemar et je dois utiliser <table> au lieu de <div> et <b> au lieu de <strong>, etc pour des raisons de design réactif, une fois que vous remplacez ce alors il n'est pas compatible pour gmail ou yahoo ou mobile.Alors je me suis rendu compte que je peux utiliser outlook -specific css code-snippets, et selon MailChimp, il ressemble à ci-dessous:

<!--[if gte mso 9]> 
    <style type="text/css"> 
    /* Your Outlook-specific CSS goes here. */ 
    </style> 
<![endif]--> 

Je ne peux pas suivre tous les éléments html pour tous les périphériques, donc j'ai cherché un outil de conception de courrier html gratuitement, mais pas de chance. Quel genre de chemin dois-je suivre à ce sujet? Je veux juste que ce non-sens soit automatisé par un tel outil.

Merci.

Answer 1

Pour commencer, vous ne devriez pas utiliser Javascript dans votre courriel. Les clients Webmail exécutent la plupart du temps l'interface en JavaScript et ne tiennent pas à ce que votre courrier électronique interfère avec cela, et les filtres de bureau considèrent souvent le JavaScript comme un indicateur de spam ou d'hameçonnage.

Même dans les cas où il pourrait fonctionner, il y a vraiment peu d'avantages à écrire des scripts dans les emails. Gardez vos emails en HTML et CSS, et évitez les tracas.

En termes de développement pour Outlook, il n'est pas nécessaire de suivre tous les éléments pour tous les périphériques. Adoptez une approche fluide pour la création de votre courrier électronique et il se dégradera gracieusement entre les clients de messagerie, oui même Outlook.

Commencez ici cet article: https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

Utilisez le modèle de courrier électronique ils ont fourni here comme modèle de départ et d'ajouter vos propres styles personnalisés. Placez tous les styles dans la tête et insérez votre modèle avant de l'envoyer. Essentiellement, le modèle fonctionne chez tous les principaux clients. Il fonctionne dans Outlook et en enveloppant le corps dans les balises conditionnelles:

<!--[if (gte mso 9)|(IE)]> 
    <table width="600" align="center" style="border-spacing:0;font-family: Arial, Helvetica, sans-serif;color:#4d4d4d;" > 
    <tr> 
    <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" > 
    <![endif]--> 

[HTML EMAIL BODY GOES HERE] 

<!--[if (gte mso 9)|(IE)]> 
    </td> 
    </tr> 
    </table> 
    <![endif]--> 

Et en enveloppant les deux, trois et quatre rangées de colonnes dans les balises conditionnelles ainsi.

Pour Outlook specific things, utilisez des balises conditionnelles pour cibler différentes versions d'Outlook. À partir du lien ci-dessus:

cible toutes les versions d'Outlook avec ceci:

<!--[if (gte mso 9)|(IE)]> 
[HTML code] 
<![endif]--> 

Et j'utilise la même chose pour mon CSS conditionnel

<!--[if (gte mso 9)|(IE)]> 
<style></style> 
<![endif]--> 

Et parfois comprennent CSS conditionnel distinct pour seul objectif 2007 +

<!--[if mso]> 
<style></style> 
<![endif]--> 

Aussi, j'ai trouvé avec CSS conditionnel qui est vraiment importe que le! important soit là et qu'il y ait un espace devant lui. On dirait que vous avez déjà cela correct, bien que l'un de vos antécédents de règles: bleu; n'a pas eu d'importance.

Ainsi, par exemple ...

li {padding-left: 2px!important;} 

ne fonctionnera pas, au contraire, vous devez écrire:

li {padding-left: 2px !important;} 

Vérifiez le code étant sortie soigneusement .. certains REE ajouter aussi importante même si vous l'avez déjà, vous risquez également de vous retrouver avec! important! important qui signifiera qu'ils ne fonctionneront pas.

Mais là encore, il n'est pas nécessaire de suivre tous les éléments lors de l'approche fluide. Vous n'aurez pas autant de styles dans les balises conditionnelles Outlook. Très probablement vous n'aurez que quelque chose comme ceci:

<!--[if (gte mso 9)|(IE)]> 
<style type="text/css"> 
    table {border-collapse: collapse !important;} 
</style> 
<![endif]--> 

Et l'autre HTML dans les balises conditionnelles que j'ai mentionnées ci-dessus. Regardez bien le modèle que j'ai lié ci-dessus. Vous pouvez déplacer la mise en page en copiant et en collant les lignes du tableau pour les personnaliser en fonction de vos besoins.

Je code des courriels HTML chaque jour dans mon travail de jour alors s'il vous plaît tendre la main si vous avez des questions spécifiques.