Responsive Email Design is Responsible Marketing

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

Using Email to Maximize Your Product Marketing Spend

Maximize your product marketing spend with email - from raising awareness, to making a purchase, rewarding loyalty and building long-term relationships.

read more

GDPR for SaaS Product Teams: 5 Facts You Need to Know

GDPR has major implications for any SaaS provider with users in the EU or users who are EU citizens. Here are five things every product team should know.

read more

GDPR Affects Email Worldwide

Get an overview of GDPR, learn practical advice on aligning email sending practices with GDPR requirements and discover GDPR’s impact on your organization.

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