Mobile Email Optimisation: Strategies for Small Screens

This is the most important URL that you write down is this one right here this litmus.com Slash LP Slash Savage Tech because the slides and all the resources and everything I'm going to share with you is already up on that page So like I said after you take a picture or write that down we're gonna start moving really really quickly Oh, yeah, and that's me before I cut off my hair if you want to tweet at me I'd love your feedback whether it's positive or negative. I'm Melodory. It's a smashing pumpkin song you guys like the smashing pumpkins All right, I got one thumbs up. You know the song I'm talking about You're a die-hard fan then And then my company is litmus app. So let's get it kicked off So we're talking about mobile email and there's a company in the states called Blue Hornet. They send email They ask a whole bunch of people they said if you get a mobile email that looks bad What do you do? And the crazy thing was that 80% of people said they would delete an email that looked bad on a mobile device And that's pretty bad But the really crazy thing is that 30% of people said they would unsubscribe From an email that looked bad on a mobile device and if someone unsubscribes from an email that looks bad on a mobile device You can never send them email ever ever ever again. So that tells us that there's a really Heightening expectation for emails that look good on mobile devices and that people's expectations are really really high so basically why are people so upset with our emails and Frankly, they're broken if you see that one. It doesn't fill up the screen It's like kind of skinny when it should be filling up the width of the the screen This one is just frustrating. Like if you were to get that email, what do you click on? There's like too many CTAs I think there's like 15 different things you can click in that email Or this one if you try to read it and all the images are blocked and it says download pictures over and over again So that's why people are frustrated with our emails and they delete them and unsubscribe from them when they look bad on a mobile device And so how do we fix it? Kevin Mandeville is litmus's own email designer. He's based in our office back in Boston and Last year at our conference. He talked about what he called contextualized email And he went through these four things that you should know about creating contextually aware emails the user the task the environment and the technology and One of the things I'm going to focus on first is the technology part and that's Understanding what device people are using when they're opening your emails and Litmus has been tracking where emails are opened since 2011 so for a long time and I've been doing speeches like this since even before that and I've gotten on stage back in 2011 And I was like hey guys Mobile email is eight percent like you got to pay attention to this. It's a really big deal This is really important. We need to pay attention But now mobile email is opened 56 percent of the time And that what's important to understand about that is that this change has happened over just the period of the last five years And so that's a more than six hundred percent increase in mobile email opens over the last several years But even more important to know is that that doesn't apply to everybody even though I am an expert And I'm up here telling you this it doesn't mean that 56 percent of your audience opens emails on mobile if you look at litmus's own stats We're b2b software company about Fifteen percent of our audience opens emails on a mobile device But map my run which is a mobile app that helps you map your runs They have almost 70 percent of their people opening on mobile devices And it's because they have a mobile app and they're more of a consumer audience So it's important for you to know where you fall in that The thing I want to talk about is environment so where and when is the user and This is one of the things I get the most Passionate about and also the most upset about when I receive emails that don't consider this when brands have sent me messages And so I have a few examples to show you Bank of America is a popular bank in the States Hence its name Bank of America and if I go to the ATM machine, and I make a transaction in this case I think I was making a deposit at the ATM It asked me if I wanted an email receipt and because I'm a nerd and I'm a marketer I was like well of course I want you to send me an email receipt because I want to see what it looks like on my mobile phone And so I got the email and it was really really really hard to read on my mobile device because it was the text was small My screen is tiny I really couldn't read it and then the crazy thing here is that that was an ATM transaction like Bank of America knew Where I was when they decided that they were going to offer a triggered email from an ATM transaction But you can tell that they didn't really think about it because if they would have said oh well people that are standing at ATM Machines aren't opening emails on their desktops They're opening emails on their mobile phones because they're standing at the ATM machine It was a really horrible experience and a really hard email to read Or this one I travel a lot for work I get these emails from every airline that I travel on that's like hey It's time to check in for your flight This one was from an airline a domestic airline in the States called JetBlue and first of all the buttons really tiny and hard to Read it's there eventually when you can find it, and then I clicked on it, and then you know what I got A website that said hey you have to use flash to check in and so if you know anything about iOS iPhone and iPad flash Does not work on those devices so say I didn't know that say I'm not technically savvy I'm like your mom or your grandmother or someone else that just doesn't know that flash doesn't work on those devices And I clicked a little link that says oh yeah, I want to go ahead and install flash I'm taking to another page that just says oh yeah, sorry this isn't going to work so dead ends all around really really bad experience Another airline email I'm sorry for picking on airlines, but they're big offenders again really hard to read in The first place if you zoom in on this first of all it's the subject line is last-minute information about your trip This is the kind of email that gets sent when you're sitting at the airport like waiting for your flight to board And so what's that last-minute information? Can you guys read that and tell me what that says? All the text is like smashed on top of each other, and it's like kind of overlapping a little bit It is literally impossible to read I was so confused really frustrated Or how about this one? Do you ever get an email or anything on your mobile phone? And you try to tap one thing and you end up tapping the thing next to it instead That's so frustrating right because like your fingers really big with the links are really small So context can in fact can it can affect conversion and frankly it will And there's a lot of things that we can do to help address this problem of lack of context in mobile email In some ways we can fix it so one of them is responsive email And you might be asking yourself I've heard a lot about responsive or mobile responsive and what can it really do when it comes to email and I think there's a lot of confusion about it What a responsive email does is it detects the size of the screen of the device that it's being read on? What responsive email does not do is detect the actual device so it can't say oh hi Person you're reading on an iPhone or an Android or a Samsung or a Windows phone or what have you it? Just detects the screen size so how wide is the screen and there's some pretty cool things that responsive email can do This one from Expedia if you look at the navigation it goes from like seven options down to what four There's a new app across the top that asks you to download its iPhone and Android apps that isn't there on the desktop version So you can selectively hide and display content based upon the width and the environment that it's being read on You can't tell really easily but down here. There's actually two columns that Actually goes to one on the mobile device, and then the button Cdeals gets bigger and goes to the whole width of the phone as well Or this one from Twitter is probably one of my favorite Responsive emails of all time it does a couple of those other things where like the the layout shifts And it goes from two columns to one but my absolute favorite part of this and it's that whole Contextually aware thing again is that the call to action changes if you look at the button on the desktop version So this person is using a web browser on their computer It just says try it now so you're gonna go to like your web browser and log into Twitter and try it there But if you download it on your mobile phone well they have a mobile app and so in this case it says get the app And try it now so the CTA even changes depending on the context of the user and what sort of environment They're in and what tools they have access to So you might be wondering does this responsive email actually perform better like that's great Justine You're a nerdy designer, and you really like things that look pretty But does it actually work better does it help my business perform? And so MailChimp did a study with us And they actually compared the click rates for responsive emails to non responsive emails All the ones that are the blue bars there are all of the responsive emails the red ones are the non responsive And you'll notice that the blue bars are always taller that means that responsive emails always did better But the really interesting thing is that for mobile on both of these That it also increased the clicks for the desktop and the tablet clicks as well So it's not just on a mobile phone that responsive email performs better It's across every environment And that's probably because people that put the extra care and attention into making an email look really good on a mobile phone Care about the experience overall and that optimizing for the mobile experience also optimizes for other experiences as well And so overall responsive email had a click rate of more than 30% on the first link in responsive emails And then also 15% Increase in unique clicks across the board for mobile users so definitely big wins there But more than just clicks it also impacts conversions or sales And so this was a company called act on that actually tested a regular just control email versus a responsive email And you can't always look at just opens or clicks because sometimes those things can be a bit misleading right with any marketing You have to keep going down the funnel and seeing how it affects the bottom line So in this case the open rate actually decreased across the board for responsive email But all that becomes a wash when you go over here, and you look at what they call srls Which is a sales ready lead and that's like a phone call to them or someone wants to buy which is their measure of conversion Their measure of success and that increased you know almost Gosh 93% with a quick weight went up to 130% even though the open rate was down So you have to look holistically and look at all of the stats and not just one stat to see if it's doing a little bit better Can we say questions for the end So what is responsive email not there's a lot of things that it can do but there's some things that they can't do either So it's not foolproof people can open email in lots of different places, right? That's why litmus exists So we help you address all those different places that email can be opened and the most important place is gmail So responsive email is actually not supported in gmail And that's a really big deal because gmail's usually pretty popular on most people's lists So when you're talking about responsive email and where it works or where it doesn't you can't say oh well It doesn't work on an iPhone because that's not true. It does work on an iPhone, but it also doesn't work on an iPhone It really is the app that the person is using on their iPhone So I have an iPhone right that's right here And this is that same Expedia email but opened in gmail and then opened on the mail app on my phone You can see that it looks different. It's because responsive email doesn't work So what do you do then use hybrid or spongy email? And this is something that would take me like an hour to explain to you, and I do not have an hour So instead you have the link to the slides There's lots of great resources here and really tiny type So that when you download the slides later you can look at those resources and figure out what hybrid or spongy email is but It's a great solution, and it's responsive like email that works even on gmail All right, so here's some other great things that we can do to help improve a user experience by thinking inside the inbox I'd like to think that every subscriber goes through stages when they receive an email from you And there's different things that they have to look at while they're interacting with an email The first three things the front name the subject line and the preview text take place in the inbox and the inbox is usually the thing That we spend the least time thinking about but it's the first thing subscribers see That's really really important to mention because I can't tell you how many times I've created an email And I check it in my email tool, and then I turn to my team and I say hey guys What should the subject line be right? I think we've all done that one time or two But really the subject line is what you should thinking about first because that's what your Subscriber sees first when they decide whether or not to open your email, so we're talking about mobile We should look at the from name again the subject line and the preview text and understand that these things can get cut off So you want to front load and put all the important stuff at the beginning and then know that after a certain point you just don't Get to read any more at all so from the from name. It's about 25 characters the subject line That's about 35, and then the preview text is about 85 characters All right, and there's a whole guide to that in the slides as well Then when we talk about preview text are you guys familiar with this do you know about preview text raise your hands if you're Using preview text see a few okay, David Course limits is using preview text So what are some cool things you can do this is a little bit of tax that shows up underneath the from name and underneath The subject line and so the things I hate Email not displaying correctly that doesn't sound very exciting does it or how about if you're having trouble viewing click here? I don't want the word trouble in the inbox alongside my brand I don't know about you, but that doesn't really make me excited. I like this one from Wistia They say we all started somewhere early videos and lessons learned Then there's one from Sprout social and they say here are some follow-ups in the next steps that you can get the most out Of your webinar experience or this from from meetup that says to every organizers all around the do all around the world Thanks for all you do to create community, so there are Like really great ways that you can strategically use preview text to optimize the inbox and really pull relevant content in there to get people Opening and clicking and it's probably one of the reasons why the open rate might have gone down is the inbox might have changed in That early one when you asked So there's an optimization guide again to preview text up on the blog So then after you get past the inbox that's the really the important part so the best open rates in the world are what? 40 or 50 percent but a hundred percent of people actually see the inbox so I can't emphasize enough how important it is to emphasize the inbox But once you get to the open part there's other things we can do inside the email to optimize that as well First thing is bigger is better again. It's a small screen things are gonna be hard to read Body copy should be about 16 pixels Headlines about 22 and then this is the biggest one is that buttons 44 by 44 this is actually comes from the Apple guidelines They measured everyone's thumbs apparently your thumb is 44 by 44 pixels I didn't know if you knew that but you also want that much space remember earlier I showed you the example of the thumb and all the links and you hit the wrong one and it's really frustrating That's why you want a thumbs width of space between things that you can click to to prevent that frustrating experience to make tappable touch targets Other thing you want to keep in mind is that iOS so this is iPhone and iPad it tries to be helpful You have things like tracking package links or addresses and phone numbers that get automatically linked by iPhone Because they want you to help make a phone call or add an event to your calendar But what happens when you have those dates and they turn blue and you have a blue background in your email you can't read it So there's some tricks that you can do to overcome that and again resources are up on the blog about how you fix that kind of stuff Something else crazy that iOS does if you look really closely at the navigation in that email We zoom into it you can see that all the s's are kind of broken and on the next line It's because that font was probably 11 or 12 pixels tall and so what iOS is gonna Do is it's gonna resize any font that's less than 13 pixels to actually be 13 pixels because it says hey this font's too small Nobody can read it. I'm gonna make it bigger for you So that's why I said 15 or 16 pixels really 13 is the absolute minimum before you get in trouble with iOS And so remember the rule of thumb you all have a thumb This is how you never forget to put enough white space is that you have a roving white space detector So smash your thumb up against your computer or your iPhone or your Android and make sure that it works All right, so then we also have to think outside the inbox We already talked about that subscriber experience in the middle of the inbox and the email body, but it doesn't end there There's also the opt-in the point where someone gives you their email address is that mobile friendly are you setting the right expectations? Maybe not and then there's the page of the site Oftentimes really the important stuff the conversion actually isn't happening in the email itself It's happening after someone clicks on your email And so you need to ask yourself like what is my goal if my emails mobile friendly does my website need to be? How many taps does it take to get there all important stuff? Because these are so again some really bad experiences I've had before where an interstitial pops up this one's from a Victoria's Secret, you know an underwear company And they said hey we really want you to buy this makeup kit Said I don't want to buy the makeup kit every time I zoomed in to make it go away The little X in the corner went off the side of my iPhone screen which was really frustrating Or this one member jet blue with the flash or this one just says like your resolution is wrong So WTF mobile web if you want to get a laugh later on it's got all kinds of examples of horrible websites that are optimized for mobile So one last quick word about Apple watch because I'm sure I'm running out of time if I'm not already The thing you have to keep in mind here is that Apple watch is actually going to show you the plain text version of the email So if you're in one of those camps I've heard a lot of people say that like oh, we don't send a text version anymore It's not worth our time to format it like it's not it takes too much time We don't care you're not sending in multi-part mime at all You might not have a lot of Apple watch users in your audience But it's a good reminder that the plain text version matters It matters for accessibility reasons it matters for personal preference reasons And it matters because it can help you make it into the inbox rather than the spam folder by sending emails and multi-part mime That's when the HTML and the pretty part of the email is bundled together with the text part of the email You're gonna look better You're gonna get make it to the spam or you're not gonna make it past the spam folder into the inbox and you're gonna look good on Apple watch too So just a quick example that's our email announcing the Apple watch Along with our text version for it When someone sends that and it's opened on an Apple watch it actually says the full version of this message isn't available on Apple watch But you can read it on your iPhone. That's really great isn't it? And so if you don't get a text version you don't get an email at all you have to read it on your iPhone instead The other thing is that links are totally disabled So if you're you're chucking a bunch of links into your text version hoping that someone converts there Keep in mind that there are no links because there's no browser on the watch and that it's really just a messaging medium meant for like Personal consumption so you might want to rethink your strategy about how you're actually sending the text version parts And make sure that they all are nice and optimized so a couple of resources for you If you're wondering about this hybrid email thing or a responsive email in general litmus has a couple of templates that you can Use that are are ready to go. They're pre-tested. They work everywhere They use that hybrid method so that they work in Gmail to you can download a link there Or you can come visit us outside We've got a lot of great technology that helps you understand what your email looks like on a mobile device and how you can optimize It better And that's it. I hope you got that link with all the slides and the resources. That's the fastest talk I've ever done so Do you have any questions come grab me outside?