Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wow, that Message Looks Great on My Phone ...How Did That Happen?!?


Published on

FROM THE 2014 BRONTO SUMMIT. Speaker: Jeff Bartlett, Marketing Coordinator for Rock/Creek

Synopsis: With more and more emails being opened on mobile devices, especially smartphones, having your email templates optimized for mobile display can mean the difference between customers clicking (and converting) or simply unsubscribing from your list. Unfortunately, with these views taking place across a tremendous number of possible application/device combinations, achieving this requires a good understanding of the available options -- and some nifty bits of code!

Have no fear: this session will help demystify the process. After the 2013 Bronto Summit, we at Rock/Creek knew it was time to make changes to ensure that our promotional, transactional and event-based emails were actionable and effective in a variety of mobile environments. Getting there involved some decision-making, a bit of compromise, some fancy new CSS and a lot of trial-and-error. Don’t know the difference between fluid and responsive email design, or what on earth a media-query is? You will soon.

This session will address Rock/Creek’s experiences as a case study, discuss best practices and limitations, and walk through some of the decisions we made while converting our existing email designs into a mobile-friendly engagement machine. In addition, you’ll see code examples outlining how to reflow, resize, hide or just plain replace elements in your emails that wouldn’t otherwise translate well onto smartphone screens.

Published in: Marketing, Technology
  • Be the first to comment

  • Be the first to like this

