What is responsive email design?

Responsive design became a must-have of email marketing when mobile devices started to account for larger and larger portions of viewership. Responsive design is a form of email marketing design that helps you achieve better results on mobile devices.

It’s important to know what it is, the importance of using it in modern email marketing, and how to execute it with your email marketing campaigns.

Defining Responsive Design

In a nutshell, responsive design adapts the content being sent to whatever device or screen is being used to view it. A responsive design, in theory, looks as good on a wall-sized super-HDTV as it does on your iPhone. And it offers similar functionality.

Responsive design in itself isn’t revolutionary. In fact, if you’ve coded any HTML in the past 20 years, you’ve been designing responsively. Coding a table, and specifying its width should be 100% rather than a fixed number of pixels is essentially responsive design.

It’s the most basic form of responsive design: Show something at 100% of whatever you’re viewing it on.

How Responsive Design Works

What makes responsive design different today is you have a lot more control over how things scale up or down, as well as many more screen sizes and shapes. This can be accomplished through style sheets built to scale up or down, or even switch out based on what kind of device is being used.

Here’s an example of a CSS3 stylesheet that adapts based on what kind of screen it’s being viewed on:

// Desktop computer or bigger screen
@media only screen
and (min-device-width: 640px)

{
// put styles here
}

// Mobile Landscape
@media only screen
and (min-width: 481px)

{
// put styles here
}

// Mobile portrait

@media only screen
and (max-width: 321px)

{
// put styles here
}

In this example, you’d have three different sets of styles that displayed your email or web page three different ways. It just depends on whether you were looking at the content on a bigger screen or a mobile device, and in the orientation the mobile screen was held.

Getting Started with Responsive Design

The simplest and fastest way to start thinking in terms of responsive design in your email marketing is this: Convert everything you do into percentages. Review the email templates you’re using currently, and determine how many references there are in the code to specific widths, heights, and pixels.

With the help of a graphic designer or graphic design software, work to eliminate all of those absolute numbers by converting them into relative percentages.

Let’s say you’re looking at a table that’s 500 pixels wide. If you view this blog post on a mobile device with a screen smaller than that, the edge of the table in question will go off the screen. However, if you view this blog post on a desktop computer with a screen wider than 640 pixels, the table in question will seem narrow compared to the rest of this blog post.

With responsive design, the table is coded to 100% wide. So no matter how large or small the screen on which you view this blog post, the table will always be 100% of the available space.

Responsive Design is Essential to Modern Email Marketing

Thinking and designing in terms of percentages is the place to start in order to get your email marketing templates to be mobile-friendly. And in today’s mobile-first world, an email marketer who doesn’t incorporate responsive design into every aspect of his or her message design will be at a competitive disadvantage.

If you’re a WhatCounts client, our layout editor only creates responsive email marketing messages. If you’re not a WhatCounts client and aren’t sure whether your emails are coded with responsive design, our agency team can review them and make those changes if necessary. Just reach out today to get started!

More to explore…

Introducing Coupon Manager

The WhatCounts team has been hard at work on a new feature, Coupon Manager, which streamlines using coupons in campaigns. Instead of using a generic

Read More »

Ready to See WhatCounts in Action?

Take your first step towards supercharged engagement!

This website stores cookies on your computer. These cookies are used to improve your website experience and provide more personalized services to you, both on this website and through other media. To find out more about the cookies we use, see our Privacy Policy. We won't track your information when you visit our site. But in order to comply with your preferences, we'll have to use just one tiny cookie so that you're not asked to make this choice again.