10 Things to Know About Responsive Email Design

responsive email coding

Google sent the email marketing world into a frenzy in 2016 when they announced that Gmail is finally introducing support for embedded styles and CSS media queries. For the developer, embedded styles can save precious time spent typing the same inline CSS over and over. For the recipient, an email enhanced by the use of media queries can be much easier on the eyes. Basically, Google is stepping it up for everybody. This totally makes up for that weird thing where they made us all use Google+ for, like, a week. Right?

As long as it’s implemented effectively.

Do it right, and it makes everyone’s day easier; do it wrong, and you’ll have a failed email campaign faster than you can say, “Wait, what even was Google+?” So, before you dive headfirst into your next newsletter, here are a few things about responsive email to know, consider, and maybe even discuss at parties.

mobile email statistics

1. The use of mobile email has been on the rise, and it only continues to climb. By 2017, 78% of all email users will access their email on a mobile device. That’s really soon. At the same time, email opens from webmail and desktop clients are steadily dropping, with their use falling 13% in 2015 alone. Like pagers and Blockbuster, desktop-only email campaigns are a thing of the past. Today, the majority of emails are opened away from the desktop, and responsive design can help you effectively reach your audience, no matter what device they use.

Unless that device is a VCR.

2. With these updates to Gmail, 75% of all email clients now have the capacity for responsive design. But what does this mean in terms of numbers? In 2016, Gmail reached 1 billion users, and three-quarters of their users access their accounts on mobile devices. That’s 750 million users eagerly awaiting your sparkly new responsive emails. If you stacked those users on top of each other, they would reach to the moon and back, then back to the moon again before crashing to Earth when the guy at the bottom tried to check his email.

3. If you could do that math, you’ve probably also noticed that leaves 25% of email clients without responsive design supportSo don’t abandon your hybrid design technique just yet; there’s a chance you may be leaving behind a few readers too. But how do you decide whether to go all out with responsive design? If this question has you stumped, don’t worry; you get a lifeline.

Seriously, ask your audience!

email design

4. Successful responsive email implementation requires you to carefully consider which email clients your audience is using. If your recipients are squarely in the Gmail camp, you’re probably still in the middle of celebrating this wave of good news. I’ll wait.

However, if you have an abnormally high level of Outlook users, then there’s no need to break the bad news to you; you’re probably used to being disappointed by Outlook. Still, while Outlook isn’t on board yet, there’s always the chance that they might not be far behind. With the rapidly-changing nature of the email world, along with promising partnerships, a celebratory desk dance could be in your future too.

5. Responsive design is a great way to make emails look good on devices, but don’t leave any devices out!. Media queries are an invaluable tool for creating mobile-friendly emails; however, with the lines between desktop and mobile becoming increasingly blurry, this can get a bit tricky. The rise of phablets, wearable technology, and the Internet of Things means that you’ll have gadgets of all shapes and sizes to keep in mind with your design.

Many people view emails on more than one device, with 25.6% even using one device to filter through emails before reviewing them more closely on another; and while you probably don’t have to worry about your audience routinely reading their emails from a refrigerator just yet, you want to make sure they’re pretty enough for Mom to hang on hers anyway.

6. More than ever, it’s important to test your emails across different clients and devices. Make sure you have a comprehensive plan for testing your email. Ideally, “responsive email” means that the email’s response will be to conform to your inbox, not self-destruct upon impact. Over 40% of people will simply delete emails that don’t display properly, and as the number of ways to access email is growing all the time, it’s very easy to create one that trips up along the way.

mobile friendly email design

7. Just because your email’s coding is mobile-friendly doesn’t mean its appearance is. With less screen space available, incorporating every aspect of the desktop version into a mobile format can be overwhelming for your audience and their poor index fingers.

As much as you love your giant graphic of a kitten wearing a party hat, a truly mobile-friendly design takes the limited real estate into account, presenting only what’s necessary so you don’t lose your audience. This might mean using media queries to collapse or even hide some less important elements. Or maybe just a smaller version of that kitten wearing a party hat.

email conversion landing page

8. Don’t forget the landing page! The most mobile-friendly email in the world won’t do much for your conversion rate if the landing page is mobile-antagonistic. Like emails, mobile-optimized landing pages take device limitations into consideration, ensuring that information is readable, forms can be completed with ease, and the overall mobile experience isn’t bogged down by extraneous content.

Along with the perks that come with incorporating responsive email design, a few tweaks to your mobile landing page can reduce bounce rates by as much as 27%. And speaking of perks…

9. Moving to responsive email sounds like a lot of work, but it pays. Promise. On average, a mobile email click generates more than double the revenue of a desktop click (40 cents vs. 19 cents), and sending responsive email leads to 24% more mobile clicks than non-responsive ones. Don’t worry, you don’t have to do any more math right now; just know that responsive email = $$$.

10. If you’re still not convincedresponsive email template that sending responsive emails is worth all the trouble, a template can get you started fast and easy. If you’ve been keeping up, you know that a free responsive design template means free money in your pocket and free time in your schedule to keep searching for pictures of tiny animals wearing people clothes. It just makes sense.

Download PostUp’s free responsive email template to start sending emails that look good on any device. If only you could be responsive to the emails in your own inbox so easily.

Free Responsive Email Template Download

Editor, PostUp PlayBook