Responsive Email Design is Responsible Marketing

Sparky
May. 1, 2015 by Sparky

shutterstock_82818058Responsive email design is the new normal and how anyone sending email today should approach the design of their marketing and transactional communications. Used properly it enables you to overcome the complications of distributing email in a landscape with multiple generations of iPhones, an ever-growing variety of Android devices, tablets, laptops and desktops. Beyond devices, each email client has its particular rendering quirks such as how Gmail only renders CSS inline and will strip, or not render, stylesheets in the <head>.

When email doesn’t render properly, it is a strike against your brand. If a competitor’s email renders well across multiple devices and yours does not, that’s a problem. Smart responsive design that renders consistently and seamlessly across devices eliminates a hurdle to your brand’s visibility.

About half of all email is opened on mobile devices, so SparkPost recommends that you think about the design of your emails with a mobile first mentality. As with many things, it is far easier to scale complexity up than it is to try and shrink complexity down. If we focus on what works for mobile such as top to bottom flow instead of multiple columns, buttons (clickable areas) designed for thumbs rather than a mouse pointer and recognizing that we don’t have enough physical space to pack in an excess of content, we end up with useful creative restraints within which we are free to craft more effective email.

Taking a mobile-first approach provides assurance of a good user experience. We’ve all experienced the frustration of the errant tap that leads you to the wrong place. More thoughtful, responsive design removes barriers to our email content achieving the right response, leading the reader to your landing page, exciting offer, or valuable content and putting them on the path to conversion.

Responsive design is not only better for engagement; it reduces the overhead of your email workflow. A good responsive template allows you to easily maintain any flavor of content because you are no longer occupied with repeated testing and manipulation of your content. Start with the assumption of smaller screens about 600 pixels wide and use tools like CSS3 media query to adjust your content dynamically based on the device or email client rendering your emails. Once you’ve found a format that works well across the widest swath of displays, you’re free to focus on content that works.

If you’d like to learn more about responsive email design, including media query usage, I recommend Litmus’s resources on this topic.

Related Content

The Bayesian Logic in SparkPost’s A/B Testing API

Our new API feature for A/B testing transactional emails uses a statistical algorithm, Bayesian Logic, for picking the winning variant of the message.

read more

How to Improve Your Email Accessibility

Mark Robbins of Rebel shares his perspective on how brands should be thinking about email accessibility and assistive technology in their campaigns.

read more

New Feature: A/B Testing API for Transactional Email and Notifications

Transactional email has unique testing requirements. SparkPost’s A/B Testing API is optimized for testing real-time use cases like app notifications.

read more

Get started and start sending

Try SparkPost and see how easy it is to deliver your app’s email on time and to the inbox.

Try Free

Send this to a friend