Unconventional Ways to Leverage Responsive Email Design and Coding to Your Advantage
I got some great insights on responsive design and coding for non-techies from my colleague Luca Bellavita, a design and HTML manager for Alchemy Worx, which I shared in a recent ClickZ column. But one thing that’s been taking a lot of my head space lately is how and when to leverage responsive design and coding in unconventional ways.
Lately I’ve been thinking a lot about responsive design and coding with respect to email. I’m sure you’ve seen the stats:
- Mobile operating systems are responsible for roughly 50% of all email opens
- Apple’s iPhone alone is being credited with 26% percent of opens, more than any other operating system – and nearly double the 14% attributed to #2, Microsoft Outlook
But one thing that’s been taking a lot of my head space lately is how and when to leverage responsive design and coding in unconventional ways.
First let me explain what I mean by unconventional. I’m looking at times when responsive design and coding might be used not just to optimize the viewing experience of the email, but to change the call-to-action to be more appropriate for the device it’s being viewed on.
Here are three examples of times that this might be useful:
- When the landing page, microsite or Website you’re driving traffic to isn’t optimized for mobile, so much so that it’s not just a bad but actually a terrible visitor experience (obviously the best answer is to fix it, but often that’s not an option before the email send date)
- When the call-to-action isn’t something that would typically be done via a smartphone, for instance uploading a file (like adding a presentation to your SlideShare account) or downloading a file (like a white paper)
- When the process you’re asking the visitor to complete is too complicated to be done on a mobile device, here I’m thinking about things like very long, multi-page forms which ask for information that you may not have readily available when you’re ‘on the go’ with your smartphone (think online product registrations).
So what do you do? One answer is not to bother making the email responsive – what’s the point if everything after the email is a bad mobile experience? I’ve seen clients take this approach and I understand it; the resources spent on responsive email in these situations would likely not provide an increased return.
But what if there were a different solution? What if you could use responsive design not just to optimize the mobile viewing experience but also to change the call-to-action to make it more appropriate for the viewing experience?
In my discussions with Luca, I learned about the three different techniques for making an email responsive:
- Fluid (or Liquid) Coding
- Show and Hide
I also learned that you can combine these techniques in a single email – some elements can utilize Stacking while others are manipulated for mobile via Show and Hide.
Show and Hide is the one that really caught my attention. It allows you to create two versions of an element, one to be shown when the email is viewed on a large screen and the other to be shown when the email is opened on a small screen.
So here’s my premise: using Show and Hide, you deliver one call-to-action to desktop or laptop openers and a different call-to-action to those viewing the email on smartphone. Going a bit further, you can actually do this with multiple elements of the email, which can effectively change the entire focus and goal of the message.
Let’s take something you’re all likely familiar with: LinkedIn. I’m a big fan, can’t imagine my business life without it.
But remember what it took to set-up your profile for the first time? Imagine trying to accomplish that using your smart phone while you’re at an airport – small screen, small keys, large fingers, details of each of your jobs throughout your career, including start/end months and years, people walking by, listening for boarding instructions or information on the flight delay. You could do it here – but wouldn’t it be better to save a task like this for when you’ve got a large screen. a full size keyboard and fewer distractions?
As a marketer, knowing that someone is reading your email on a smart phone when they’re on the go, does it make sense to drive them to undertake a task like this right now? Or would it be more effective to ask them to undertake this task the next time they’re at their desk? Share and Hide responsive coding would allow you to tailor your email not just to your reader’s screen size, but also to their likely situation at the time they’re reading it.
You could start by changing the call-to-action – and then create different versions of other elements to highlight more appropriate supporting messages. So instead of the message being ‘do this now, here are three reasons.’ the message could be ‘remember to do this later – here are three ways to remind yourself’ with a link to put it in your calendar or a suggestion to create a reminder on your smart phone. Obviously the features/benefits/advantages of what you’re asking need to be in both, but you get the idea.
Rocket science? No, I’ll admit it’s not. But in this ‘all responsive design and coding, all the time’ email marketing world we live in, it’s a different way to leverage the tactic to your advantage. It’s much better than not going responsive at all or going responsive with a message that’s going to lead to a poor reader experience.