Skip links
Responsive Email Design

Responsive Email: The Key to Higher ROI

If you have a website, you’ve probably heard the phrase “responsive web design.” It involves resizing content for viewing on various screen sizes, from laptops to tablets to phones. But did you know that email can be responsive too? Eighty percent of emails are accessed on a mobile device. It makes sense to explore responsive email design to ensure your message is readable on mobile devices.

The Screen Size Dilemma

The average computer monitor size for a desktop user is 27”. The standard recommended width for emails is 600-800 pixels wide. This width provides a reasonably large area for viewing emails on the desktop. Mobile phones have a maximum screen width of 350 pixels—less than half that of the desktop. 

Many businesses take the easy road in email design and create a single-image email— similar to creating a print flyer. Unfortunately, this produces poor readability on mobile devices. As mentioned above, desktop screens can support 600-800-pixel-wide graphics, but mobile devices are 350 pixels wide or smaller. So when you create a single-image email, 14pt text becomes 6.5pt on a phone screen. This size text would be difficult to read even with reading glasses, which means your message is lost on mobile devices.

(Left) Text in an image at 650 pixels wide. (Right) Text in an image when reduced to 350 pixels wide. Text is illegible at 14pt.

Fortunately, there is a better way to design emails. Email services such as Mailchimp and Constant Contact make it easy to create HTML-based emails. That’s a huge step up from a single-image email. HTML-based email allows you to combine images with text for a better reading experience. There are some additional advantages too.

More Links

Single-image emails only allow one link to be attached to your graphic—limiting your ability to funnel viewers to specific offers on a landing page or website. HTML-based email supports multiple calls to action, and with responsive email, you can create different landing pages based on a user’s screen size. This flexibility provides insight into how your customers interact with your business and allows you to customize offers to serve them better.

HTML-based email allows you to include multiple call-to-action buttons, which can lead to different landing pages, websites, or specific products.


Single-image emails are supported by current as well as older operating systems using email applications, such as Microsoft Outlook. However, most people today view email using modern Web browsers versus dedicated email applications. And just like websites, web-based email supports responsive design. 

Responsive Email

While HTML-based email provides better readability than single-image email design, email marketing providers do not currently provide tools to create truly responsive emails. 

For example, a template featuring a three-column layout would merely reduce in size when viewed on a phone using Mailchimp or Constant Contact templates. With responsive design, the columns can wrap under each other, allowing the images and text to remain larger. Fonts sizes and alignment are also adjustable. 

(Left) Three-column layout as displayed on a desktop computer. (Center) HTML scaling using standard email templates. (Right) Responsive image wraps the columns for better display on smaller screens.

Additionally, responsive email allows you to present alternate content—hiding or revealing elements based on the user’s screen size. This ability will enable you to create a better mobile experience that is customized for the smaller screen and take advantage of the larger real estate offered on the desktop.

Responsive email allows you to deliver different content based on the size of the viewer’s screen. (Left) Image is shown only to users with screen sizes larger than 400 pixels wide. (Right) Image is shown only on screens 400 pixels and smaller. Mobile users who rotate their phones to the horizontal orientation will see the wider content.

Higher ROI

Open rates can be a deceptive metric when reviewing the effectiveness of your email campaign. Without also tracking clicks, there’s no guarantee a recipient actually read your email. And as has been mentioned already, your message might not have been readable on their device. 

If most of your audience can’t read your message, it stands to reason you’re lowering your ROI. Email may be inexpensive, but if your message is ignored by more than half of your readership, why even send the email in the first place?

By using HTML-based and responsive email, the chances of improving your click-thru rate increase 100 fold, which also means your ROI stands to grow as well. The frequency with which your readers click on multiple call-to-action buttons is a key indicator of interest in your products or services. Responsive email adds an extra layer to conversion by allowing you to present different content for different screen sizes. By investing in responsive email design, you have a better chance of increasing your ROI.

How to Create Responsive Email

Unlike the ready-made templates available through most email marketing services, responsive email requires a thorough understanding of HTML and CSS. Working with an experienced responsive email developer will ensure your email communications look good and function properly.

Responsive email templates can easily integrate with several email marketing services, including Mailchimp, Constant Contact, SendinBlue, SendGrid, and most services that allows the import of HTML templates.

If you are ready to elevate your email communications with responsive email, reach out to me.