What is responsive email design?

Responsive email design is important.

One of the hottest trending terms in email marketing is responsive design, a form of design of your email marketing that will help you achieve better results on mobile devices. Let’s examine today what it is and the basics of it.

What is responsive design?

In a nutshell, it’s design that adapts itself to whatever 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 offers similar functionality.

Responsive design in itself isn’t anything new. If you’ve done any HTML in the past 15 years, you’ve made a table, and you’ve at some point specified that the table’s width should be 100% rather than a fixed number of pixels. That’s the most basic form of responsive design: show something at 100% of whatever you’re viewing it on.

How does responsive design work?

What makes responsive design different today from eras past is that we have a lot more control over how things scale themselves up or down, as well as many more screen sizes and shapes. This is accomplished through style sheets that are designed 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 3 different sets of styles that displayed your email or web page 3 different ways, depending on whether you were looking at the content on a bigger screen or a mobile, and in which orientation the mobile was in.

How to get 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. Take a look at every email template you’ve got right now, and see how many references there are in it to specific widths, heights, and pixels. With the help of a graphic designer or good graphic design software, work to eliminate all of those absolute numbers by converting them into relative percentages.

Here’s an example.

This table is 500 pixels wide. If you view this blog post on a mobile device with a screen smaller than that, the edge of this table will go off the screen. If you view this on a desktop computer that has a screen wider than 640 pixels, this table will seem narrow compared to the rest of this blog post.

Example of responsive:

This table is 100% wide. No matter how big or small you view this blog post, the table will always be 100% of the available space (subject to how you view the WhatCounts web site, of course).

Obviously, doing some really fancy things like change entire layouts is beyond the scope of this article, but thinking and designing in terms of percentages is the place to start in order to get your email marketing templates to be mobile-friendly.

I hope this article gives you the necessary starting points you need in order to get started with responsive design in your email marketing. As always, for WhatCounts customers, talk to your account managers today about converting your existing templates to responsive designs and we’ll help you get things rolling with our creative services teams. If you’re not a WhatCounts customer, contact us now and we’ll be happy to help you be more responsive in your email marketing.

Christopher S. Penn
Director of Inbound Marketing, WhatCounts

Download our latest eBook

Your email list is your most valuable asset. Learn 57 tips for building it today!

Download
Share on LinkedIn29Tweet about this on Twitter20Share on Facebook1Share on Google+3

2 Comments

  1. I have tried to do a mobile responsive email template but I cannot get it to work across all (or even most) browsers and email clients. Could you possibly post a responsive template that includes a table and and image as an example?

    Reply
    • Hey Wally, are you using the WhatCounts platform to develop your email template or just trying from a strictly HTML approach?

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>