Wow, that Message Looks Great on My Phone ...How Did That Happen?!?

  1. 1. Wow, that message looks great on my phone… …How did that happen?!??
  2. 2. Introduction Who?
  3. 3. Who we are Rock/Creek is an independent outdoor specialty retailer with five brick-and-mortar stores in the Chattanooga, TN area. Our largest storefront is online.
  4. 4. Who I am I am Jeff Bartlett, marketing coordinator for Rock/Creek and part of a 3-person team. My primary duties include designing emails, managing paid search and overseeing our social media campaigns.
  5. 5. Part 1: The Problem Recognizing the need for mobile-friendly design
  6. 6. Rock/Creek email, 2013-04 (web client) Typical Rock/Creek email as of 2013 Bronto Summit, as viewed on a desktop or web client.
  7. 7. Rock/Creek email, 2013-04 (smartphone) Same email… on an iPhone 5. Problems: - ALL text too small to read. - Buttons far too small to click, even if your thumbs are tiny… especially footers. - Parts of primary image are now illegible. - Superfluous message elements push secondary calls-to-action off screen.
  8. 8. Rock/Creek email, 2013-08 (web client) Typical Rock/Creek email as of Summer 2013, as viewed on a desktop or web client.
  9. 9. Rock/Creek email, 2013-08 (smartphone) Again, same email on iPhone. Improvements: - Artwork swapped out entirely for mobile-friendly alternative. - Buttons optimized for fat- thumbed mashing. - Text now large enough to read with human eyeballs. - Extra stuff discarded in favor of primary call-to-action.
  10. 10. Detail of smartphone-optimized email
  11. 11. So… what changed? The important part: In our second example, from August, we’re not sending different emails to mobile and desktop clients. We’re sending the same email, but adding a few blocks of mobile-specific code that let us change the rules for most mobile email clients on most smartphones.
  12. 12. Part 2: A World of Possibilities The media query, your new best friend
  13. 13. What, exactly, is mobile-responsive? There is often confusion about exactly what we mean by mobile- responsive or mobile-adaptive email. Let’s define some terms. Scalable design: A static layout created with a “mobile aware” approach, featuring large text and simple designs that work reasonably well in most use cases. Fluid Email design: A layout that adjusts and re-flows fluidly based on the available screen size, using percentages to determine the size and arrangement of email elements. Responsive Email design: A layout which chooses from two (or more) design options based on the device’s screen size. The choice is made by a line of code called a media-query. What I’ll be explaining for you today is the latter.
  14. 14. Introducing: the Media Query The media-query sets aside a block of CSS for devices that fall below a specific display threshold, by declaring a “maximum device width” for the alternate CSS. It looks like this: <style type="text/css"> @media only screen and (max-device-width: 480px) { Mobile-specific CSS goes here } Regular CSS goes here </style>
  15. 15. What width? Defining break points for mobile A note about CSS resolution and pixel ratio: To use the iPhone 5 as an example, its 1136x640 screen actually uses 568x320 “virtual pixels.” Clients interpret this latter number when parsing a media-query; this is the “CSS resolution.” To find the CSS resolution, you need to divide the actual resolution by the CSS pixel ratio. A list of this data is here:
  16. 16. Defining break points for mobile (continued) The most commonly-used threshold is 480 pixels. At 480, your mobile-friendly layout will display on iPhones and the vast majority of Android & Windows smartphones, but your normal email will display on desktop/web clients and tablets. Common smartphone display sizes: iPhone 4/4s: 640x960 (360x480 CSS); iPhone 5/5s: 640x1136 (360x568 CSS) HTC One & One Max, Samsung Galaxy S4, S5 & Note 3, LG G2, Google Nexus 5, Nokia Lumia 1520 & 2520, Sony Xperia Z & Z1: 1080x1920 (360x640 CSS) Google Nexus 4, Nokia Lumia 920 & 925, Blackberry Z10: 768x1280 (384x640 CSS) Motorola Moto G, Moto X & Droid Razr HD, HTC One X, LG Optimus LTE, Blackberry Z30, Sony Xperia ZR, Samsung Galaxy S3: 720x1280 (360x640 CSS)
  17. 17. Defining break points for mobile (continued) In most (perhaps all) cases, rotating the phone into landscape orientation does not overrule this threshold, even though the length of many displays exceeds 480 pixels. The media-query is targeting the “width,” being the shorter of the two dimensions.
  18. 18. What about tablets? Our emails work fine on all common tablets, so we didn’t see a benefit to adding tablet-specific code. However, it is possible to “stack” media-query commands in order to serve 3 or more different versions of your email. Your mileage may vary.
  19. 19. Case study: Rock/Creek Having recently renovated our email template, we spent some time wire-framing how it should change for mobile. We settled on a 480px break point, as discussed, between our “regular” emails and the mobile-adaptive version. I wrote some code, then we tested it, and then I wrote more code. Speaking of which…
  20. 20. Part 3: Code & Examples Practical applications and how to get there
  21. 21. Example 1: Re-sizing email elements
  22. 22. Example 1: Re-sizing email elements In order to re-size a section of your email: Add code for the new size to your mobile CSS… td[id=resize] { width: 300px !important; } …and incorporate the corresponding ID within portions of your email you’d like to re-size for mobile clients. <td id="resize" width="610" bgcolor="#ffffff" style="padding: 5px; background:#fff; width: 610px;">
  23. 23. Example 2: Re-flowing email elements
  24. 24. Example 2: Re-flowing email elements In order to re-flow components of your email: You’ll use the same code for resizing… td[id=resize] { width: 300px !important; } …but build your code so that elements within that resized cell are now forced to stack vertically.
  25. 25. Example 2: Re-flowing elements (continued) A note about re-flow order: - Arrangement within this table cell, on desktop clients, is determined by simple align=“left”/”right” HTML. - Order of elements when re- flowed for email is determined by the order in which the code appears. For example, this email…
  26. 26. Example 2: Re-flowing elements (continued) …can feature either element first on mobile, based on which piece appears first in the container <td>.
  27. 27. Example 3: Hiding email elements
  28. 28. Example 3: Hiding email elements In order to hide a section of your email: Add this code to your mobile CSS… td[id=hide], table[id=hide] { display: none !important; } …and incorporate the corresponding ID within portions of your email you’d like to hide for mobile clients. <td id="hide" width="610" bgcolor="#ffffff" style="padding: 0px 5px; background:#fff; width: 610px;">
  29. 29. Example 4: Replacing images
  30. 30. Example 4: Replacing images In order to replace an image in your email: Use the same approach to hide your original image that you’ve used to hide email elements entirely… td[id=swap4mobile] img { display: none !important; } …and replace it with a background image. td[id=swap4mobile] { background-image: url(yourimage.jpg) !important; }
  31. 31. Example 4: Replacing images (continued) If you need your new image to be a clickable link on mobile clients, there’s one more step. Add a “placeholder” <div> inside your link… <a href=“”><img src=“yourimage.jpg" /><div id="placeholder"></div></a> …and replace THAT with the background image, too. td[id=swap4mobile] { background-image: url(yourimage.jpg) !important; } The <div> creates a clickable element atop your background image. Make sure you define a height and width.
  32. 32. Be creative! In addition, we’re currently using the media-query to: - Enlarge buttons so they are easier to click on mobile. - Add or remove padding for elements that need it once they’ve been re-flowed - Selectively hide footer elements while selectively retaining & resizing others. The possibilities are endless.
  33. 33. Part 4: Limitations com· pro· mise, verb – to accept standards that are lower than is desirable.
  34. 34. Initial view varies widely. Even on the same device and screen size, the initial view changes depending on OS version and email client being used. Choose wisely when arranging elements that you need to appear “above the fold” on mobile devices!
  35. 35. Media-query support is not universal. Not all email apps support media-query code. - Android Mail v2.2 and earlier will render the desktop version and make the user scroll around the message. - The Gmail app will render the desktop version and scale to fit the device screen. - Mailbox ignores media-query CSS and features several whimsical bugs. - Blackberry devices are, not surprisingly, a lost cause.
  36. 36. Effective mobile email makes attribution trickier. The good news: more mobile opens and clicks will likely lead to more conversions. The bad news, unless you have an awesome mobile site: many of these conversions are of the “second screen” variety, where a user opens your email on a mobile device but makes their actual purchase from another machine. Some converters may never actually click a link in your email message.
  37. 37. The list of use cases is nearly infinite. Common mobile email apps: - Android Mail (native to Android devices) - Apple Mail (Native to Apple devices) - Gmail - Yahoo! Mail - Windows Live Hotmail - Mailbox, MyMail, Mail+, AOL Mail, K-9 Mail, Blue Mail, Boxer, Better Webmail,,, Cloud Magic, Aqua Mail, Molto… Common devices: - Apple iOS 6 & 7 on iPhone 4, 4S, 5 & 5S …plus iPod & iPad. - Android 4.x on a long, long list of devices made by HTC, Samsung, Google, LG, Motorola, Sony & others. - Windows Phone 7.x & 8.x on another long-ish list of devices made by most of the same manufacturers.
  38. 38. Conclusions Yes, you need to do this. No, it’s not a magic bullet.
  39. 39. You already know this… Mobile opens continue to rise – as of December 2013, mobile accounted for more than 50% of all email opens -- and users increasingly expect emails to not only function, but look good on their device of choice. Repeat, the majority of all emails are being opened on mobile devices, primarily smartphones. What does that mean? Designing emails for mobile is not the future… it’s the present. “There’s been a lot of talk about responsive email design the past few years, and a number of people have raised objections, saying that responsive techniques (1) Don’t work everywhere (2) Are hard to learn, (3) Take more time to code, and (4) Take longer to test. Some of these are valid objections, but they shouldn’t stop you from using responsive techniques.” -- Jason Rodriguez/Litmus, Mobile Email is Here to Stay. What Comes Next?
  40. 40. Q&A Assuming I stopped talking in time. Feel free to heckle if you have not already done so.