Responsive Email Design: Is It Really Worth It?

We’ve all seen the webinar invitations: “The Most Common Responsive Mistakes” and “Why Isn’t My Email Rendering?” We’ve seen the endless community posts about rendering engines and email client bugs and where CSS and media queries are and are not supported. Maybe you’ve even stared at some code and wondered what planet those Outlook-specific conditional comments () come from.

You may be thinking to yourself, “This seems like a lot of work. Is responsive design really worth all the effort?” The answer is yes. The numbers don’t lie and, depending upon your target audience, product and email type, 15 to 70% of your opens take place on mobile. Overall, as of 2017, 54% of all email opens happen on a mobile device. And when 80% of people delete an email if it doesn’t look good on their mobile device, designing mobile-friendly email is critical to the success of any email marketing program. But here’s the good news: responsive email design doesn’t have to be a headache.

First, learn the building blocks. At the core of responsive HTML are media queries, which are the rules you create that make your emails look better on different screen sizes. They can be used to enlarge fonts, change colors, add padding, stack elements, or even hide content (like your view in browser link) on mobile devices. Hiding all but your most important content on mobile devices is a great way to maintain accessibility on smaller screens while ensuring that desktop email clients still display the rich content in your email creative.

While media queries still don’t have universal support among email clients, but Gmail’s recent support for media queries means that most of your emails will be sent to clients that can handle them. That’s why adding this skill to your CSS toolbox is a great way to make your emails more mobile-friendly. There are a lot of great resources available to help you learn basic CSS media queries that can be incorporated into your existing HTML. Just remember that you don’t have to change everything! You just want your images, copy, and CTA to look their best on the small screen.

It can be confusing to know where responsive emails are supported and what that means for how your mailing will look. The easy way to deal with this is to test. A lot. Rendering testing should already be a regular part of your routine, but it becomes even more important when you add in the responsive elements. Be sure to look at your mailing on a number of different devices and across webmail and desktop clients, too. Render testing should be built into your process and your ESP’s platform.

Finally, remember that there is a lot of support out there. All those webinars and community posts? They exist to help take the stress and mystery out of responsive design, because after all, every one of those email designers was once in the same position as you. Take in their knowledge, learn from their mistakes, and when in doubt, you can always use a free responsive email template prebuilt for you. When mobile-friendly email can boost your open rates, engagement, and ultimately conversions, implementing responsive HTML in your email program is a no-brainer.

View All Resources »