Mobile Safari/ iPhone Mail.app HTML design issues: prevent autolinking and styling auto-links (dates, addresses, etc.)

Question

i am trying to design an HTML e-mail that should also look good when it is read on mobile devices. My biggest problems are with the iPhone (iOS 4): its mostly undocumented \

Answer 1

I use this solution for auto links that need to be styled

<span class="applelinksWhite">or call 1-666-12<span>3-456</span>7</span>

Then, I add this to my style tag. I use it in the body as some clients strip it from the head.

.applelinksWhite a {color:#ffffff !important; text-decoration:none;}

So the applelinks span covers ios devices' auto linking, and I throw in a basic span in the middle of the text string to throw off other clients like gmail. Tested in Litmus and working across the board.

This works for any kind of auto links.

Answer 2

For dates & addresses, you could disrupt the data recognition pattern matching by inserting e.g. a zero width entity. E.g.,

M​arch 30, 2013

Tested on iOS Mail 4.3 and 6.0.

Answer 3

<a href="#" style="color: #666666; text-decoration: none;pointer-events: none;">Boca Raton, FL 33487</a>

Change the color to whatever matches your text, text decoration removes the underline, pointer events stops it from being viewed like a link in a browser

This is perfect for HTML emails on ios and browser.