Frustrations abound when an email is viewed on an iPhone or iPad, the iOS device will automatically add links around specific words, turning the words blue and underlined. These words can include phone numbers, addresses, dates, and sometimes random words like “tonight.” This can seriously clash with the overall style of the email or make the linked text hard to read.
Here is an example of a phone number that is almost impossible to read when the white styled font is changed to blue.
1) Phone number styled white:
2) Phone number turned into blue link on iPhone (it’s in the same place but hard to see which is the problem of course!):
To prevent iOS from changing these words into blue links, you’ll need to add a few styles to your message. These styles include a style in the header of the message as well as a span tag class around the targeted text. Even though inline CSS is the rule of thumb for HTML email since Gmail strips out CSS in the header of emails, this solution is okay to use since native mail client in iOS supports embedded style sheets.
Specify this style in the header of the email:
.blueLinkFix a {color: #FFFFFF !important; text-decoration: none;}
Use #000000 for black or change the hex code to another color if you prefer)
Then add an HTML tag around the text you want to prevent from turning blue:
<span class="blueLinkFix">111-222-3333</span>
Now test your message! Make sure it looks as expected either on your phone or in the Inbox Preview for iOS devices.
The formerly blue and underlined text should now appear white as expected on iOS devices. It’s important to note, however, that each of the formerly blue links are still active. Clicking or pressing these links can still trigger app-based events, such as calling the phone number in the example above.
Until next time, keep those emails rolling!
– Jim
Why not book a tailored demo with Jim now to see the benefits of Critical Impact?
