One of the huge perks to discussing email design on our forums are the sneak peeks into useful new email marketing techniques. Almost every day we see web-inspired ideas being translated for email - like this novel fixed-location call to action (CTA) by cool customers Hugh Roper and Crystal at Diamond Resorts International.
The concept behind this technique is simple. Mobile device screens are small, so it's unlikely that any one part of the message will always be visible as a subscriber reads an email. However, if there's a vital piece of information - say, a link, or a phone number - that you'd always like to have present, then you'll need a clever solution.
This is where Hugh's fixed-location CTA comes in handy. By adding a simple line of CSS, he's made it possible to feature an attractive call-to-action that, like with glue, 'sticks' to the top of the email message while the reader scrolls. Here's an abridged snippet of the code:
As you can see, position: fixed has been used to ensure the CTA remains at the top - not unlike what you would see in a regular browser window. The rest of the email content simply slides underneath. This same technique can also be used to pin the CTA to the bottom of the message (using bottom: 0; instead of top), which could be arguably better in some scenarios.
When not featured at the top of the email message, the CTA isn't hidden - instead, it features near the footer of the email message when viewed in desktop and webmail clients.
Many thanks again to Hugh and Crystal for both a nifty idea and amazing new responsive email technique - we can't wait to see it in more email campaigns. Do you have a suggestion for making the CTA in an email newsletter stand out? Let us know all about it in the comments.