Understanding email hacks

1. Understanding Email Hacks
@M_J_Robbins @GoRebelmail #LitmusLive
Mark Robbins
@otherside_uk

2. What we’re going to cover

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

4. What we’re going to cover
• Stuff you might no know about everyday email
hacks
• How to target email clients

5. What we’re going to cover
• Stuff you might no know about everyday email
hacks
• How to target email clients
• Individual email clients

6. 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

7. 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

9. <table>

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

11. <table role="presentation">

12. <table role="presentation">

13. <table role="presentation">
add it in NOW!

14. Targeting

15. Targeting via code wrapping
• .ExternalClass
- Outlook.com
• .moz-text-html
- Thunderbird
• #secdiv
- Samsung S4
• #MessageWebViewDiv
- Samsung S5, S6, S7
<div class="code-wrapping">
<table width="100%" border="0"
cellspacing="0" cellpadding="0"
bgcolor="#333333" role="presentation">
<tr>
<td style="font-size:0px">&nbsp;</td>
<td align="center" width="600"
bgcolor="#ffffff">
<!-- Content -->
</td>
<td style="font-size:0px">&nbsp;</td>
</tr>
</table>
</div>
.code-wraping .foo{}

16. Targeting via preprocessor editing
Outlook 365 & Outlook.com
[owa365].foo{}
Yahoo!
@media yahoo{
.foo{}
}

17. Targeting via preprocessor editing
Outlook 365 & Outlook.com
[owa365].foo{} .x_foo{}
Yahoo!
@media yahoo{
.foo{}
}

18. Targeting via preprocessor editing
Outlook 365 & Outlook.com
[owa365].foo{} .x_foo{}
Yahoo!
@media yahoo{
.foo{}
}
@media{
.foo{}
}

19. Targeting via preprocessor editing
Lotus Notes 8
.notes.foo{}
Alto mail
[class^=aolmail_].foo{}

20. Targeting via preprocessor editing
Lotus Notes 8
.notes.foo{} .foo{}
Alto mail
[class^=aolmail_].foo{}

21. Targeting via preprocessor editing
Lotus Notes 8
.notes.foo{} .foo{}
Alto mail
[class^=aolmail_].foo{} [class^=aolmail_].aolmail_foo{}

22. Targeting via unicode
AOL mail
<div class=" " id=" ">
(AKA WTF? TLA)
N.B. This doesn’t work on older IE

23. Targeting via unicode
AOL mail
<div class=" " id=" "> . :not(# ){}
(AKA WTF? TLA)
N.B. This doesn’t work on older IE

24. Targeting via attribute selectors
[class]{}
[class="exactly"]{}
[class*="contains"]{}
[class~="contains-strict"]{}
[class^="startswith"]{}
[class|="starts-with-strict"]{}
[class$="endswith"]{}

25. Targeting via attribute selectors
* [lang~="x-foo"]{
/* Gmail */
}
table[width="600"]{
width:100%;max-width:600px;
}
[style*="position:absolute"]{
/* Check for stripped code */
}
<div lang="x-foo x-bar">
</div>
<table width="600" …>
</table>
<div style="position:absolute;">
</div>

26. Targeting via media queries
@media screen and (max-width:600px){
/* Viewport width */
}
@media screen and (max-device-width:600px){
/* Device width */
}
@media screen and (-webkit-device-pixel-ratio){
/* Webkit */
}
@media screen and (-webkit-device-pixel-ratio),
screen and (-moz-device-pixel-ratio){
/* Webkit and mozilla */
}

27. Targeting via supports
@support (position:flex){
/* Supports position flex */
}

28. Targeting via supports
@support (position:flex){
/* Supports position flex */
}
.foo[style*="position:flex"]{
/* Code is supported */
}
.foo:not([style*="position:flex"]){
/* Fallback for when code is stripped */
}

29. Targeting interactivity
<input type="checkbox" style="display:none !important;"
id="interactivity" checked>
<table>
<div class="interactive">...</div>
<div class="fallback">...</div>
</table>
<style>
#interactivity:checked + table .interactive{
display:block
}
#interactivity:checked + table .fallback{
display:none;
}
</style>

30. Some hacks

31. Hiding content
<div class="foo" style="
display:none;
max-height:0;
overflow:hidden;
mso-hide:all;">
</div>
.foo{
display:block !important;
max-height:none !important;
}

32. Hiding content
• <img> tags still load<div class="foo" style="
display:none;
max-height:0;
overflow:hidden;
mso-hide:all;">
</div>
.foo{
display:block !important;
max-height:none !important;
}

33. Hiding content
• <img> tags still load
• Background image
load
<div class="foo" style="
display:none;
max-height:0;
overflow:hidden;
mso-hide:all;">
</div>
.foo{
display:block !important;
max-height:none !important;
}

34. Hiding content
• <img> tags still load
• Background image
load
• Content is still visible to
inbox search, and as
preheader
<div class="foo" style="
display:none;
max-height:0;
overflow:hidden;
mso-hide:all;">
</div>
.foo{
display:block !important;
max-height:none !important;
}

35. Gmail image/font size

36. Gmail image/font size
<img
src="london.gif"
width="200"
height="200"
alt="London on a
globe" style="
font-size:10px;
width:20em;
height:20em;
"/>

37. Absolute positioning
<div style="position:relative">
<div style="position:absolute;top:100px;left:100px;">
<!-- content -->
</div>
</div>
(Doesn’t work in Outlook 07-16)

38. Absolute positioning
<div style="position:relative">
<div style="position:absolute;top:100px;left:100px;">
<!-- content -->
</div>
</div>
<div style="max-height:0;max-width:0;">
<div style="margin-top:100px;margin-left:100px;display:inline-
block;">
<!-- content -->
</div>
</div>
(Doesn’t work in Outlook 07-16)

39. Thank You!
@M_J_Robbins @GoRebelmail #LitmusLive
Mark Robbins