ODP, PDF1,485 views

10 Steps to Responsive Email Success

The stats are in and responsive design knowledge is proving to be a valuable addition to the email designer's toolbox. In this presentation we look at the most important steps to successful responsive email design. Here are the real secrets to making responsive designs work in email. Read notes for details.

Marketing◦Technology◦Business◦

10 Steps to Responsive Email Success

1.
10 Steps to Responsive EmailSuccess
2.
What is ResponsiveEmail?   Scalable Design  Shrinks to fit  Positioning is unchanging Responsive Design  Adjusts to fit  Positioning is changeable  Sizes are changeable
3.
Things to ConsiderBefore Starting:  It requires more work.  It requires more testing.  It won’t always work.  You need a fall back design.  Your time might be better spent elsewhere.
4.
Step #1: Planahead Will this look good when responsive design doesn’t 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.
5.
Step #2: Thinkscalable first  500 – 650 pixels wide  13px or .8em  Percentage widths
6.
Step #3: UseTables     Tables not Divs ✔ Tables always work. ✔ Divs work sometimes. HTML5 ✔ Will not always work. External Style Sheets ✔ Will not work. JavaScript ✔ Do not use.
7.
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
8.
Step #5: Indicateas a class in the email <td width="200" align="center" style="padding: 0;" class="HideOnPhone"> <img src="insert image location here; alt="description" height="250" width="200" border="0" style="display: block; font-family: Arial; color: #FFFFFF; font-size: 18px;"> </td>
9.
Step #6: AddMedia Queries to Email <style type="text/css">  </style> <-- email contents below the style tags -->
10.
Step #7: Thingsto watch out for In the style section: <style type="text/css"> .ReadMsgBody {width: 100%;} .ExternalClass {width: 100%;} body { margin: 0; padding: 0; } table {border-collapse: collapse;} .appleBody a {color:#000000; text-decoration: none;} .appleFooter a {color:#FFFFFF; text-decoration: none;} .appleEvents a {color: #030303; font-weight:bold; text-decoration: none;} .AppleBody a {color: #030303; text-decoration: none;}  </style>
11.
Step #7: Thingsto watch out for In the inline styles: <table class="container" width="215" align="left" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0;mso-table-rspace:0;"> <tr> <td align="center" valign="top" width="215" style="padding-left: 5px; padding-right: 5px;"> <img class="visual" src="image URL goes here" alt="alt tag goes here"> </td> </tr> </table>
12.
Step #8: Test,fix, repeat Create email and send test files. Do they look alright? No Find the problems, Fix and retest. Yes SEND!
13.
Step #9: TheMicrosoft Dilemma
14.
Step #10: Sendit!
15.
Resources Goolara Blog http://blog.goolara.com/2013/09/18/responsive-design-part-1/ The firstin our four-part series of blog posts on responsive email design . Responsive Email Guide http://goolara.com/Resources/WhitePapers.aspx#Responsive-Email-Design Goolara’s definitive guide to responsive email design.
16.
About Goolara Goolara, LLCis the maker of Symphonie—powerful email marketing software with the advanced features a professional marketer needs, but without the hassle of other systems. For a demonstration, call 1-888-362-4575 toll free, or visit http://goolara.com/RequestDemo.aspx and request a demo.

Editor's Notes

