Styling HTML Email for Gmail

Styling HTML email for Gmail

The answers here are outdated, as of today Sep 30 2016. Gmail is currently rolling out support for the style tag in the head, as well as media queries. If Gmail is your only concern, you're safe to use classes like a modern developer!

For reference, you can check the official gmail CSS docs.

As a side note, Gmail was the only major client that didn't support style (reference, until they update anyway). That means you can almost safely stop putting styles inline. Some of the more obscure clients may still need them.

Gmail - HTML classes and style tags are removed inside table

There are different versions of Gmail, but yes it is common to see it strip embedded CSS. You must refactor your code to inline the styles. See HTML email in Gmail - CSS style attribute removed Why is Gmail blocking CSS in emails? or Styles not working in Gmail

Best practices for styling HTML emails

Campaign Monitor have an excellent support matrix detailing what's supported and what isn't among various mail clients.

You can use a service like Litmus to view how an email appears across several clients and whether they get caught by filters, etc.

css for HTML Email content not getting applied in gmail

You can use inline styles like this...

https://codeshare.io/GAEng8

<table width="100%" cellpadding="0" cellspacing="0" id="dummy" bgcolor="#F7F6F6" style="border: 1px solid #dfdddc;border-collapse: collapse;border-left:0;border-right:0;">  <tr>    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">Label</td>    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">Value</td>  </tr>  <tr>    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">label</td>    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">value</td>  </tr>  <tr>    <td style="height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">label</td>    <td style="height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">value</td>  </tr></table>

Is there really no way to apply a css class in a TD in gmail?

Here now my findings...

In general:

Our html email contains images (with links), special formats to text (bold, blue, red) tables, bullets, internal links and has to be sent to about 12k recipient’s, whereby we do not know, on what devices they will read the email.

A few years ago, we have optimized a similar email only for desktop (Outlook). These times are over definitely - we have to expect, that more than 50% will read the email on mobile devices (this is fact).

It’s incredible complex and time consuming to create such an email, that is at least readable without problems on desktop (Outlook) and mobiles (iOS (iOS mail app) and Android (gmail)).

Noted (main) issues (to my specific html email):

• Outlook need a smaller font size and a fix width for the table and also the images to look O.K.
• Outlook further need special settings for bullets, that are not compatible with the mobile clients.
• Outlook and iOS (and any browser, e.g. Google Chrome) respect css-stiles (set with “class=”) and media queries - whereby I have not found a way to bring this at work with gmail. For me, it seems as gmail delete all css-settings after opening the email (maybe there is a way to bring it to work, but I gave up after a few days of try and error). The only that works (for me), is to apply styles (style =) directly to the html elements. If have found some information’s that it also works in gmail, but with (massive) limitations https://litmus.com/community/discussions/8098-media-queries-support-for-android-gmail-app-2019-verison
• The mobile clients need a viewport entry and to set images and tables to 100%, else the email is scaled automatically to a not to read “micro font” (and the users have to zoom to be able to read the text)
• Internal links work on Outlook and Android, but not in iOS (else iOS has good support for css and the behavior is, as it should be)

I have not found a real “solution” but (only) a workaround.

Viewport entry:

 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

In the style tag it set all css for outlook (width to images and table, font size and “special” settings for bullets (wrong for the mobile clients).

ul, ol{margin-left: 20px !important;}
li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em; margin-top: 5px;}

Then I set base settings for iOS mobiles in a media query

@media screen and (max-width: 1024px) {
/* Reset Spezialeinstellungen Outlook für alle Mobiles*/
ul,ol {margin-left: 0px; }
li {text-align:left; display:list-item;text-indent: 0px; margin-top: 0px;}
.HauptTabelle {
    width: 100% !important;
}

This resets the outlook special settings for all iOS clients with max width of 1024px.

Then I set css for various iOS devices - example:

/*IPhone 6/7/8: 375px */
@media screen and (max-width: 375px) {
.conttext {
    font-size: 20px !important;
    line-height: 22px !important;
}
.Headline0Boldleft {
    font-size: 20px !important;
    line-height: 22px !important; 
}
.headline {
    font-size: 20px !important;
    line-height: 22px !important; 
}
.headtext {
    font-size: 20px !important;
    line-height: 22px !important; 
}
.conttextboldblue {
    font-size: 20px !important;
    line-height: 22px!important; 
}
.conntextbold {
    font-size: 20px !important;
    line-height: 22px !important;
}
}

And then, I set the attributes for Android (gmail) in addition direct to the html elements.

Example:

<td style="color: #0000FF; font-weight: bold; border: 2px solid #FF0000; padding:4px !important;" class="style1"><span class="conttextboldblue">Some text... and further code...

In this example, I set the font color to red and bold and a border.

Note: the same is defined in classes style1 (border and padding) and conttextboldblue.

So...I set the attributes double (on time inline with Style= and onetime in the css classes).

Android (gmail) only respect the "style=", whereby iOS takes the css style with priority.

So I can define further styles (e.g. font size) for iOS in media queries.
Android (gmail) seems to apply a “usable” font size automatically.

As mentioned above, this is not a solution, but a workaround for my case.

If I would have further html mails to send out in the future (what is not the case), I would invest (a lot) more time to find a real solution...

Further hints:
Validate your html code here:
https://validator.w3.org/#validate_by_upload

Note: The tool shows double assigned styles (inline and with css) as error, but it works nevertheless

Take care, that you have the correct notation to comment lines:

CSS:

/* Your comment */

HTML:

<!-- Your comment -->

(my editor has commented lines in css as html comments, what has cost me some time until I noted that...)

Load your html email in Google Chrome, press F12 (debug mode) and check it there (especially, if you have media queries in your html).

If you have media queries and GC don’t show it, something is wrong with your code.

With GC you easily can simulate mobiles and have a look, if the media queries are applied correct.

I hope, this helps somebody...

---

Related Topics