Adaptive Buttons

It can be helpful, in certain situations, to have an email’s button span the full width of the screen on mobile devices. While right-handed users are more comfortable tapping the left side of a phone screen with their thumbs, left-handed users are more comfortable tapping the right. In the case of a strong call-to-action, like a button, making it easy for anyone press can be beneficial.

Here’s a standard HTML button, and how it appears when an email is viewed on a desktop:

<table border="0" cellpadding="0" cellspacing="0" class="emailButton" style="border-radius:3px; background-color:#6DC6DD;">
  <tr>
    <td align="center" valign="middle" class="emailButtonContent" style="padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;">
      <a href="..." target="_blank" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; text-decoration:none;">Buy Now</a>
    </td>
  </tr>
</table>

Primarily, we want to change the button’s width on small screens, but it’s also a good idea to increase the text size and change the link to a block-level element:

<style type="text/css">
  @media only screen and (max-width: 480px){
    .emailButton{
      max-width:600px !important;
      width:100% !important;
    }

    .emailButton a{
      display:block !important;
      font-size:18px !important;
    }
  }
</style>

The code above results in a more usable and readable button: