How to add a fixed-position CTA to your email newsletters

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.

Fixed-position CTA at the top of an email messageThe 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. If you would like to take a crack at fixing this issue, please contribute in our forums.

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.

Posted by Ros Hodgekiss

10 Comments

  • Michael C.
    18th September

    When I was in-between an old Nexus S and the HTC One, I had a temporary Android phone, the Samsung Galaxy Pocket. It has a 2.8”, 240x320 screen, and while the inferior resolution itself wasn’t that big a deal, the aspect ratio often was. With the majority of Android smartphones out there having 9:16 ratio screens, many app and website developers forget that that’s merely a trend, not the rule. Thus, I ran into quite a number of instances where the developer assumed I had more vertical space than I did. This resulted in websites with fixed-position menus whose bottom parts were simply unreachable (you couldn’t scroll down to them since the menu was fixed-position), and apps whose key interface elements were either being too compressed to be used, or else completely obscuring other important interface elements.

    My concern about this method is that, after taking into account any OS chrome and email client interface, any fixed-position element could obscure so much of the rest of the email as to make it unreadable. It seems to me to be wise never to assume there will be ample surplus screen real-estate for fixed-position elements… UNLESS, of course, you place the elements’ fixed-position-ness inside a media query that tells you exactly how much vertical space you have available to utilize.

  • Finge
    18th September

    Thanks for this great tip!

    I implemented this in one of templates that we created using the template builder. The fixed button is created as a repeater element so that we can easily add the button as a layout element. Works great!

    However in iOS 7 the fixed button is ‘overrun’ by the overlay fixed OS menu. The fixed button disappears beneath the menu and is effectively rendered useless.

    I am sure there is an easy way around this. Any ideas?

  • Dan
    19th September

    Awesome idea. Will test it on some point next week and will let you know what happen.
    Agree with Michael C. on aspect ratio but it has to be tested

  • Craig
    19th September

    Really like the look of this.

    Im a beginner to CSS and @media attributes though.

    Is anyone able to talk me briefly through how to implement that code screen shot above?

    thanks

  • Ros Hodgekiss
    20th September

    Hi there Craig, I recommend taking a look at our Guide to Responsive Email Design. It covers the theory and a lot of the code behind ideas like this one :)

  • Kataskeui Istoselidon
    20th September

    Thats really useful, thanks!!

  • Igor
    20th September

    It doesn’t work in iPhone iOS7.

  • Matt
    21st September

    Just chiming in with others to say it’s getting hidden in iOS7 behind the tray of email-tools at the bottom of the email app. Works great on previous versions of iOS, though! Will try to find an iOS7 fix.

  • Jarrod
    24th September

    Would love to hear of an iOS7 fix.

  • Ros Hodgekiss
    1st October

    Hey folks, just letting you know that I’ve been tapping away at a fix and so far, it’s been a touch elusive. You may have heard about position: sticky; - which in theory, should result in an element “sticking” to its parent on scroll. However, so far, we haven’t had a lot of luck.

    Our best bet is to stick to position: fixed; for now, but please pipe up in our forums if you come across a better solution.

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account