HTML

How To Target Email Clients In HTML

Hello Friends, In this article, we will discuss how to target email clients for outlook and Gmail. Using conditional comments you can target different versions of the email Outlook and Gmail client and include your client-specific HTML.

Targeting Outlook Desktop App:

<!--[if mso]>
  <td>OUTLOOK DATA</td>
<![endif]-->

Targeting Outlook WebMail:

<style>
  [class~="x_outlook"]{}
</style>

<div class="outlook"> 
  OUTLOOK DATA
</div>

Outlook.com prefixes class names with x_ but doesn’t do this on attribute selector. So <div class=”outlook”> can be targeted with [class=”x_outlook”] and it’ll only apply to Outlook webmail.

Targeting Outlook IOS and Android:

<style>
  .outlook\0{}
</style>

<div class="outlook"> 
  OUTLOOK DATA
</div>

The \0 gets removed as part of the HTML clean-up. Be aware that Gmail will remove a style block with this code, so it needs to be included in a separate <style> block. This can also be added directly to a style .outlook{ background: red\0/;}

Targeting Gmail WebMail:

<style>
  u + .body .gmail{}
</style>

<div class="gmail"> 
  GMAIL DATA
</div>

Gmail changes the doctype to <u></u> this is placed adjacent to a div that inherits class and id from the body tag. You must include a doctype tag.

Targeting Gmail Android:

<div class="gmail"> 
  GMAIL DATA
</div>

<style>
  div > u + .body .gmail{}
</style>

I hope this article helps you and you will like it.

Jignesh Patel

Jignesh Patel is a Senior Full Stack .Net Developer has extensive experience with designing and developing enterprise-scale applications. He has good skills in ASP.NET C#, ASP.NET MVC, AngularJS, Angular, Nodejs, Web API, EPPlus, SQL, Entity Framework, JavaScript, Azure Web Jobs, Microsoft Graph API, etc.