Upload
mark-robbins
View
670
Download
0
Embed Size (px)
Citation preview
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
<tablewidth="100%"border="0"cellspacing="0"cellpadding="0"bgcolor="#333333"role="presentation"><tr><tdstyle="font-size:0px"> </td><tdalign="center"width="600"bgcolor="#eeeeee"><!--Content--></td><tdstyle="font-size:0px"> </td></tr></table>
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"> </td><tdalign="center"width="600"bgcolor="#ffffff"><!--Content--></td><tdstyle="font-size:0px"> </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{} .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*/}
.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>
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
<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)