RESPONSIVE EMAIL DESIGN & DEVELOPMENT THE WHAT, WHY & HOW December 2014 SUSANNA OLIVER Web Developer Denver Fargo Minneapolis 701.235.5525 888.9.sundog FAX: 701.235.8941 www.sundoginteractive.com
Overview Mobile devices permeate every aspect of our lives. They are our telephones, our connection to friends, our fitness coaches, our on-the-go entertainment system, and in some ways, even our health experts. They are in airports, in waiting rooms, in the workplace, and in our homes. And everywhere, people are checking their email. So why not deliver emails meant for people on the go? Why not deliver content that engages them in their unique situations? Mobile devices account for over 50% of email traffic 1, no surprise given that users refer to their smartphones 150 times a day on average. This is a marketer s paradise, rich with opportunity. Forget the billboards. Forget impersonal blanket advertising that everyone ignores anyway. It s the age where we can forge unique user experiences designed to meet the needs of the customer with relevant, useful information and display it in a way that makes it easy for them to use regardless of whether they access it on their smartphone, tablet, or desktop. Email delivers content directly into a potential customer s pocket, so make the most of this opportunity by optimizing your emails for mobile. Technical Level To get the most out of this white paper, you should be familiar with standard email development practices. If you don t have prior email development experience, start by reading the white paper, Developing High-Performance HTML Emails, available on the Sundog website: http://www.sundoginteractive.com/our_knowledge/ whitepaper/developing-high-performance-html-emails Why Go Responsive? Responsive email design has a proven track record of improving customer engagement. When responsive email design was just starting to catch on in 2012, Deckers, a shoe manufacturer, decided to try it out to see if it would improve the experience of their 35%-65% mobile user base. As Litmus reports, their mobile opens increased by 9% and their click-throughs rose 10%. 2 More recently as mobile usage continues to rise, A/B tests have shown that responsive email designs continue to outperform non-responsive emails with up to 130% higher click-through rates than non-responsive emails. 3 By making it easier for mobile users to access the content, users are following through in greater numbers than ever before. Responsive Email Design: Talking Points Sometimes, in talking to a client, you just need to present the big picture without getting bogged down in the details. Here are some things you can cover to show how responsive email design can benefit them and their customers. 1. THE BOTTOM LINE in responsive email design is to cultivate customer engagement by making emails easier to consume. Responsive email design is specially crafted to give the recipient the best possible experience no matter how they access their email. If they open it on their mobile device, the content is legible, clean, and large enough to read easily. In short, the content is easier to use, so it s more likely to be used. Most people, especially in the marketing and technology world, are familiar with how responsive web design works so it s not a foreign concept and may need very little explanation. 2. SHOW EXAMPLES of responsive email design to illustrate the advantages over non-responsive design. Most people respond more enthusiastically when visual illustrations are combined with theoretical concepts. Seeing is believing. 3. TELL REAL-LIFE STORIES that prove the effectiveness of responsive email design in stimulating customers mobile engagement such as the example of Deckers. The proof is in the pudding and responsive email design is a tried and true method that gets results. 4. BUDGETS are also an important consideration. Because the responsive version has to be developed and tested in addition to the initial desktop version, responsive emails take longer to build and cost more. The key here is to recognize the potential return on investment. Increased 1 https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33 2 https://litmus.com/blog/responsive-email-testing-yields-higher-click-rate-deckers 3 https://litmus.com/blog/responsive-design-ab-testing-leads-to-a-130-increase-in-clicks 2
customer engagement more than compensates for the additional expense if a large portion of the recipients regularly open emails on a mobile device. From my experience, responsive emails take approximately 25% more time than a non-responsive one (depending on design complexity and the extent of the changes) so budgets are a consideration. 5. THE AUDIENCE and their email habits vary from business to business, so having a thorough knowledge of how your users are currently reading emails is important before going down the responsive path. If only 10% are opening the emails on mobile, then maybe responsive email design may not be right for this particular business at this time. The return on investment would be inadequate to compensate for the additional cost of development. Types of Mobile-Friendly Emails When it comes to creating a usable experience on mobile, every email needs a different approach. Some emails are simple text announcements while others are complex product catalogs with multiple columns. These call for different development approaches, a few of which are explained here. Scalable emails: A narrow email of 500 pixels or less, making it suitable for either desktop or phone with no adjustment. The narrow width limits the design to a single column, but all other design elements are free for the taking. Scalable or skinny emails are best with a simple design, touch-friendly buttons, and limited body text that s styled a bit on the large side. While not technically responsive because nothing changes between mobile and desktop views, it achieves its purpose by being equally friendly on both platforms. Fluid emails: An email with its width set to 100 percent to fill the screen regardless of the device. Best suited for simple layouts or text-dominant emails with optional tweaks to mobile display through a media query. While great for free-flowing designs, this method offers little control over how elements wrap and can prove unwieldy and inconsistent when viewed on larger devices. Adaptive emails: A fixed-width email (e.g. 600 pixels wide) for desktop with a fixed-width mobile breakpoint (e.g. 320 pixels wide) for mobile. This method is similar to fluid emails, but offers more control over precise designs than does fluid email development because of its defined pixel widths. Responsive emails: This is what we will be covering in the rest of this white paper. A responsive email does more than tweak the layout or make the buttons larger. Unlike the other methods of adaptive development, responsive emails use media queries to fluidly fit email content to each device, adding flexibility and increasing user experience. Key Concepts Responsive email design is the art and science of balancing the old desktop standards against the powerful capacity of today s mobile email applications. A responsive email empowered by mobile still has to be compatible with older desktop clients, but fortunately we don t have to sacrifice the abilities of mobile in the name of compatibility. Responsive email design starts with a base desktop version. Standard email development practices apply at this stage including inline styles and tables (if this is unfamiliar to you, be sure to study up on the white paper mentioned previously). Responsive functionality is part of this framework by adding classes to the elements that will change on mobile. Through the use of a CSS style block and media query in the head of the email, we can manipulate the design for mobile. Unlike responsive web design which allows us to start with mobile, email responsive design must always start with a desktop version as a base since it uses inline styles that we must explicitly override on mobile. The reason we can t start with the mobile design and then override with desktop media queries is because several of the most popular desktop and web-based email clients, Outlook, Gmail, and Yahoo! Mail, don t support media queries. In contrast, modern mobile clients have good support for media queries. In short, inline styles control the desktop layer and classes dictate the mobile display through a media query. While all this sounds fine and dandy, those familiar with the priority rules of CSS will see an immediate problem: inline styles are innately more powerful than general style blocks, rendering the mobile styles ineffective. Inline styles win every conflict. 3
Fortunately, this is not the death knell for responsive email design; CSS is smarter than that and provides an additional level of monarchy to trump even an inline style: the all-powerful!important rule. As much as we try to avoid this rule in web development, there s no way around it in email development, nor is there any reason to avoid it since emails are a one-off page and not an entire website where!important could cause disastrous cascade issues. Another challenge facing responsive email design stems from tables. As every email developer knows, email standards are stuck somewhere in the 1990 s with clients like Outlook (and yes - even some of the recent versions) that have limited CSS support for layout properties like float, margin, and padding. With limitations like these, the only way to achieve complex, cross-client layouts is through tables. However, it comes at a price because table cells are innately limited in their ability to collapse, realign, and shuffle in the way we have come to expect in responsive layouts. Despite these limitations, with a few tricks a two-column table desktop layout can be realigned into a seamless, single-column flow for mobile. Concept Tutorial For this tutorial, we ll be using a two-column, responsive email as an example. While this is not an exhaustive explanation, it will provide a foundation from which you can expand your knowledge with experience. Our goal is to turn the non-responsive, two-column email on the left (Figure 1) into a fully responsive, single-column email as shown on the right (Figure 2). As discussed above, desktop styles should be developed before you start adding responsive styles to ensure they are properly overridden. See Key Concepts on page 3 if this needs more explanation. The Media Query The breakpoint you choose depends on the width of your email and your target devices. For this email, a 600 pixel max-width will target most phones while leaving tablets to use the desktop version. Additional media queries may also be included to target other devices such as tablets. /*styles here*/ CSS Idiosyncrasies CSS for responsive email has two idiosyncrasies: 1.!important and attribute selectors. The!important rule is our best friend because responsive styles have to override the inline desktop styles. Figure 1 2. Use the attribute selector method (i.e. table[class= container ]) within media queries. Due to a bug in Yahoo! Mail which causes the email client to ignore media query requirements, attribute selectors are necessary to ensure that this client displays the desktop version as intended. Figure 2 4
Display resets Before we start adding mobile classes, it s a good idea to address common email client display issues through a CSS reset. Here are a couple pertaining to mobile: Remove blue link color on ios.applelinks a { color: #222; text-decoration: none; Remove body margin & padding body { margin:0; padding:0; font-size: 100%!important; Setting the margin and padding to zero on the body removes any unintended spacing around the edges of the email. Framing valuable mobile real estate in an ugly white margin would be a shame. Removing the margin is as simple as doing it for a webpage. Assigning classes Next, assign a class to each element that will need to change on mobile. To start with, create a class that changes the pixel-based widths of tables to 100%. In the example below, the desktop version has an outer table width of 600 pixels and the media query CSS trumps that to 100% for mobile. HTML: <table cellpadding= 0 cellspacing= 0 width= 600 border= 0 align= center bgcolor= #eeeeee class= r_containertable > CSS: table[class= r_containertable ] { width: 100%!important; NOTE: I ve used the prefix r_ to differentiate the responsive design classes from other classes that may be required by email management systems. Note that the!important rule comes into play here as discussed above to override the more powerful inline width attribute. Without the!important rule, the mobile CSS would be powerless. Additional considerations for mobile styles Increase text size Use large, touch-friendly buttons Swap out links that reference click or click here Two-Column to Single-Column Now it s time to realign the columns for mobile. The two-column, side-by-side articles are built from adjacent td tags as follows: HTML: <tr> <td class= r_columncell >column 1</td> <td class= r_columncell >column 2</td> </tr> CSS: td[class= r_columncell ] { display: block!important; width: 100%!important; The two td tags have a single class called r_columncell to which the CSS is imparting block-level status, forcing the second column to wrap beneath the first. While other methods are available to wrap articles into a single column, this is considered the most reliable, cross-client method. Hiding Images on Mobile Sometimes mobile devices call for a different image than what was used on the desktop display. Without the use 5
of Javascript to swap out images, we have to place both the desktop and mobile versions of the image in the HTML and hide one of them with CSS based on the platform. HTML: <img src= clouds_desktop.jpg height= 75 width= 75 style= display:block class= desktopimg /> <img src= clouds_mobile.jpg height= 1 width= 1 style= display:none class= mobileimg /> CSS: img[class= mobileimg ] { display: block!important; width: 100%!important; height: auto!important; img[class= desktopimg ] { display: none!important; By setting the display to none and the width and height to 1 pixel within the HTML, the mobile image will effectively be hidden from all desktop clients, including Gmail and several versions of Outlook which do not support display. In the CSS, the display property swaps out the two images on mobile devices and resizes the mobile image from one pixel to the proper size. ignored in Gmail s app. The device itself has little to do with whether the email displays correctly; rather, it is the application in which the email is opened that determines compatibility. For example, a user could have two different experiences on their iphone depending on whether they opened the email in their Gmail app or the default mail app. As of the time of this writing, Gmail does not support CSS style blocks and thus, the user would see the desktop version of the email. Apple s mail app, on the other hand, responds beautifully to responsive email design so in this case, the recipient would see exactly what you want them to see on a mobile device. Responsive email design compatibility is dependent on an email app having two factors: media queries and style blocks. Media queries is a no-brainer because it s the core of responsive design, but surprisingly enough, some clients like Gmail strip out CSS style blocks which is why responsive designs won t render in Gmail. Fortunately for developers, it doesn t do anything more dangerous than to simply display the desktop version. The main culprits of unsupported media queries or style blocks are: 4 Gmail app Android s Yahoo! Mail app Windows phone 7 & 8 apps Summary Now it s your turn. Take this new knowledge and show your customers you care about them by delivering email content that matters to them, displayed in a way that s easy for them to engage with, and showcases your company in a polished, customer-oriented way. Believe me, they ll thank you. Where It Works and Where It Doesn t It s important to understand where responsive design works and where it doesn t work so you don t drive yourself crazy wondering why your responsive email design works fine in Apple s default mail app but gets 4 https://litmus.com/blog/mobile-email-compatibility-guide-what-works-where 4 https://litmus.com/help/email-clients/media-query-support 6