- Open the email in both clients and pull out the rendered code using dev tools.
- Do a find a replace on the CSS prefix (replace
yiv2295535647withyiv) - Paste both bits of code into https://www.diffchecker.com/diff
- And differences in the code should be highlighted.
Minify - remove unnecessary whitespace from around your styles. You can do this manually or use some tool, but be sure you use something built for email rather than web to avoid any issues.
Uglify - change class names to shorter potentially unreliable names, so
.two column layout{}could become.col2{}or even.a{}. Again you can do this manually or with some email specific tooling.Use multiple style blocks - If you have multiple
<style>blocks Gmail will only start removing when the total size is over 16kb.
There is a new bug in Outlook iOS listed here that might explain the issues you are seeing https://github.com/hteumeuleu/email-bugs/issues/112
You need to make sure you apply the x_ class as an attribute selector.
<style>
[class~="x_foo"]{display:none}
</style>
<div class="foo">hide in outlook webmail</div>
Also this website is very good at staying up to date on the latest email client targeting https://howtotarget.email/
Interesting, from what I've seen Yahoo and AOL are almost exactly the same.
Even the CSS prefix structure is the same yiv[number]class{}
What I would do is
One other possibility is it could be some default styles from the email client inherited into your code, for example Yahoo adds word-break: break-word; word-wrap: break-word; to the message wrapper but AOL doesn't. Not sure what other differences there are but might cause an issue somewhere.
Also if you are able to share you code here, I could maybe take a quick look.
It could be worth running an A/A split test.
So set it up exactly like you would a normal A/B split test but both versions are exactly the same.
This will give you an idea of the natural fluctuation in the results, then use that as a baseline to compare your tests against.
It could be that the change you are making isn't having much impact and the conflicting results you are seeing is just this natural fluctuation.
Yeah Gmail sets a limit of about 16kb on embedded CSS. There are a few things you can do to help with that.
So for something like this
<head>
<style>
/* 5kb basic layout styles */
</style>
<style>
/* 10kb make it look cool */
</style>
<style>
/* 10kb elaborate fancy stuff */
</style>
</head>
The first 2 blocks add up to 15kb so those will be kept, then the third one and any after it will be removed as that pushed is over the limit. It's good to group the styles so if one block is removed it still looks good.
If you looking for a tool to help with minify and uglify i think https://emailcomb.com is pretty good
Thanks for checking that @Elin Pedersen
There appears to have been another change between version 4.2124.0 and 4.2142.0
So now you need 2 id’s to make it work and these need to be on separate elements.
<div id="id1">
<div id="id2">
Phone number: 0123456789
</div>
</div>
#id1 #id2 a[x-apple-data-detectors]{
color: inherit !important;
text-decoration: inherit !important;
}
@Elin Pedersen Try this stripped back test and see if that works.
I've added outline:2px dashed red; just so you can see if the selector is working.
If this is working then the may be something else in your template that is interfering with the code.
If it's not working then let me know what version of the app you are using (it's under settings > help & feedback) I'm currently on version 4.2124.0
<!DOCTYPE html>
<html>
<head>
<style>
#body a[x-apple-data-detectors]{
color: inherit !important;
text-decoration: inherit !important;
outline:2px dashed red;
}
</style>
</head>
<body id="body">
Phone number: 0123456789
</body>
</html>
iOS 15 can be targeted with this bit of CSS from howtotarget.email
@supports (-webkit-overflow-scrolling:touch) and (aspect-ratio: 1) {
.countdown {
display:none;
}
}
Any workarounds to force an update are likely to be be shut down quickly, so could break halfway through your campaign so I'd advise against try that.