Understanding Email Hacks

@M_J_Robbins @GoRebelmail #LitmusLive

Mark Robbins

@otherside_uk

What we’re going to cover

What we’re going to cover• Stuff you might no know about everyday email

hacks

What we’re going to cover• Stuff you might no know about everyday email

hacks • How to target email clients

What we’re going to cover• Stuff you might no know about everyday email

hacks • How to target email clients

• Individual email clients

What we’re going to cover• Stuff you might no know about everyday email

hacks • How to target email clients

• Individual email clients• Groups of email client

What we’re going to cover• Stuff you might no know about everyday email

hacks • How to target email clients

• Individual email clients• Groups of email client

• Analysing a couple of layout hacks

<table>

<tablewidth="100%"border="0"cellspacing="0"cellpadding="0"bgcolor="#333333"role="presentation"><tr><tdstyle="font-size:0px">&nbsp;</td><tdalign="center"width="600"bgcolor="#eeeeee"><!--Content--></td><tdstyle="font-size:0px">&nbsp;</td></tr></table>

<table role="presentation">

<table role="presentation">

<table role="presentation">

add it in NOW!

Targeting

Targeting via code wrapping• .ExternalClass

- Outlook.com • .moz-text-html

- Thunderbird • #secdiv

- Samsung S4 • #MessageWebViewDiv

- Samsung S5, S6, S7

<divclass="code-wrapping"><tablewidth="100%"border="0"cellspacing="0"cellpadding="0"bgcolor="#333333"role="presentation"><tr><tdstyle="font-size:0px">&nbsp;</td><tdalign="center"width="600"bgcolor="#ffffff"><!--Content--></td><tdstyle="font-size:0px">&nbsp;</td></tr></table></div>

.code-wraping.foo{}

Targeting via preprocessor editingOutlook 365 & Outlook.com[owa365].foo{}

Yahoo!

@mediayahoo{.foo{}}

Targeting via preprocessor editingOutlook 365 & Outlook.com[owa365].foo{} .x_foo{}

Yahoo!

@mediayahoo{.foo{}}

Targeting via preprocessor editingOutlook 365 & Outlook.com[owa365].foo{} .x_foo{}

Yahoo!

@mediayahoo{.foo{}}

@media{.foo{}}

Targeting via preprocessor editingLotus Notes 8.notes.foo{}

Alto mail[class^=aolmail_].foo{}

Targeting via preprocessor editingLotus Notes 8.notes.foo{} .foo{}

Alto mail[class^=aolmail_].foo{}

Targeting via preprocessor editingLotus Notes 8.notes.foo{} .foo{}

Alto mail[class^=aolmail_].foo{} [class^=aolmail_].aolmail_foo{}

Targeting via unicode

AOL mail<divclass=" "id=" ">

(AKA WTF? TLA)

N.B. This doesn’t work on older IE

Targeting via unicode

AOL mail<divclass=" "id=" "> . :not(# ){}

(AKA WTF? TLA)

N.B. This doesn’t work on older IE

Targeting via attribute selectors

[class]{}[class="exactly"]{}[class*="contains"]{}[class~="contains-strict"]{}[class^="startswith"]{}[class|="starts-with-strict"]{}[class$="endswith"]{}

Targeting via attribute selectors

*[lang~="x-foo"]{/*Gmail*/}

table[width="600"]{width:100%;max-width:600px;}

[style*="position:absolute"]{/*Checkforstrippedcode*/}

<divlang="x-foox-bar">

</div>

<tablewidth="600"…>

</table>

<divstyle="position:absolute;">

</div>

Targeting via media queries@mediascreenand(max-width:600px){/*Viewportwidth*/}

@mediascreenand(max-device-width:600px){/*Devicewidth*/}

@mediascreenand(-webkit-device-pixel-ratio){/*Webkit*/}

@mediascreenand(-webkit-device-pixel-ratio),screenand(-moz-device-pixel-ratio){/*Webkitandmozilla*/}

Targeting via supports

@support(position:flex){/*Supportspositionflex*/}

Targeting via supports

@support(position:flex){/*Supportspositionflex*/}

.foo[style*="position:flex"]{/*Codeissupported*/}.foo:not([style*="position:flex"]){/*Fallbackforwhencodeisstripped*/}

Targeting interactivity<inputtype="checkbox"style="display:none!important;"id="interactivity"checked><table><divclass="interactive">...</div><divclass="fallback">...</div></table>

<style>#interactivity:checked+table.interactive{display:block}#interactivity:checked+table.fallback{display:none;}</style>

Some hacks

Hiding content<divclass="foo"style="display:none;max-height:0;overflow:hidden;mso-hide:all;"></div>

.foo{display:block!important;max-height:none!important;}

Hiding content• <img> tags still load<divclass="foo"style="

display:none;max-height:0;overflow:hidden;mso-hide:all;"></div>

.foo{display:block!important;max-height:none!important;}

Hiding content• <img> tags still load• Background image

load

<divclass="foo"style="display:none;max-height:0;overflow:hidden;mso-hide:all;"></div>

.foo{display:block!important;max-height:none!important;}

Hiding content• <img> tags still load• Background image

load• Content is still visible to

inbox search, and as preheader

<divclass="foo"style="display:none;max-height:0;overflow:hidden;mso-hide:all;"></div>

.foo{display:block!important;max-height:none!important;}

Gmail image/font size

Gmail image/font size

<imgsrc="london.gif"width="200"height="200"alt="Londononaglobe"style="font-size:10px;width:20em;height:20em;"/>

Absolute positioning<divstyle="position:relative"><divstyle="position:absolute;top:100px;left:100px;"><!--content--></div></div>

(Doesn’t work in Outlook 07-16)

Absolute positioning<divstyle="position:relative"><divstyle="position:absolute;top:100px;left:100px;"><!--content--></div></div>

<divstyle="max-height:0;max-width:0;"><divstyle="margin-top:100px;margin-left:100px;display:inline-block;"><!--content--></div></div>

(Doesn’t work in Outlook 07-16)

Thank You!

@M_J_Robbins @GoRebelmail #LitmusLive

Mark Robbins