If you are we webs designer that creates EDM’s, Newsletters, Invitations etc. that get sent out via email then you are probably painfully aware of the frustration when viewing your perfectly looking HTML email on an iOS or Mac. All of a sudden all emails, telephone numbers, dates & times are blue and underlined. Wait what just happened?
Apple in all of its wonderful intelligence is sometimes a real pain in the butt. Don’t get me wrong, I love Apple devices, in fact this blog post was composed on one, but sometimes they are a little too forceful with their way. This is especially the case when they have automatically and “conveniently” created hyperlinks in all of your recognizable content. The problem comes in when the awesome new HTML newsletter you have created has a colour palette of red, black, white & grey, but all of sudden all these automatic links are blue and underlined, in spite of your best efforts.
Many of us have lost chunks of hair at a time due to this frustration. After spending several hours searching for solutions, trying them, failing and searching again, these are the tricks that I have discovered to work for me.
Using zero width characters between dates and times:
This is a bit of a dirty trick in a sense because it tricks the system into thinking that you are not actually displaying a date or a time. You simply add “​” in between the numbers an boom, no more blue links. The only problem with this method comes in when you actually still want these to be hyperlinks. If that is the case, ignore what you have just read.
Using the webcal href attribute to style date hyperlinks
This is a pretty nifty little trick that works pretty well with dates. You simply add the following:
<a href="webcal:#" style="color: #000000; text-decoration: none;”>
This changes the link style on date hyperlinks. Unfortunately this doesn’t behave quite the same for time hyperlinks, which is rather annoying.
Thank you so much you save my life 🙂