10 Steps toResponsiveEmail Success

Welcome to 10 Steps to Responsive Email Success, a presentation brought to you by Goolara, LLC, the makers of Goolara Symphonie, one of the most powerful yet easy to use email marketing platforms you can buy. My name is Jim Morton, and I work for Goolaras marketing department. Part of my job includes setting up the newsletters for mailing. There has been a lot of talk lately about responsive design, so I decided to set up our newsletter to be responsive and, at the same time, put together several blog posts on the process. This slide presentation is a follow-up to those posts and out recent guide to responsive design. Ill have a link to both the blog posts and the guide at the end of this lecture, as well as some other useful links.

What is Responsive Email?

Scalable DesignShrinks to fit

Positioning is unchanging

Responsive DesignAdjusts to fit

Positioning is changeable

Sizes are changeable

But before we get too deep into the subject, I should define what I mean by responsive design.

There are two basic approaches to email design: scalable and responsive. With scalable design, your email looks the same on an iPhone as it does on a 27 desktop monitor. This means if your design is four columns across, it will be four columns across on the phone as well. If an image is to the right of the text, it will remain to the right of the text no matter where the email is viewed. And as the display screen size reduces, so do do the sizes of the text and the images.

With responsive design. All the elements are capable of readjusting their sizes and positions based on the viewing platform. An email may be four columns across on a desktop monitor and one column wide on a phone. An image to the right of the text can move above the text, or disappear entirely depending on what you tell it to do. This eliminates the problem of text that is too small to read on a phone and gives your email a better chance of being opened.

Things to Consider Before Starting:

It requires more work.

It requires more testing.

It wont always work.

You need a fall back design.

Your time might be better spent elsewhere.

But before you get too excited about responsive design, there are some important things to take into account. The truth of the matter is that responsive design is not for everybody. If you decide to try and use a responsive design, keep in mind that it will mean more work for your designers. In some cases, it will require you to completely start from scratch on your templates.

It also means more testing. You may think you have your design nailed down, only to discover that it wont display properly in certain versions of Microsoft Outlook. It is also important to remember that not all mail clients will work with responsive design, so how an email scales is still an important consideration when developing a responsive design. And, in reality, the time and money you spend developing a responsive email design might be better spent elsewhere in some cases. Are you pursuing responsive design at the expensive of other tools, such as segmentation and dynamic content? This could be a mistake.

But with all this in mind, we present here ten steps that will help smooth your path to good responsive email.

Step #1: Plan ahead

Will this look good when responsive design doesnt work?

Set a maximum width.

Set a minimum font size.

When do I want the media queries to take over?

Phones only or tablets?

How should each element change?

Element order

Relationship to other elements.

Step #1 is fairly obvious. Just like designing a website, creating a responsive email requires that someone sits down ahead of time and decides what they want the email to do under different circumstances. Do you want the email to change its appearance on both phones and tablets, or just phones? It is also important to take into consideration how the email will look on devices and in email clients that dont recognize responsive design.

Another important thing to consider is the order of the elements and their relationship to each other. For instance, you may have an image to the right a block of text, but you want the image to appear above the text when it is viewed on a phone. In that case, the image information must be inserted into the HTML before the text block.

Step #2: Think scalable first

500 650 pixels wide

13px or .8em

Percentage widths

While it is theoretically possible to create an email six columns across that turns into one column responsively, resist the temptation to do so. You always want to design with the unresponsive email clients in mind. This means setting a maximum width between 500 and 650 pixels. Anything larger becomes too hard to read on a phone and anything smaller looks like a kindergarten book on a desktop monitor.

Youll also want to use at least a 13 pixel font (.8 em). This affords the best cross-platform readability in most situations.

Also, using percentages to assign widths instead of specific pixel widths can help the design respond to each viewing device better, although, in some cases, percentage widths can lead to display problems in Microsoft Live Mail.

Step #3: Use Tables

Tables not Divs

Tables always work.

Divs work sometimes.

HTML5

Will not always work.

External Style Sheets

Will not work.

JavaScript

Do not use.

There is a saying in email marketing that you need to write your HTML like its 1999. One of the hardest things for web designers to get used to, and frankly one of the reasons that email design is often considered difficult by web designers is the inescapable fact that tables work better than divs in most cases. Outlook.com, for instance, ignores float and margin commands. During the past fifteen years web design has seen some major leaps forward in capabilities. Things like JavaScript, HTML5, and CSS3 have made web design more versatile than ever, but unfortunately, many of these advances are not available to the email designer because many email clientsand Im including the big ones, such as Outlook and Gmailcannot use a lot of these features. Gmail, for instance, ignores most HTML5, while Outlook sometimes seems like its playing Russian roulette with its HTML interpretation.

To complicate matters, email clients cannot use external style sheets or JavaScript. Any styles have to be inserted inline in order to work. Many also do not work well with divs, so in spite of what you may have been told in web design class, go ahead and use tables instead of divs.

Step #4: Set @media query

@media screen and (max-width: 725px) {classname{property: value;}}

@media screen and (max-width: 525px) {td.HideOnPhone{display: none !important;}}

Format

Example

At the heart of responsive design is the media query which begins with the code @media. This is chunk of CSS code that tells the email what to do when it encounters specific media types. For our purposes, the only one we really need to worry is the screen media type, and the only property we need to worry about is the screens width.

So in the first piece of HTML, we see a media query that is set up for a screens maximum width of 725 pixels, meaning any display with that pixel width or less will use the information in the query.

Underneath it is displayed the basic syntax used in media queries. The classor the selectoris named, followed in curly braces by as many properties and values as you want.

In the second example, weve created a class with the name HideOnPhone, and it is assigned to a table cell. The property is display, meaning that whatever value weve assigned will affect how the element assigned that cell will display. In this case, the value is none, meaning the cell will disappear when the screen size falls below 525 pixels. The !important at the end of the line indicates that this property should override any existing property.

Step #5: Indicate as a class in the email