Responsive design is imperative in everything from our phones to our gadgets to our emails, everything is a function of design. We've been getting many queries about responsive email design -- and whether emails can be seen easily on mobile. Well, we ran our own test, and responsive email works... but not in all mobile email clients. In fact, there are a lot of caveats!
The designs of your emails must provide a great user experience...period.
Contrary to what you may think, there are only a few mobile email clients that support it, and even then, your email might not show up well for mobile. Here's an example: Gmail clients on the web or in mobile, do not support the media CSS tag, which is what responsive design uses to identify how things should look on different screen sizes. At Genoo, our corporate email is hosted on Google's Gmail platform.
When I receive emails on my laptop (which is a Mac) in the Mail application, if I shrink the email display area, the email "responds" and reacts accordingly. But, when I look at the same email on my iPhone through Gmail's mobile client - it doesn't show up according to my iPhone screen size - it shows up reduced, and I've got to pinch and zoom to really see it.
This post shares what we've discovered. Email is the most effective marketing medium in terms of ROI, and that isn't changing anytime soon. For sure mobile is part of our future and we need to plan for it. This post will hopefully let us share what we've learned in a way that will help you.
How Does Responsive Email Work?
Responsive design uses the Media tag in CSS to identify screen sizes and what to do when a specific screen size is encountered. Here's an article by Campaign Monitor that outlines which clients work and do not work with responsive email. You'll notice that Microsoft is decidedly NOT on the list -- so if you're sending a lot of B2B email, and people are reading them using Outlook, or on a Windows Phone, you will not have success right now with a responsive email design.
It's all in the "View Online" (or "View on Mobile") Link
For a responsive email to be seen on a mobile device well, the ONLY way to guarantee it, is to have people look at the online version of the email. That's the "View Online" link that most of us see in emails at the very top. You'll start to see "View on Mobile" up there too. It goes to the same place as "View Online" - but hopefully, more people on mobile devices will click there who want to see a version they can actually read more easily - one that's been designed for their screen. Why? Because it's rendered as a web page through a browser, and not through an email client.
Play and Explore With a Responsive Email Template
Check out a responsive email with different screen sizes (i.e. send to your mobile devices as well as your laptop) to see how the content shows up. This is all stuff that marketers ought to know, just to help you cut through the hype. For example, if the "view online" link at the top of most emails can't be seen when rendered on a mobile device, and that device doesn't render responsive email design, then the recipient isn't going to see that they could click to view a version that would work for them.
If you're contemplating using responsive emails (or demanding them), then understand how they work and when they work really well, and what you'll need to do to design great responsive emails.
Do You Really Need Responsive Email?
Likely not in every case. Let's face it, it's not supported by many platforms today. I'm sure as more pressure is placed on the vendors of email clients, they will get more "responsive-enabled". The answer is to test and see if you get a lift from sending responsive emails. Let your results guide you.
