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

41

description

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.

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

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

Wow, that message looks great on my phone……How did that happen?!??

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

IntroductionWho?

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

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.

http://www.rockcreek.com

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

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.

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

Part 1: The ProblemRecognizing the need for mobile-friendly design

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

Rock/Creek email, 2013-04 (web client)

Typical Rock/Creek email as of 2013 Bronto Summit, as viewed on a desktop or web client.

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

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.

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

Rock/Creek email, 2013-08 (web client)

Typical Rock/Creek email as of Summer 2013, as viewed on a desktop or web client.

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

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.

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

Detail of smartphone-optimized email

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

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.

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

Part 2: A World of PossibilitiesThe media query, your new best friend

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

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.

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

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>

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

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:

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

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

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)

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

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.

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

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.

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

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…

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

Part 3: Code & ExamplesPractical applications and how to get there

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

Example 1: Re-sizing email elements

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

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;">

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

Example 2: Re-flowing email elements

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

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.

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

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…

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

Example 2: Re-flowing elements (continued)

…can feature either element first on mobile, based on which piece appears first in the container <td>.

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

Example 3: Hiding email elements

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

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;">

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

Example 4: Replacing images

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

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; }

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

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=“yoursite.com”><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.

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

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.

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

Part 4: Limitationscom· pro· mise, verb – to accept standards that are lower than is desirable.

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

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!

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

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.

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

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.

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

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, Mail.com, Mail.ru, 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.

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

ConclusionsYes, you need to do this. No, it’s not a magic bullet.

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

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?

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

Q&AAssuming I stopped talking in time. Feel free to heckle if you have not already done so.