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

How to Create a Seamless Omni-Channel Marketing Program with MessageBird and SparkPost

Learn how our partnership with MessageBird provides enterprises with a solid path to enhance customer experience by employing the best technology available.

read more

Dating Apps and Triggered Email: It’s a Match!

Check out how dating apps like Tinder, Hinge, and Coffee Meets Bagel use app-generated email to simplify and streamline their users’ love lives:

read more

Knowing Your Social Media Privacy Settings

Have you reviewed the privacy settings on any of your social media accounts recently? Our guide will help you pick the privacy settings that best suit you.

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 Now

Send this to a friend