Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Adapt or Die: The Mobile Email Challenge33:12 with Ros Hodgekiss and Ryan Riddle
Anyone who's had the grim pleasure of designing an HTML email newsletter knows that email is, well, broken. Designers quickly learn that wildly different CSS support between clients and a lack of email standards inevitably result in compromises, a scaled-back experience and broken dreams. And when the newsletter is finally delivered, most readers simply can't give two hoots about all that effort put in. Despite the totally crippled nature of CSS support in email, the lack of scripting and the ridiculous diversity of platforms and displays out there, there are email designers who are doing a great job of wrangling the medium. In this discussion between Ros Hodgekiss at Campaign Monitor and guest experts from Zurb University, we'll be going beyond table layouts to show you what adventurous email designers are doing today - from CSS3 animation, to optimizing for mobile devices and more. If you send HTML email newsletters or notifications, you'll find out what techniques can be used in email, receive usability guidelines and be inspired by our round-up of highly effective designs.
[SOUND]. 0:00 >> Hi everyone. 0:01 How are you all doing today? 0:02 We're enjoying the show? 0:04 Oh my god. 0:05 Hey. 0:06 >> It's so great to be here. 0:06 >> Oh far out. 0:08 This is so crazy having this double act here. 0:08 I love Ryan to death. 0:10 >> It's, what's going to be a bit of Abbott and Costello, I think. 0:11 >> Yeah, I think so. 0:14 You know? 0:15 I first of all have to apologize, there 0:17 will be no death involved in today's presentation. 0:19 I got super excited, I actually get really excited about 0:22 email, and putting the die bit, thinking it'd be really 0:25 cool and sinister, but anyway we are gonna be talking 0:28 about adaptive layouts and stuff like that so you know. 0:31 At least we're kind of sticking true to the premise. 0:34 UIm, out of curiosity who here actually has sent 0:36 an email campaign, does it for their customers, hands up. 0:40 Yep. 0:44 You do? 0:45 Oh my God. 0:45 Hands up if you actually enjoy it. 0:47 Yes. 0:50 This is it. 0:51 I gotta tell you. 0:51 >> Tables, am I right? 0:52 Tables. 0:54 >> Oh man, I've got to tell you once you've sent your first email campaign too. 0:54 To 70,000 people, with the subject line TBA, you 0:58 learn to enjoy email marketing, you really really do. 1:02 >> [LAUGH] 1:06 >> So, I wanna tell a little story, I wanna tell a 1:06 story that hopefully those people who relish email marketing can relate to. 1:09 Meet Ben, he's an ordinary dude he likes reading email on his phone. 1:14 A lot of us do that. 1:19 I don't know about you Ryan. 1:20 Do you, when do you stop reading your email [CROSSTALK]. 1:22 >> I, I started reading email on this little thing in bed 1:23 before I even get out of bed to get ready for my day. 1:27 >> Yeah, my husband does that. 1:30 >> This is my first point of contact with anything that I have to do. 1:32 >> Oh my God. 1:35 It is really quite something. 1:35 I start my email life at about seven in the morning. 1:37 Ben does too. 1:40 And, you know, he likes it, it's super convenient. 1:41 You don't have to be at your desktop to catch up with your mail. 1:44 You can be across things by the time you, you know, train into work. 1:46 Thing is, he like, he really, he, he [UNKNOWN] getting emails, and one 1:50 day he like, he gets his email and he sees in his inbox. 1:55 He's like, oh great. 1:58 This is, this is like. 1:58 >> Yes. 2:00 >> This launch email for like these, these guys 2:00 that I really liked their design company and you 2:03 know, they've got this new product and so it's 2:04 like okay let's check it out, let's check it out. 2:07 And he's like super disappointed. 2:10 >> No! 2:13 >> He's like, I, I'm trying to rate this thing. 2:14 I'm pinching, I'm zooming. 2:17 This is my pinch and zoom manuever by the way. 2:19 I'm like trying to read this thing, what is this? 2:22 And, he's just like, he doesn't really think about it, he just 2:24 sends out a disappointed tweet going, I, I really was hoping for better. 2:28 And, you know, I'm an email sender, I get, I get the tweet if something goes wrong. 2:33 You get the tweet if something goes wrong. 2:37 But the email going hey, what's with this, your layout is broken. 2:38 >> And you're pulling your hair out. 2:41 >> And it's just like something. 2:43 >> You're just frustrated at yourself because of this e-mail and this tweet. 2:45 And you're just like what have I done wrong? 2:50 >> You just put so much effort in. 2:52 It's like, you know, putting together a good e-mail 2:54 is almost worse than putting together a presentation, right? 2:56 >> And so we don't want you to be in that situation. 3:01 We really, really don't. 3:03 So. 3:04 We wanna talk to you about the black art of email and 3:05 the even blacker art of actually having it work on a mobile device. 3:08 And we wanna talk about it to, like, the designers 3:12 and coders out there, the actual coding side of it. 3:14 What mistakes you don't need to make. 3:17 If you're a marketer, like me- 3:20 >> Or me. 3:21 >> Or you for that matter. 3:22 You know, or you kind of just have this sort of interest in email sending. 3:24 You know, I wanna just explain like demystify 3:27 a bit of the craziness and that goes on. 3:30 >> And that you don't have to be afraid of code. 3:32 >> Oh my god, you don't even have to code. 3:34 That's another thing too. 3:36 So before we get into the thick of it. 3:38 Ryan, what have you been doing in the email world. 3:40 Well, I work for ZURB, which, thanks to Ian's excellent 3:43 int, introduction, is a 16 year old product design company. 3:47 We've built a framework that allows you 3:50 guys to actually send emails that work responsively, 3:52 and we send out about, on average, 10 3:55 to 12 newsletters and months across different properties. 4:00 So, really I'm this deep of email. 4:03 [LAUGH] And so are you. 4:06 >> Okay, I've been in the, in the 4:08 tranches about eight years, sending emails, I've been 4:09 designing for clients for quite a while I 4:12 am, I'm really not the numbers girl, I love. 4:16 You guys saw Sarah's talk yesterday in designing around data. 4:19 That sort of stuff just makes me so happy and so excited. 4:23 I love metrics. 4:26 You're gonna see all sorts of crazy like, stats 4:27 all throughout the preso because I just love numbers. 4:29 I really, really do. 4:32 And I want to seeing things just work. 4:33 You know and part of a, a wider design com, design 4:37 and email design community, that creates a lot of resources and 4:40 we just like to get out there and share all the 4:43 weird stuff that just goes on in the world of email design. 4:45 And so why are we up here? 4:50 Why are we up here now? 4:51 >> Because email refuses to die. 4:52 It is one of the most easiest ways to really connect with your audience. 4:53 You know social media was supposed to kill email, but really, when you send out a 4:58 tweet, you post it on Facebook, your message will get lost in a lot of noise. 5:02 Email is still the best way to just boom, 5:06 right there, in their box, in front of them. 5:09 >> In their box. 5:12 I'm gonna quote you on that later. 5:14 [LAUGH] >> So [LAUGH]. 5:15 And so, okay, we're still here. 5:18 I'm still designing emails eight years later, sending them 5:21 out to humongous lists, you know every single week. 5:23 And a lot of the reason for that 5:27 is because people say this is their prefered channel. 5:28 You know, people get surveyed and they say look, we wanna 5:32 communicate with the brands we like and what not by email. 5:34 It sure beats a phone call. 5:38 Tweets don't usually cut it. 5:40 Well, they, they can cut it, but not all the time. 5:41 And so it's, it's really a point of preference. 5:44 We also found that a whole bunch of people do like Ryan and I. 5:47 We read email on our mobile devices, so. 5:50 >> Me. 5:53 >> This has become super important. 5:53 >> How many of us have this right now on us? 5:55 Or that are probably using it in the audience, right? 5:57 >> For real? 6:00 There we go. 6:00 How many Android folks are there out there? 6:01 >> I'm sorry. 6:04 [LAUGH] I mean, no no no. 6:06 >> [LAUGH] You know. 6:08 But that's another email design conversation right there. 6:09 And so, the thing is, it's like, but there's all this crazy stuff around. 6:16 Around email, there's all this crazy stuff about around optimizing 6:19 for mobile and so, people come to us they're super confused. 6:22 They're like, okay so I've been designing for the web for so long is 6:26 it really, really different for e-mail and you know, what tools are you using? 6:29 And, do you use text editors? 6:33 Like, is this something else, magic going on there? 6:35 And so, because of this confusion, we find that 6:38 a lot people are sending, just, they just give up. 6:41 They're like, we're not, we're gonna go for the easy route. 6:44 We're just gonna send emails like this. 6:46 Just, whole bunch of text. 6:48 You know, like- 6:50 >> Or web about ten years ago. 6:51 >> Yeah. 6:53 >> Lots of content, lots of text, sidebars. 6:53 Things that don't actually work well in a mobile environment. 6:57 >> Yeah, just like all these multi-column things going on, it's just 7:00 like, I should have shown what this looks like on a mobile device. 7:03 It looks just not nice at all. 7:06 And the thing is, okay, this is how, how the cookie crumbles. 7:09 I'm bringing this up to you now because this is 7:13 a campaign I designed in 2008, for IBM, another story. 7:16 [LAUGH] And I have to agree, it's not pretty, but you 7:20 know, we still see emails like this to this very day. 7:23 You know? 7:25 And so you know, talking to designers about why they 7:27 won't push, why they don't push the envelope, you know. 7:29 Basically we've, we've had a couple responses and they kinda 7:33 go along the lines of, CSS support is a bit long. 7:35 You know, we just don't know what techniques 7:39 to use, we don't know what tools to 7:42 use, and what's this thing about mobile all 7:44 of a sudden, about, you know, optimizing it. 7:47 So, Ryan I think you wanna talk a bit 7:48 about the CSS support being the elephant in the room. 7:51 >> Right, yeah. 7:54 See, a lot of the email clients you, you have your CSS, 7:55 you have your styles but they just strip all that stuff out. 7:58 So that, that perfectly designed e-mail that you send [CROSSTALK] just looks 8:02 utterly like plain text in things like Outlook, Gmail, Lotus Notes. 8:08 And the problem here is that these e-mail clients aren't going 8:13 to die as much as marketers, designers, coders, want them to die. 8:17 Outlook is still the number two desktop client after Apple mail 8:21 according to litmus for 2013 and so far for 2014. 8:27 So Outlook is not going away. 8:32 >> And it can't even get margins and padding right. 8:36 I mean, we, we got CSS guys to like what email clients can deal with what. 8:38 You know, what's CSS properties. 8:43 And this is really fundamental stuff. 8:45 Like even in background propping. 8:46 No, let's not do it. 8:47 No, let's just, no, skip all of that. 8:49 But you know, for a long time, people were 8:52 kinda like in this sort of dark age mentality like. 8:54 Okay, well let's just not bother him. 8:57 you know, if I can't even get margin right, what's the point? 8:59 >> [LAUGH]. 9:01 >> But as we've seen, like this being this really incredible 9:02 shift people actually do like checking their email on mobile devices now. 9:05 >> Right. 9:11 And that, that percentage number is growing. 9:11 >> It's growing like crazy, and we're finding that, you know, a lot 9:13 of folks are reading mail on the mail app On absent use webkit, 9:16 webkit for the win by the way and then people have started experimenting 9:22 and they're finding they can do things like using, web fonts in email? 9:28 >> Yeah. 9:32 >> Or responsive techniques? 9:32 >> A little bit of responsive techniques well, a lot in certain cases. 9:34 >> A lot, you know, depending and you know, we've, we've done the 9:38 odd med, media query in our time, you now, it's been a little something. 9:42 CSS 3. 9:45 >> Exactly. 9:46 >> Isn't this an oddity. 9:47 So people like, starting to just slowly just, like, try things. 9:48 Panic is, is an example. 9:53 They're a company that create like, excellent Mac software. 9:55 They know exactly who they're sending it to. 9:59 It's people that use Macs and devices that use web kits. 10:02 >> Obviously iPhones. 10:05 >> iPhones that kind of thing. 10:06 And they're doing just interesting stuff. 10:07 They're first of all using responsive techniques. 10:10 So, you know this, this beautiful wide foot word with email that becomes 10:12 like this single column one when viewed on, on you know mobile devices. 10:17 I'll show you, I've done some like curious 10:22 things like they're using SPG animation in, in e-mail. 10:25 Very curious. 10:29 They're using web fonts, so that, the sort of experience 10:30 going from e-mail to their website is like so completely consistent. 10:32 You know, there's no like kind of like [SOUND] 10:36 Hey, I'm an email you know, on site now. 10:38 >> Yeah, it's, it's beautiful to look at and we all love looking at pretty 10:40 things and when we get a pretty email hey [CROSSTALK] it just catches our eye. 10:44 >> But yeah, the consistency really makes for something doesn't it, you know? 10:49 You've had Uber as one of your accounts? 10:53 >> We've had Uber as one of the people who use our framework for responsive emails. 10:55 And as you can see, it's like, looks great on desktop, looks great on mobile. 10:59 And that is actually a clickable button like you would actually find on a website. 11:04 It's not just an image button with an anchor tag. 11:08 >> Yeah. 11:11 >> So, you know some, some nifty stuff is being done in this space. 11:11 >> Yeah. 11:15 Like a small e-mail payload, really nice 11:15 fluid width layout, you know, that's awesome. 11:18 So, you know we're making those steps now, but then designers 11:21 are like, how about all those like techniques and workarounds, like where 11:24 are all these really key to talk about email hacks and you 11:28 know, maybe that's the wrong way to, to talk about it right? 11:31 Right? 11:34 Because email shouldnt be a hack. 11:34 >> No, it shouldn't and when you do hacks to code. 11:36 It just because, especially when you're working in tables. 11:40 it's just becomes this monstrosity that's hard to parse out. 11:42 >> Yeah. 11:46 >> And, and can easily break layouts 11:46 and break things in certain clients like Gmail. 11:48 >> Gmail. 11:51 Gmail. 11:52 And talking about Gmail? 11:53 Email just hasn't, it hasn't caught up, okay? 11:54 >> Yeah, exactly. 11:56 Email hasn't really caught up with the web. 11:57 When you think about the web today, we have responsive frameworks. 11:59 We have tools. 12:02 We have a breadth of them that allows us 12:03 to design better online products and sites, but we haven't 12:05 seen the email catch up after all, it's still caught 12:09 in tables, and we've moved on to things like divs,. 12:12 >> [LAUGH] Divs. 12:15 >> Divs, and emails are still stuck in a template and boiler plate mentality. 12:17 Now, templates and boiler plates are great. 12:23 Don't get me wrong. 12:25 They get you started. 12:26 They get you there. 12:27 What you need, when you need it, very quickly. 12:29 But there's a limitation with those things. 12:32 They don't allow you the flexibility to design as, as creatively as you'd like. 12:35 You're really stocking that template. 12:41 And for us, we actually created some responsive templates that worked 12:43 great on the mobile device but really looked hm, kinda crappy in Outlook. 12:48 But, so what do we need? 12:54 What is actually needed to get us to the next place of email design? 12:55 What is needed to bring us up to date to the web? 13:00 Well, that would be frameworks. 13:03 Frameworks for the land. 13:06 Frameworks are great. 13:07 It has helped the web. 13:09 Whether you're using foundation, whether you're 13:10 using bootstrap, whether you're using bourbon neat. 13:13 Frameworks have allowed us to start building websites that 13:15 responsively scale down to phones or scale up for desktop. 13:19 And when it comes to frameworks in an 13:24 email space, you actually have to design outlook first. 13:26 You have to do progressive enhancement. 13:29 And I know this seems antithetical to 13:32 progressive enhancement cuz you think, oh, progressive enhancement. 13:34 I'm designing for the small screen moving up to the big screen. 13:37 Well, really what you're doing is you're designing for the most constrained arena. 13:40 And outlook in terms of email is actually that constrained arena that you have to 13:45 design for first, and then scale down to the other clients like Apple iOS mail. 13:51 And that's what we've exactly done with what we've done. 13:57 And there are a lack of tools, but we're getting better, and Rose will go over one. 14:00 And I'd like to go over just a quick tool that you guys can use. 14:04 Which is, Ink! 14:07 Which, and this is Inky, it's the mascot of our Ink platform which is 14:10 a framework that allows you to create responsive emails and work in Outlook. 14:15 It's a 12 column grid just like a responsive framework on the web. 14:20 It's in the 580 pixel wrapper that actually collapses into a vertical column. 14:24 On one of these and it's very, very heavy tool. 14:28 We use it a lot. 14:32 And the reason why we actually built a 14:33 framework, was because we saw a need for ourselves. 14:35 We saw that our emails kind of look like bunk on the mobile device. 14:38 >> [LAUGH] >> Like that. 14:44 As you can tell, that is a really atrocious mobile experience. 14:47 The text is really tiny. 14:52 The, the links, my fat finger cannot click one of those 14:55 links unless I do this, this action and get that big. 14:58 So from that, that led us to do a redesign which led us to templates 15:02 which eventually led us to Ink and here's what we have now as our emails. 15:06 >> Hm. 15:10 >> Very simple like it's what, it collapses into 15:10 a one column, very bold type, very bold pictures, easy 15:13 to read, and more importantly all the links and buttons 15:17 I can actually hit with this fat finger of mine. 15:20 >> [LAUGH] Your finger's not that fat. 15:22 >> Which comes into really handy. 15:23 >> [LAUGH] But yeah, that's the thing, basically you 15:25 just want to eliminate the pinching and the zooming. 15:27 You really, really do. 15:29 And also, it, it kinda helps with the, like, how do I put it? 15:30 It's a fluid layout. 15:33 >> Right. 15:34 >> So, you don't necessarily have to look at specifically, 320 pixels wide. 15:34 >> Right. 15:39 >> Which is you know, what you have on the iPhone. 15:39 >> Right. 15:41 >> You can look at Android as well. 15:41 So, now we looked at frameworks, like there is a whole bunch of other tools. 15:44 A lot of them, which will be very familiar to you. 15:48 Personally like, people have been like, hey why, how do you code up in HTML email? 15:52 Like, say you want to do the horrifying thing and do it from scratch. 15:56 You know or do it easy on [UNKNOWN] plate, or you know something like that. 15:59 how, how do you edit, and >> Well I'm a big fan of CODA. 16:02 >> You're a huge fan of CODA. 16:06 >> I use CODA. 16:07 I know that I know that some of the 16:07 other designers at ZURB they love to use Sublime. 16:10 You know, and you like to use. 16:13 >> I like, I started using Adobe Edge CC, actually, 16:15 that's one where you can like create classes on the fly. 16:18 That's actually kinda neat, but then again I know people who stick to TextEdit. 16:20 Every time we bring this up amongst people like hey what 16:24 text editor do you use, there's always some guy out there. 16:26 >> Yeah. 16:29 >> He's like using TextEdit or you know. 16:29 >> Yeah, our design writer uses BB Edit still. 16:31 >> Yeah, so you know, bless him. 16:34 Bless him, you know. 16:36 Okay, whatever floats your boat. 16:37 You know, we're gonna talk about the importance of 16:39 testing and devices soon, but browser testing, tell me about- 16:42 >> Browser, browser testing is great. 16:47 So, the Chrome inspector has saved a lot of people's lives [CROSSTALK] right? 16:48 It's easy to just do this window washer maneuver and just kinda see what 16:53 it will look like really easily and as well as you can get in 16:57 there and you can change a few things in the code to see what 17:00 those changes will look like, before you 17:03 actually import them into your text editor. 17:06 So it's a great way to just test on 17:08 the fly, but then they're also, they're testing tool. 17:10 >> Yeah, I mean keeping in mind that your mileage will 17:12 vary, as we said CSS support can be very, very odd. 17:14 >> [LAUGH] >> In, in a variety of email kinds. 17:17 It's like nothing really bids. 17:20 Just basically testing things out in a whole bunch of them and a very quick 17:22 way to do that is to use like a service like we use litmus premium. 17:25 >> Litmus, amino acid, other ESPs have 17:29 their own [CROSSTALK] testing services as well. 17:32 >> We got built in design and spam tests that kind of thing 17:35 show you what things look like in Yahoo mail or Gmail for heaven forbid. 17:38 >> [LAUGH] 17:42 >> Or Lotus Notes 8, you know, which seems to matter for a lot of people. 17:42 You know, but, you know, some things don't die I guess. 17:46 I guess we'll take a moment, the one thing that you know, people 17:50 seem to run into little too late in the game is the in-liner. 17:53 so, you know, talking about slightly strange email clients like Gmail. 17:58 The, you know, they do strange things like arbitrarily like, I'll just strip 18:02 all the styles out your head and go ha, this is your email. 18:05 You know. 18:09 >> You have to use the dreaded inline style. 18:10 >> Yeah. 18:12 >> You have to use an inliner to do that 18:13 for you as oppose to doing it yourself which don't do. 18:14 >> Yeah. 18:17 As you know that's just not what you do if you work for the web, right? 18:17 It's just like it's a horror show like it's a total horror show so. 18:20 You have these inliners that you know, either do what, you know, are 18:23 built into email platforms or inliner cm, which is you know, one that's independent. 18:27 Or you've got [CROSSTALK] as well. 18:33 >> ZURB.Ink/inliner. 18:33 You know, you can just easily put your ht, HTML in your style sheet and [SOUND]. 18:35 >> Bang, like that. 18:40 But you do that at the very end. 18:42 Don't do that at the beginning because it's awful. 18:43 Just, just don't. 18:45 You don't wanna [INAUDIBLE]. 18:45 >> [LAUGH] Yeah, if you have to fix something 18:46 it's hard to go through and inline style coach. 18:48 >> No fun at all. 18:50 So keep [INAUDIBLE] in mind, very important. 18:51 And talking about all things horrible 18:54 >> Right, I have a little bit of a ghost story. 18:56 So don't, don't be afraid. 18:58 You can, you can move up. 18:59 It's, it's not too scary. 19:00 But it is a little scary. 19:02 So this is, this is my you know, my sc, scared straight talk. 19:05 We send out an email with Ink. 19:09 We were really excited about Ink. 19:11 Oh God, we got Ink. 19:12 We're gonna send something out. 19:13 And you know, we coded it up, we tested it on litmus, and everything looked great. 19:15 And then we sent it out, and this is what happened. 19:20 Holy cow, this is what happened on iOS mail. 19:24 It looks like crap! 19:27 [LAUGH] >> Yeah, definitely. 19:29 >> And we actually, I actually sent this out. 19:31 And what had happened was, is we were solely on 19:34 the testing service instead of actually picking up one of these. 19:37 Right? 19:41 Rookie mistake. 19:42 But, you know, we were, I was just so excited to send 19:43 this email out, that I sent it out and that's what I got. 19:45 And I properly got a lashing for it. 19:49 I think I still have scars on my back. 19:51 >> Yeah. 19:53 [LAUGH] You still got your job though. 19:53 So it must [CROSSTALK]. 19:55 >> I still got my job, yeah. 19:55 But you know, this, the lesson here really is, test, 19:58 test, test again, and test on as many devices as you 20:01 can as well, at least two or three just to 20:05 make sure that you don't end up with something like this. 20:08 >> Or in our friend's case, 36 devices. 20:10 I've got to tell you, like nothing beats testing IRL. 20:16 It can be a little bit awkward, but sometimes you just need it, you know. 20:20 >> Just get you through that hump. 20:23 >> You know, especially if you know that like you 20:25 know, 30 something percent of your subscribers, your recipients are like 20:27 you know, reading your e-mail on Android device or something 20:30 like that, you know Gmail and Android or something like that. 20:33 You've, you've just gotta know. 20:36 Like, you've just gotta know. 20:37 So, this is a picture of a device lab, and in an agency called Style Campaign. 20:39 Really, really cool people. 20:45 They do a lot of experimental stuff with email. 20:46 And so far, so they've created basically this, this, this wild device lab. 20:49 It just keeps on going. 20:54 And you know, that's just what they need to do. 20:56 It doesn't really just cut it using some sort of automated service, and if 20:59 you think that's like insane, well, Etsy are doing it too, how about that. 21:02 >> Beautiful setup by the way. 21:08 >> Yeah, this is kind of nice. 21:09 I mean I feel sorry for the guy who has 21:10 to squat all day but they've definitely got a great 21:12 setup for the testing their content, for testing their, their 21:15 site and their emails as well and they send great emails. 21:18 But this is my absolute favorite device lab. 21:23 Like my absolute favorite, this is the best. 21:26 And- 21:28 >> They need, they need a red phone. 21:29 >> Oh, they do need a red phone? 21:31 >> Commissioner [INAUDIBLE] we need to test on Gmail [LAUGH]. 21:32 >> That's true. 21:35 I think our margins are up by five pixels. 21:36 >> [LAUGH] >> [INAUDIBLE]. 21:39 So, this, yeah, this is ten. 21:39 These are ten dot com. 21:41 The guys who do the sci for TEDx and all that kind of thing. 21:42 And I love their back stand, they really, really do. 21:45 I just think they have a little too much fun with it. 21:47 I don't know. 21:50 There's people that really good into testing God, anyway. 21:51 So, apart from that there's some like solely obscure, 21:55 but interesting tools that we use as well I 21:58 don't know if any one of you had the 22:01 pleasure of trying export an HTML document from Microsoft Word. 22:03 >> Yeah. 22:07 >> Yeah >> [LAUGH] 22:08 >> Okay. 22:09 You, you know, you know, where we are coming from here. 22:10 >> [LAUGH]. 22:12 >> So instead of just having this nice- 22:12 >> Pain in the butt. 22:14 >> Oh. 22:15 This, yeah, like, instead of having this like nice clean document 22:16 that you can play with you know, that kind of thing. 22:18 They have their own language that's kind of HTML like, or VML. 22:21 You actually have to use it if you want 22:25 things to work well in Microsoft's e-mail clients like Outlook. 22:26 People have gone in together and they've 22:31 gone this is rubbish, so they've created code 22:33 generators for doing things like creating buttons 22:35 and call to actions that don't require images. 22:37 Or they like, you know, they have to use background images and so 22:40 they've got to make it look good in there and Gmail and elsewhere. 22:43 It's all really crazy ass word stuff. 22:46 And Ink as well you [CROSSTALK] guys you've got up on generator. 22:48 >> We have, yeah, we have that and we have 22:50 also actually we've button classes as well that allow you. 22:52 Like any, any good framework it allows you, it gives 22:57 you like the patterns that you would need to actually. 22:59 Design your own without, without giving you the styles that you can 23:02 add styles on top of it, and it has various button classes to 23:05 where it is not just an image with an anchor tag like 23:10 we've been doing buttons and email for I don't know how long [LAUGH]. 23:13 >> Hm, well this is the thing, so I mean this is great 23:16 and I had to take a lot of pleasure from coding from scratch. 23:20 But then, on the other hand, and I'm talking to a lot of the 23:23 folks who, you know, like myself, who just need to get e-mail campaigns out. 23:26 Real, really, really quickly, once in a while you know, that want 23:30 to create templates that just work that don't require too much nitty gritty. 23:33 Are there e-mail builders and there's some pretty, bloody amazing 23:38 e-mail builders out there, and this is actually great timing. 23:41 We just launched a new email builder yesterday, it's called Canvas. 23:44 It is a beautiful piece of work, I'd like 23:48 to just preview it to you guys just quickly. 23:50 I'm being a bit naughty, but bear with me. 23:52 [MUSIC] 23:54 >> Thanks guys. 24:57 Oh that's lovely. 24:57 [SOUND] That's campaign monitor's canvas, and actually 24:58 a bit like emotional about that cause it 25:01 took us a while, and I'm just so beautiful to see it on the wild. 25:03 Anyway. 25:06 Moving on finally people are like, okay, okay, okay, okay. 25:07 there's one more thing that's like stopping from creating the email of my 25:12 dreams and that's what I just don't 25:15 understand why this email and mobile thing. 25:17 What the hell is going on there. 25:19 >> Right, and there are considerations that you 25:20 would take for designing mobile on the web that 25:23 you have to actually take into consideration when 25:25 designing email campaigns on a mobile device as well. 25:27 So, I mean, I turned to talked about this considerations as being fat finger UX. 25:30 [LAUGH] I gotta tell you, is a, is a thing. 25:34 Yeah, and I'm so sorry. 25:36 You keep knocking your fingers, it's is fine. 25:38 >> Smile, smile finger. 25:39 I know. 25:40 >> You're really fun. 25:40 And, the thing is like, we didn't, we didn't have to, 25:41 we didn't necessary wanna create like a whole new set of guidelines. 25:43 We, instead looked at vendor docs, we instead. 25:47 Sort of like, just sort of worked with other, like, the email 25:50 clients themselves to just kinda work out what we should do right. 25:53 For instance one of the vendor docs is the Apple's usability guidelines. 25:58 They basically said flat out, if you wanna tap something, on, on a mobile device 26:03 and, just don't make the touch area smaller than 44 by 44 pixels. 26:08 Now, if you think about a lot of email campaigns that you get. 26:14 What is this, a cloud of links? 26:17 And then on a mobile device, that cloud of 26:19 links becomes really, really, really small and very close together. 26:20 >> [LAUGH] 26:23 >> And there is absolutely nothing more irritating for me personally than 26:25 wanting to go to this link and then accidentally tapping on that link. 26:29 You know. 26:33 To just try to work around that like, create 26:33 bottoms that are big, like sort of obvious and- 26:35 >> And when you misclick something, how many times are you 26:37 guys, and be honest, likely to go back to that email? 26:41 You're probably not. 26:44 You're probably gonna get frustrated and be like 26:44 forget this It's just too difficult to deal with. 26:46 >> Yeah. 26:49 I'm looking at, I'm like, oh wow, I'm on Facebook now. 26:49 I'm just gonna do something else over here. 26:51 >> Yeah. 26:52 >> Right? 26:52 That stuff happens you know. 26:53 That's just how we exist. 26:53 The other thing to keep in mind that's important is that on 26:55 iOS devices, all font sizes you know, on Apple mail and what not. 26:59 Also on mail tend to get bumped up to 13 pixels, that's there baseline. 27:04 So if your having any text smaller than that, a it won't be readable 27:09 and if you have any layouts that are really like how do I put it. 27:13 Very much designed around you having small text. 27:17 Ultimately things will start getting wacky, right? 27:20 You know, like. 27:21 >> Right, right. 27:22 >> Things will start breaking to pieces. 27:22 >> Hm, that's something we actually considered as 27:24 well when we actually did our mobile redesign 27:26 of our emails campaigns, to where we looked 27:28 at, really, what was a more readable font size. 27:31 On a mobile device, so, you know, we went kind of looking at two different 27:34 versions here, of like, well, is it 21 points or should we do 36 points. 27:39 21 points, it turned out, it was a little too small. 27:44 It didn't, you know, it didn't really have that impact that we were looking for. 27:47 So we went to 36 points, and that's kind 27:50 of been the standard for our own email campaign since. 27:52 >> Yeah, I mean even then, 21 points is still pretty, pretty small. 27:56 I mean my rule thumb is just like phones can never be too small. 27:59 >> [LAUGH] 28:03 >> Like seriously they just, text can't be too small on, on mobile in my impression. 28:03 >> Right. 28:07 >> So, I mean we'll just wrap up on a couple of nice notes. 28:09 Again, I'm a marketer. 28:13 I'm always asked to justify things for, 28:13 for clients and bosses and things like that. 28:15 How do I? 28:17 I want to redesign my MLU setters. 28:18 What, what do I do? 28:20 What do I do? 28:20 You know, how do I get it across the line. 28:22 I always like to go to the numbers You know, we've, we've done surveys. 28:24 >> Look at the analytics. 28:27 >> You know? 28:28 >> Look at where your readership is. 28:28 >> Yeah. 28:30 >> And you should make your design 28:31 decisions based upon where your readership is. 28:32 If it's 50% on mobile. 28:35 That's what you should be considering as a priority. 28:38 >> Yeah, and also the fact that people just kind of, if 28:41 they, if they get upset by the experience, they, they unsubscribe, like. 28:45 >> Yeah, I know. 28:49 >> That's the thing in one sides you're making things good 28:49 and at the same time you're trying to prevent the bad. 28:51 You know. 28:53 Mobile optimize emails tend to perform better. 28:55 And Ryan, you're a nice person. 28:58 >> I'm just a nice person. 29:00 People will like you for sending them a really nice, normal email. 29:01 >> Yeah, and none of this business. 29:06 >> None of that. 29:07 None of that. 29:08 >> None of that. 29:08 I hate that, you know? 29:09 So a quick one, there's you know, there's a really great agency called DAG. 29:10 They, they do a lot of mobile optimization, 29:15 both for web sites and for, for email. 29:17 They looked at their analytics, they saw that 6% of 29:20 subscribers were using mobile devices, you know, and they did 29:22 the thing that marketers love to death and that's actually 29:27 ran an AB test when they did their redesign you know. 29:30 Like I love this shit, it's great. 29:32 And they found that between the two 29:34 versions the kind of old version, which required 29:36 the pinching and zooming, and the new version 29:38 just like as you can see one column. 29:40 Like quite easy to read you know, almost 8% more clicks. 29:42 Wow. 29:47 For us that's a big deal. 29:48 Re-engagement which is like you're playing with the, interacting with 29:49 the email for more than ten seconds which is an 29:52 eternity on email end, went up phenomenally and [UNKNOWN] has 29:54 a huge list so you can imagine how many more visitors. 29:58 Basically, saw this and actually went through 30:01 their online store and, hopefully, bought some shoes. 30:03 I know you have opinions about the shoes, but I like them, okay. 30:06 >> Why? 30:09 The Crocs? 30:09 I don't know. 30:10 But, beautiful e-mail capaign. 30:10 >> Beautiful e-mail capmpaign. 30:12 >> Bar none. 30:13 Very fabulous. 30:13 Shoes and [CROSSTALK]. 30:14 >> Oh yeah, well that's a different story. 30:15 We can fight about that. 30:18 [LAUGH] And they also made a lot of happy people in the process. 30:19 I was happy, I, I'm happy when I receive their emails, like it's just so easy. 30:22 >> Right, and, and when you have happy customers and 30:26 happy readers, you're actually creating a more consistent brand story. 30:27 >> Hm. 30:31 >> Because when you're, when your e-mails match your brand and your site and that 30:32 experience is carried throughout, that creates a 30:37 better brand story and it remains consistent throughout. 30:41 >> All right. 30:45 So really, at the end of the day we want you to go out, 30:45 we want you to create better e-mails, 30:48 because you can, because you can experiment. 30:49 And you know we've found that only 11% of emails that go 30:52 out, actually have any sort of mobile considerations thrown into them like media 30:55 queries, or a fluid layout, or decent font sizes, like only 11%, 30:59 most of the emails that are going out right now just look like- 31:03 >> Crap [LAUGH]. 31:05 >> Just look like 31:05 rubbish, that's why people hate them, that's why I don't wanna read emails. 31:10 They look awful in there, they don't have too much interest 31:14 in them people don't think about the content too much and stuff. 31:17 >> Right. 31:19 >> Get out there and experiment. 31:20 >> Right, and look for tools. 31:21 Look for the things that's gonna help you in your workflow. 31:23 I know, we recommended a couple of tools, but you always have to find the 31:25 best tool, and the best thing that's actually 31:29 going to help you in the long run. 31:31 >> Yeah. 31:33 >> And so, you do, you only do that by 31:33 actually experimenting, and looking at new things, and trying them out. 31:35 And finally things will never be pixel perfect like you just can't do that. 31:39 You can't have something look just like that and not 31:42 look and just look just like that like on an 31:45 Android device and then mail in Iowa and as you're 31:48 like you just have to be a little philosophical just like. 31:51 >> Right. 31:55 >> The web today is all about giving up control. 31:55 You're never gonna get 100% pixel perfect but, we're 31:59 gonna try to get you there as best as possible. 32:03 >> And create a good experience. 32:06 That's the point. 32:07 >> Exactly, and a great email with happy customers. 32:07 >> So yeah, go on. 32:10 Become an email hero. 32:11 Yeah, do it. 32:12 We have an amazing email community that creates resources you know, both ZURB 32:14 and Campaign Monar, we both have blogs where we basically just email geek out. 32:19 It's incredible,you know we talk about these 32:24 failures that we've had, and what you know- 32:27 >> Our horror stories, our ghost stories. 32:30 I teach a class on it for ZURB University. 32:32 We have product design lessons that teach you 32:36 how to make better emails and better web products. 32:38 >> And we take part in email def, dez, sorry, design conferences. 32:41 Who imagine that sort of thing would actually happen, you know, it's crazy. 32:44 Anyway, hang out with us 32:48 >> Talk to us, we've got free stuff, I've got some 32:50 tee shirts and stickers, if you have questions, I'm, we're free to. 32:53 We're, we're, we're more than happy to field them. 32:57 >> And, free ice cream this afternoon so be there with your worst email nightmares. 32:59 >> [LAUGHS]. 33:04 >> All right. 33:05 Thanks everyone. 33:06 Thank you very much. 33:07 >> Thank you. 33:09 >> Happy lunch times. 33:10
You need to sign up for Treehouse in order to download course files.Sign up