Marketers Can’t Wait to Use AMP for Email, But Here’s What Will Be Holding Them Back

You would think I would be more excited about this, as it’s a new technology for email, which doesn’t come along very often, but I feel this could be the Flash of email. It’s starts out cool, but in the end is causes more problems than it solves.

Thank you for reading!

Target Outlook App with body[data-outlook-cycle]

It’s all really in the headline. If you want to target the Outlook app, use [data-outlook-cycle] selector. If you apply it to the <body>, then it will cover everything.

body[data-outlook-cycle] .outlookApp_show {display:block !important;color:#ff0000;}
body[data-outlook-cycle] .outlookApp_hide {display:none !important;}

Thank you for reading!

Interactive Email – checkbox hack

I’m going to just post an example instead of going into all the detail, but here is some detail.

This hack only works in Webkit email clients, which is pretty much IOS devices, Outlook on the Mac, Apple mail, and maybe others, but doesn’t work in Outlook in general, Gmail, Yahoo, etc.

To target Webkit email clients, we use this media query:

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

In this example, we are using the CSS Psudo element :checked to create a click event listener. Part of the hack is that we can use the <label> tag to wrap around content we want clickable. The actual form element being clicked stays hidden.


Styles
input, .webkit_content {display: none;}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .webkit-hide {display:none;}
  #A1_result {display:none;}
  #A1:checked ~ #A1_result {display:block}
}
HTML
<div class="webkit-hide">
  Show this if it is not a Webkit email client
</div>
<!-- [if (gte mso 9)|(IE)]>
<!-->
<form class="webkit_content">
  <label for="A1">
    <input id="A1" name="radio_btn" type="radio" value="">
    Click here!
  </label>
    <div id="A1_result">
      Show this content when you click on "Click here!" above.
    </div>
  </form>
<!--<![endif]-->

Thank you for reading!