Make Your Emails Look Better on iPhone
How to fix partial downloads, stop auto-linking, and disable automatic font resizing in your mobile email marketing
1. Don't let iOS Mail cut your messages in half
Does this sound familiar: "This message is only partially downloaded. Download Remaining XX KB"?
According to Email on Acid (who wrote the definitive article on this issue), roughly 10-15% of all email campaigns are truncated on certain iPhones and iPads. The user is forced to click a button to read the rest of the message. Worse, messages can be cut off in the middle of an HTML tag, ruining the half of the message that is displayed above the fold.
So this must be the result of a some Apple size limit and the only solution is to trim down your HTML, right? Wrong--it's way weirder than that! Yes, messages under 15 KB will always avoid this problem (and smaller file size is almost always better) but Apple's message size limit is implemented in a very unusual way that allows for a simple trick.
You can avoid partial message downloads entirelyby adding just over 1KB of "meaningless" whitespace to the header of your message. Yes, really. Read this Email on Acid article for the details .
2. Stop the iPhone auto-linking dates, phone numbers, or addresses
The iPhone and iPad automatically adds link tags to things it thinks it knows how to handle, like linking dates to the Calendar app and phone numbers to the dialer. (Several desktop email and webmail systems do this too, especially for dates.)
The typical solution is to add extra html around sensitive values and forcing them to look like body text with CSS. I have a better solution: break up the values with an invisible character that throws off the text detection algorithm. iPhone is smart enough to handle most whitespace like , but I discovered something even better: the Unicode character "Zero Width Space" character (​) . This character is totally invisible in every email client and browser I've tested, but it succeeds in "breaking" the iPhone date/number/address detection.
An Example (iPhone adds blue links to the number and address):
<p>Your order confirmation number is 5568321321 and a sample address is 123 Main St, Washington, DC</p>
The iPhone will add blue links to the confirmation number (mistaking it for a phone number) and the address.
Now toss in a couple Zero Width Space characters:
<p>Your order confirmation number is 55683​21321 and a sample address is 123​ Main St, Washington,​ DC</p>
And it looks exactly the same as the original, but with no auto-linking of values.
Bonus : This also works for disabling auto-linking in GMail.
3. Prevent iPhone from resizing small fonts
By default, the iPhone will resize any text in an email that's smaller than 13px. This is probably a useful feature for emails that aren't mobile-aware -- teensy text is hard to read.
But if you've built your campaign with mobile in mind, this can break your design in ugly and confusing ways.
Luckily the fix is straightward: Apple offers a special vendor CSS property -webkit-text-size-adjust:none that disables the behavior. Add it to a <style> block in the <head> and you're all set. Check out this Campaign Monitor post for more information and a fuller example of the fix.
One caveat: this CSS property will also apply to Apple's desktop Mail client. Consider using a CSS media query if you want to target this tweak to just iPhone or iPhone and iPad.
Are you a marketing professional? Check out Marketing Dive for news and information that's important for your job.Want to reach professionals in Education, Food, Utilities, Retail, Marketing, or Waste Management with your marketing message? Contact us .
