Home Resources Blog

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.

Fixed-position CTA at the top of an email message

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:


@media only screen and (max-width: 768px) {
   [class=fixed] { position: fixed; top:0; left: 0; right: 0; }
}

...

<div class="fixed">
   <a href="tel:+x-xxx-xxx">Call Today</a>     
   <div>Mention Code: xxyyzz</div>
</div>

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.

Why mobile only?

While it’s entirely possible to use this technique in the regular, non-responsive version of an email newsletter, support for the position CSS property tends to be a lot less consistent in desktop and webmail, than it is in newer mobile email clients. So far, we’ve had considerable success with this technique in Apple iOS Mail and Mailbox, which dominate email client market share. While the fixed CTA works in the default Android client, links in the CTA don’t fare so well.

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.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free