Monthly Archives: April 2016

Prevent anchor elements from turning purple after clicking in HTML emails

by ,

If you test HTML email campaigns using real devices, then this post may be beneficial to you. In Outlook 2010 for example, hyperlinks in their visited state, may turn purple after you click on them, even if you explicitly declare an inline CSS color style in a <span> element. You wouldn’t be able to detect this if you are using a email testing software such as Litmus. Here is the initial HTML:

HTML


<table>
 <tr>
  <td colspan="4" color="#ff6b35">
   <a style="color:#ff6b35;text-decoration:none;" href="#">Privacy Notice</a>
   <a style="color:#ff6b35;text-decoration:none;" href="#">Unsubscribe</a>
   <a style="color:#ff6b35;text-decoration:none;" href="#">Terms of Use</a>
   <a style="color:#ff6b35;text-decoration:none;" href="#">Legal Notice</a>
  </td>
 </tr>
</table>

Here are the hyperlinks in their initial (:linked) state:

html email hyperlinks linked

Here are the hyperlinks after clicking on the “Unsubscribe” hyperlink (:visited) state – MS Outlook 2010

html email hyperlinks visited

The initial thought may be to surround the text inside the anchor element with a <span>, and using the same color specified in the anchor element. See the updated HTML below:

HTML


<table>
 <tr>
  <td colspan="4" color="#ff6b35">
   <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Privacy Notice</span></a>
   <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Unsubscribe</span></a>
   <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Terms of Use</span></a>
   <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Legal Notice</span></a>
  </td>
 </tr>
</table>

After testing the email again in Outlook 2010, the links still turn people, despite the code changes above. After experimenting a little bit more, we found our solution. You have to surround the text with a <strong> element.

Solution

HTML


<table>
 <tr>
  <td colspan="4" color="#ff6b35">
   <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;">Privacy Notice</strong></a>
   <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;">Unsubscribe</strong></a>
   <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;">Terms of Use</strong></a>
   <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;">Legal Notice</strong></a>
  </td>
 </tr>
</table>

Using the <strong> element works, but there is a side effect. The text is now bold. To address this, simply add an inline style of style=”font-weight: normal;” to your <strong> element and that should do the trick!

Links remain in :hover state after clicking browser Back button on mobile devices

by ,

When using Mobile Safari (iOS) on iPads and iPhones or Chrome Mobile on Android devices, when you touch a button or hyperlink, it will trigger the “hover” state. If you have a CSS declaration that targets this pseudo class, this style may be active or visible if you tap the button/hyperlink and then tap the Back button in the browser. This is most likely not the desired state that you are looking for especially if your :hover declaration was intended for desktop browsers only. The reason why this happens is because when you tap on the back button, a request to the server is not sent, therefore the page that is in the cache gets reloaded along with the unintended hover state applied to your button or hyperlink.

Below is the sample HTML and CSS:

HTML


<a href="#" id="button">Button 1</a>

CSS


a {
   display: inline-block;
   width: 200px;
   font-size: 1em;
   font-weight: bold;
   border-radius: 5px;
   text-align: center;
   margin-bottom: 25px;
   line-height: 2em;
   text-decoration: none;
}

a:link,
a:no-touch:hover {
   background-color: green;
   color: white;
}

a:hover {
   background-color: white;
   color: green;
   border: 1px solid green;
}

Here are our buttons in the linked and hover states, respectively.

buttons_post5

When tapping on the Back button on a mobile browser, the button with white background with green font would be active and not the button with green background and white font.

Solution

To fix this you can set up a script to detect the device using the ID of the button and the userAgent.match function, by passing Android, iPhone, or iPad arguments as seen below.

JavaScript


<script>
   var userAgent = window.navigator.userAgent;

   if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent(/Android/i)) {
      var button1 = document.getElementByID("button");

      button1.className += " no-touch";
   }    
</script>

This script adds a “no-touch” class to the className property of the anchor tag, which will then render as if the button is in it’s “linked” state. For more information on how to check User Agents for Mobile/Tablet, visit this post on stackoverflow, JavaScript how to check User Agent for Mobile/Tablet.