Fixed Position Your Call To Action

One of the great things about responsive design is the support by clients for real css.

This morning my coworker had an interesting idea to fix position an element in an email design.  What if we can keep the call to action sticky?

Here's a proof of concept: http://bit.ly/FixedEmail (remember reduce the width of your browser window to see the fixed cta).

I kept the height small for landscape orientation. I pushed this to the top so it doesn't the unsubscribe at the bottom. Works on IOS 5+ and Android 4.2. Would need to be device and a/b tested (so determine if it's effective).

The phone number is clickable and will prompt a call on a mobile device. In a real design this would be a css button.

I would love to hear your thoughts.

roshodgekiss roshodgekiss, 3 years ago

Hughroper, this is one of the coolest things I've seen in a very long time. Verifies that it works a charm on iOS and Mailbox. Still looks great in Gmail. I'd love to share this with our customers, so hang tight - I'll pop you an email :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Redferret, 3 years ago

Works like a charm, I'd suggest that fixing to the bottom of the screen is better for usability, it's often quite a stretch for those with large screens to reach up to the top plus it facilitates reading flow.


Gmail app apologist
hughroper, 3 years ago

Thank Rosanne.

Redferret, agreed, as long as it doesn't interrupt the unsubscribe/opt-out on the bottom. Which I guess could be managed with [class=body] { padding-bottom: XXpx }.

zerocents zerocents, 3 years ago

Just a warning about fixed elements with links, as this may not behave as expected on Android.

While the element will render just fine, when the user scrolls down the page the actual link becomes unclickable. For whatever reason, the hyperlink hotspot does not stay fixed to the page and will move off screen when you scroll down. If android is a concern for you then you may want to reconsider.

@redferret
I typically avoid placing fixed elements near the bottom of the screen, since it interferes with the UI elements and can cause accidental clicks.


Michael Muscat
Redferret, 3 years ago

The link thing certainly is an issue, I'm looking in to it.

As for interfering with the UI, Fitt's law states that the users abilty to achieve a task is related to the distance to the target and the size of that target, so provided it's of a reasonable size (44px+) then the bottom is better regardless of proximity to other elements.


Gmail app apologist
hughroper, 3 years ago

@zerocents good catch. Looks like I need a better solution for testing on Android.

@Referret, please share if you find a fix.

brians, 3 years ago

From our testing, iOS 7 breaks this concept. Still looking for a work-around...

roshodgekiss roshodgekiss, 3 years ago

I second brians - finding that the fixed CTA doesn't stick to the top in iOS 7 Mail, but does in iOS 6. I wonder what changed?

Will try a bit more testing on my end, very odd!

EDIT: It turns out that iOS 7 treats the position CSS property differently from iOS 6. As a result, you can use position: fixed/relative; left: 0; right: 0; to rid the left/right margins that we've been seeing in iOS 7 Mail (and other mail clients like Mailbox and Postbox), however we wouldn't encourage you go around applying position to all your HTML elements.

I'll be updating the Guide to CSS support in email to mention this issue, it's odd, odd, odd.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
nesbit, 2 years ago

Any update on a fix for iOS 7?

roshodgekiss roshodgekiss, 2 years ago

Hi nesbit, sadly no update as yet - we've been experimenting with position: sticky, but so far no dice. Will let you know if we hear of anything more!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
alluremail alluremail, 1 year ago

Sticky CTAs are back! See this 'Sticky navigation' example - https://litmus.com/builder/0841ad3 - via the Litmus discussion forum - https://litmus.com/community/discussion … n-in-email

Not quite the same as the previous CTA implementation, but could be used for similar purposes. Works on iPhone!

roshodgekiss roshodgekiss, 1 year ago

That's awesome - thank you so much for sharing this! What an awesome discussion on the Litmus' forums, too. Brilliant stuff :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
alluremail alluremail, 1 year ago

It turns out that the fix for the earlier code to work with iOS7+ may have been a simple one.

Take the original concept from http://bit.ly/FixedEmail – For the "fixed" section, simply change margin: 0; to margin-top: 64px; – since the iOS Mail nav bar is 64px in height, the fixed section will sit directly below it. Tested on iOS 8, it works well.

To ensure the fixed section doesn't overlap on top of your logo or content, just add more margin-top to your main content wrapper for mobile devices.

It can look a little odd when you first open the email, before you start scrolling, as the fixed section will be 64px below the top, but you can improve this by having a preheader line or two at the very top to occupy the space.

dl2z12, 1 year ago

Nice post. Thanks for sharing!


command line ftp
http://www.sysax.com/ftpauto/

thefoxiscunning, 1 year ago

Love this! Thanks for sharing!

I'm curious about something else – have you seen your open rates take a hit w/ such large file size (pushing 700kb) campaigns? I've begun using a lot of .gif imagery, and although I compress the heck out of the file(s), I've seen about a 15 to 20% decrease in open rates for those campaigns (with a static or slightly greater CTR). It doesn't seem to be related to bounces or failed deliveries.

roshodgekiss roshodgekiss, 1 year ago

Hi thefoxiscunning, this might have to do with people closing/deleting the email before all the images have loaded. Also, increased load times may have people thinking, "oh, it's all images, never mind". For both these reasons, I'm not surprised that there's a dip in opens for large payload campaigns - what do you think?


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098