#2 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 Goolara’s 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. I’ll have a link to both the blog posts and the guide at the end of this lecture, as well as some other useful links.
#3 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.
#4 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 won’t 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.
#5 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 don’t 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.
#6 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. You’ll 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.
#7 There is a saying in email marketing that you need to write your HTML “like it’s 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 clients—and I’m including the big ones, such as Outlook and Gmail—cannot 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.
#8 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 screen’s width. So in the first piece of HTML, we see a media query that is set up for a screen’s 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 class—or the selector—is named, followed in curly braces by as many properties and values as you want. In the second example, we’ve created a class with the name “HideOnPhone,” and it is assigned to a table cell. The property is “display,” meaning that whatever value we’ve 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.
#9 In the HTML for the body of the email, we’ve assigned this cell with the “HideOnPhone” class we created on the previous slide. Below it are examples of how the email appears on different screen widths. On the left is a standard desktop monitor with a pixel width of 1680. On the monitor, the email appears with the images and the text in the positions assigned to them in the body of the email. On the iPhone, which has a pixel width of 320, the images disappear. You’ll notice also that the buttons below the text appear much larger on the iPhone. These buttons are also tables and have been given a specific width of 200 pixels in the media queries.
#10 To make things easier, it is always a good idea to enter all the style selectors as inline information. If, for some reason, you are working with a separate CSS file, there are two things you’ll need to do to before you can finish up your design. First, you’ll need to insert all the formatting styles inline. There are online tools that will do this for you. A good one is available at http://inlinestyler.torchboxapps.com/. But none of the online style converters will handle your media queries. Since there is no way to insert media queries inline, these tools simply throw them away. You’ll need to add the media queries by hand between style tags above the actual email contents.
#11 There are few hidden pitfalls in creating responsive email. Most of these are related to Outlook, which we discuss further in a little bit. The first is a list of selectors that you’ll need to paste above the media queries in between the style tags. The ones shown in blue are there to help adjust the sizing in certain email clients. The ones in red, as you can probably tell, are there to override some of the automatic color and underlining assignments in Apple Mail and on the iPhone. Note that the color assignments shown are for our newsletter. You will want to use your own color values.
#12 The other sneaky pitfall has to do with the way Outlook handles positioning. If you look at the inline styles, you’ll notice that all the cell characteristics are set to zero. Unfortunately, some versions of Outlook choose to ignore this information and will add unwanted space around the tables, which can completely throw off your design. By adding the styles “mso-table-lspace:0;” and “mso-table-rspace:0;” to each of your tables, you’ll avoid some unwelcome surprises when it comes time to preview your work.
#13 Once you have an email you are happy with, it’s time to test it, and this is where things start to get tricky. No matter how perfect your email looks in the various browsers and in your own email account, it’s a safe bet that there is at least one email client out there that will mangle your beautiful email design. The easiest way to test this is with an email rendering service such as Litmus or Email on Acid. But even if you do use one of these services to test the email we strongly recommend that you also send the email to as many actual accounts as are available to you for testing. We have encountered occasions where the results we got with a rendering service did not match the results in the actual email client. The hardest part of this process is figuring out exactly what is wrong, but the additions we listed in step #7 should help you avoid the most common problems.
#14 As I mentioned earlier, the email client platform that will give you the most trouble is Microsoft Outlook. Here is a chart of the initial design we created for our newsletter. You can see that it worked fine until Outlook 2007, and then suddenly the the tables were thrown out of alignment. This isn’t really a big surprise. 2007 is when Microsoft switched to using Word’s settings for its email display. What’s more baffling is the fact that in 2011 the design suddenly lined up again, but were thrown out of alignment once more with the 2013 version. It would be nice to able to ignore this problem, but too many people use Outlook to overlook it. On the plus side, if you get your design to work in Outlook, it usually will work everywhere else after that. In this particular case, the addition of the previously discussed mso-table-space settings solved the problem.
#15 Once you’re sure that your design is bulletproof, go ahead and hit send.If, for some reason, you discover a problem after hitting send, remember that with Goolara Symphonie you have the option of pausing and fixing an email, or correcting broken links after an email is sent.
#16 To learn more about responsive email design, you can visit our blog, where we presented a four-part series on responsive email design that covers most of the basics and gives you a first-hand account of the difficulties and rewards of creating responsive email. We have also created a guide to the subject that covers many aspects of responsive design that we don’t have the time or the space to discuss here. Things like image replacement and the use of web fonts in email. To find out more about our email marketing software, visit our website at goolara.com, or you can email us at info@goolara.com, or call our toll-free number: 1-888-362-4575. Thank you for joining me today!
#17 At Goolara, we work hard to make sure our email marketing solution, Symphonie, has all the features that a professional marketer needs to create actionable emails. Features such as dynamic content and transactional emails are included in every version of Symphonie. Symphonie is available in both on-premise and cloud-based versions. Visit our website at http://goolara.com to learn more and thank you for visiting this presentation.

10 Steps to Responsive Email Success

More Related Content

Recently uploaded

Featured

10 Steps to Responsive Email Success

Editor's Notes