What is your favorite hack?

<!--[if gte mso 9]>
Please get a better email client
<![endif]-->

Hands down the greatest email hack ever is:

@media screen and (-webkit-min-device-pixel-ratio:0) { }

Essentially, it splits -webkit-supported email clients and non-webkit-supported email clients. This way, you can build a solid foundation & then optimize for more modern/advanced clients for better experiences. I elaborated more on this hack here.

I have a blog post coming out soon-ish that goes into more detail behind the methods I've used this media query =).

Just discovered this one for use when designing and debugging:

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }

It allows you to easily see the different depths of nodes along with each elements padding, margins, etc. Can be handy for easily identifying any inconsistencies.

Example:

Creating a ghost column in between aligned tables to make it work in Outlook:

<td>
Table X
<!--[if mso]></td><td><![endif]-->
Table Y
</td>

Saved me hours of headaches.

From: http://labs.actionrocket.co/make_mobile_email_work_in_outlook

My favourite right now is using Margin (with a capital M) to fool Outlook.com! It strips out margin but not Margin. And of course, they could wise up someday and start stripping Margin as well, but it's not like we had any warning the first time and we might as well make the most of it while it works :)

(Full credit to a chap called Wiktor who suggested this in a comment buried way down on this post https://www.campaignmonitor.com/blog/post/3921/outlook.com-drops-margin-and-float-support-entirely)

Adding linebreaks on mobile with pseudo classes and media queries.

      .vanish                                 { color: #FFFFFF!important } 
      .vanish:after                 { content:"\A"; white-space:pre; }

in the responsive media query. The actual email has:

      <webversion>View in Browser</webversion><span class="vanish"> &nbsp; &nbsp; | &nbsp; &nbsp; </span> <forward>Forward to a Friend</forward>

In Desktop, it will show as:

      View in Browser    |   Forward to a Friend

while on Mobile it will show as:

      View in Browser
      Forward to a Friend  

As well as the outlook conditional comment (which has got me out of many a scrape) I also love...

Webkit targeting for CSS animation, HTML video and SVG images

This (better than mine) solution for hiding content on non-mobile
http://freshinbox.com/blog/bulletproof-solution-to-hiding-mobile-content-when-opened-in-non-mobile-email-clients/

Bullet proof buttons and backgrounds http://buttons.cm/ http://backgrounds.cm/

I recently found a way to do CSS triangles in email http://emailcodegeek.com/css-triangles/

min-width:600px; in a full width img to force gmail's android app to not do it's weird text zoom. If responsive, just put it in a full width spacer that is hidden at the first break point.

I use the CSS selectors :before and :after to optimize button text for a given environment. For example, in a footer I might have a forward-to-friend link with the text "Share" on the desktop version, but in the mobile version the link becomes its own full-width footer button. Now that I have more space for some text, I might use:

a[id="shareLink"]:after {
            content:" this Email";
        }

The result is a full width button reading, "Share this Email".

Sneaking in preview text that many clients like Gmail display after the subject line. How often does the email preview start with "having trouble viewing...." I use a div tag

<div style="line-height: 1px; font-size: 1px; color:#ffffff; display:none">
This text gets displayed in the preview pane!
</div>

The text above is not displayed in the message but it's like a second subject line

I've used this a few times to change "Click" to "Tap"

@media only screen and (max-device-width:600px), {
  span[class=click] {display: none !important; max-height: 0 !important;}
  span[class=tap]:after {content:"Tap";}
}

And here's the HTML.

No images? <a style="color: #333333; font-weight: bold; text-decoration: none" href="#"><span class="tap"><span class="click">Click</span></span> here</a>

You can simulate classes and use pseudo-classes in Gmail by doing using attribute selectors on attributes that Gmail does not strip:

* [title="the-title"] {...}
* [title="the-title"}:hover {...}

Then in the code

<div title="the-title">...</div>

http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/

I wrap the images in divs to fix gaps in OWA (Outlook Web App):

<div style="height:161px;"><img style="display:block; border:none;" src="http://cdn.domainname.com/filename.jpg" width="20" height="161"/></div>

Throwing this little snippet at the bottom of your email stops Gmail mobile from resizing everything and making it look terrible:

<div style="display: none; white-space: nowrap; font: 15px courier; color: #ffffff;">
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>

<!--[if gte mso 15]>
<style type="text/css">
    table {
        font-size: 1px;
        mso-line-height-alt: 0;
        line-height: 0;
        mso-margin-top-alt: 1px;
    }
</style>
<![endif]-->

To prevend that empty td's with a height of 1px becomes 10px in Outlook 2013.

and

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

For support of media queries in the mail app of WP8

Make your preheader only appear in the preview: <span class="preheader" style="display:none !important;">Preheader text goes here</span> (via http://team-email.co.uk/hidden-preheaders-save-screen-real-estate/)

An old hack, but a good one. Get rid of the unwanted left margin on Android 4.4 by using this within your <style> tag:

body { margin: 0 auto !important; }
div[style*="margin: 16px 0"] { margin: 0 auto !important; font-size:100% !important; }

Before fix (with unwanted margin-left):

After fix:

I add a div around image tags to fix these annoying gaps in OWA

Forcing outlook to render my line-height-settings correct with: style:"mso-line-height-rule: exactly; line-height: 22px;" just working on block-elements.

Sometimes I use this one:

<!--[if !gte mso 9]><!--> ... <!--<![endif]--><!--[if gte mso 9]> ... <![endif]-->

2nd fav is:

mso-hide:all;

Definitely the hack that allows you to hide entire parts of an e-mail cross desktop and mobile. This allows you to restructure the e-mail entirely for mobile users and display basically another set of HTML for the parts you wish to place.

Various solutions were offered. Here is a reference to one of them:

"Bulletproof Solution to Hiding Mobile Content when opened in Non-Mobile Email Clients", FreshInbox (2014)
http://freshinbox.com/blog/bulletproof-solution-to-hiding-mobile-content-when-opened-in-non-mobile-email-clients/

I have a trick to create padding. You have to nest pretty deeply to pull it off, but it renders quite consistently. I use rows to add space above and below, and use cells to pad left and right, and fill in the rows and cells with non-breaking spaces.

This is part of a gmail div inline-block hack.

<table align="left" border="0" cellpadding="0" cellspacing="0">
    <tr><td style="font-size: 10px; line-height: 10px;">&nbsp;;</td></tr>     <========== margin top
    <tr>
        <td style="font-size:8px; line-height:8px;">&nbsp;&nbsp;&nbsp;</td>     <========== padding left
        <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100%" >  <============== the actual content
                <tr>
                    <td>
                        <img src="http://yadayadayada">
                    </td>
                </tr>
            </table>
        </td>
        <td style="font-size:8px; line-height:8px;">&nbsp;&nbsp;&nbsp;</td>        <========== padding right (more non-breaking spaces to widen the gap)
    </tr>
    <tr><td style="font-size:10px; line-height:10px;">&nbsp;</td></tr>                <========== margin bottom
</table>