Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Targeting GMAIL?

Joel

Avatar
Newbie
Total Posts:  9
Posted: 13 December 2010 06:18 PM

I know that GMAIL strips pretty much the ever-loving life out of email, well, at least all the styles.  I’m realizing that, in fact, gmail seems worse than other clients in that at least I can have some styles in the head or body which do some work. Gmail, on the other hand, makes for inlining all styles over and over again for each element. This makes it nearly impossible for the people I’m helping to continue editing email after it’s been inlined. 

I found the conditionals for Outlook a life saver, and it seems to work when adding <!—gte mso 9—>...  into the head. This lets me fix some stuff only related to Outlook.

Does anyone know of anything similar to this for Gmail, so I don’t have to inline EVERYTHING? Ignore that gmail would probably strip out it’s own conditionals.  smile


 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 14 December 2010 08:30 AM
[ # 1 ]

Sup Joel,

Actually, yes, there is a slight work-a-round.  If you check out our Tips and Tricks section (next to your test results in Gmail) we note the following Q/A:

How do I get around the fact that Gmail does not support embedded CSS?

There is way of getting around the issue for things like font, font color and font size: Gmail converts your Body tag to a DIV.  That can actually work to your advantage because you can use any inline CSS properties within your BODY that would otherwise be supported by a DIV.  It is important to know, however, that some clients do not support the BODY tag so you should also include the same declarations within your embedded CSS.  Also, keep in mind, you can’t rely on BODY attributes like “bgcolor” because it gets converted to a DIV in Gmail.

<head>
<
style type=“text/css”>
/*This is for all clients except Gmail, 
Gmail gets the same declarations from the body tag */
tabletrtdpspan {font-family:ArialHelveticasans-serifcolor:#333; font-size:11px;}
</style>
</
head>
<
body style=“margin:0padding:0font-family:Arial
Helveticasans-serifcolor:#333; font-size:11px;”>
Content
</body

We hope this helps!


 

Joel

Avatar
Newbie
Total Posts:  9
Posted: 04 January 2011 01:28 PM
[ # 2 ]

Hi Michelle,

Always helpful!  However, it seems this is good for styling the body, but I need more control over specific elements across the DOM. With CSS, I can use decendency, but that’s irrelevant if Gmail strips out all styles. Whether it’s a DIV or BODY tag, it’s still styles applied inline just for that tag.

Is there another way I might use this method to add control that I’m missing?

I do as you suggest and add redundancy as CSS and attributes like bgcolor, just to cover my bases.

Thanks for the great suggestion!
Joel


 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 04 January 2011 02:11 PM
[ # 3 ]

I wish I could say I was aware of another work-a-round besides the one that I mentioned.  Unfortunately, since they strip any and all scripts, embedded CSS and linked CSS I just can’t think of a hack. 

If anyone else finds a solution, feel free to share!