Join email design experts Logan Baird (Design Services Lead, Emma) and Kevin Mandeville (Product Manager, Litmus) as they dive into the latest trends hitting today's inboxes, talk HTML design hacks, and answer your burning questions about all things email design. You won’t want to miss it!
Jamie: Hello, everybody. I’m Jamie Bradley. I am here with Emma, I’m here with Logan. He’ll introduce himself here in a moment. And that’s Kevin. Thank you so much for joining us today. I work here on the marketing team at Emma Email Marketing. And, yeah, I’m gonna be your host. I’m gonna ask questions to these guys. A bit of housekeeping before we get started. We will send a recording. So if you have to hop off or if you just are thrilled and you wanna share this with all your friends, you will get that in your inbox. Do not worry. You’re also gonna be muted throughout. So we will be the only people babbling at you. But please type questions into the GoToWebinar chat. And, also, you can follow along on Twitter, we will be following our Twitter here in Emma, because we are the hosts today, so @emmaemail, #RealEmailTalk, if you have questions or if you just wanna say, you know, quotes from these guys, whatever. You’re free to do that. We’ll be paying attention there.
And what is Emma? We are an email marketing service provider based in Nashville. We have offices in Portland, Melbourne, New York, Chattanooga, I mean, we’re all over the place. And we provide best-in-class email marketing solutions for people all across the U.S. and Australia as well. Pretty nice. And we are joined here today by Litmus. They are the best, I wrote it down, the best web-based testing and analytics application for designers, marketers, and agencies, and they integrate seamlessly with your ESP. They integrate seamlessly with Emma. We are very excited they’re a partner. And I’m really excited to have Kevin, who’s a product manager from Litmus. So, Kevin, introduce yourself. Tell these lovely people anything we need to know about you. Uh-oh, hold on, you’re muted. Let me unmute you. There you go. Should be kicking in soon.
Kevin: Yeah, here we go.
Jamie: There we go. Sorry about that.
Kevin: Sorry. It wasn’t working for a second there. All right, yes. Hi, I’m Kevin from Litmus. I’m a product manager at Litmus, working on Litmus Builder, if any of you have ever used that before. But just an overall email design and development geek, love talking about HTML, email, and all of the really cool things you can do with it. So I’m excited to be here with Emma today. Thanks for having me. And I’m just ready to see what happens when we stop being polite and start getting real, you know.
Jamie: I love it. Logan.
Jamie: You go, get real.
Logan: All right. I’m Logan Baird. I’m the design services lead here at Emma Email Marketing. I have the great joy of getting to work with Litmus and their application pretty much every day, and we use it extensively. So Kevin Mandeville is a personal hero of mine. So I’m very grateful to have him here, where we can get real, get real talk and real about real things, mainly email things.
Jamie: Mainly, not all of them, surprise. Yeah, lay it on us. So we’re gonna go through a short presentation, just to show you guys some examples, some trends in the industry, all that good stuff. So Logan’s gonna start us off there. Kevin, you can jump in, Keller commentary, so really short. And then we’re gonna get to your questions. So I’ll be scooping this up, don’t mind me.
Logan: Scooping it up.
Jamie: I’ll be over here, scooping.
Logan: Two scoops of questions.
Jamie: Yeah, yeah. So, Logan, take it away.
Logan: Well, folks, it’s been a really momentous year for email design and development, and really kicking that off, in a way, it’s been the latter half of the year, has been the Litmus partnership with Microsoft, which is a huge deal. And, Kevin, so for our audience who probably may not at all, everybody, be aware of kind of how big a deal this is, could you give us a little bit of framework for this and tell us about it a bit?
Kevin: Sure. So, at the Email Design Conference we run every year, we were so happy to announce an official partnership with Microsoft to help improve their HTML rendering. And this was really an industry first, because this was the first time one of the major email clients had ever partnered with anybody in the email community to actually improve their rendering. So Outlook, historically, they’re notorious for really bad rendering when it comes to HTML and CSS support. And they’re partnering with us, Litmus, as sort of a funnel to find out actual real-world use cases of emails and how Outlook doesn’t render them as expected. So we’re happy to have…there’s four new email clients that are coming into Litmus to test in, thanks to Microsoft. It would not be possible for us to provide those without Microsoft’s help. And we’re also introducing sort of a feedback channel, so people can actually submit bugs and real-world problems that they’re facing with Outlook rendering. And then that actually gives Outlook hands-on examples so that they can help diagnose the issue and make fixes, so that we don’t have as many problems to face on a day-to-day basis when we’re developing for Outlook. So we’re very excited about it. It’s really a world’s industry first when it comes to partnering with email clients to make email better.
Logan: That’s right because, prior to this, they were really focused on kind of just that Outlook end user experience, and they weren’t kind of interfacing with the people designing and marketing to people who are receiving in Outlook at all, right. So that was, like, a really big deal that they’re even opening that dialogue with you guys.
Kevin: Yeah. And it’s not just isolated to them. I would say the email development community has sort of been in the shadows for many clients. But, yes, that ended up being just sort of the focus for the, sort of, the end user of the product but not necessarily empowering developers, which is something that they have done for a long time when it comes to the web. But email had just been neglected for a long time. So very, very promising to see that they were sort of the first ones to make a big stride in that area and really make an effort, you know, and I can speak, just from personal experience, they really truly do care about this. And it’s gonna take time, but they very much want to make it, you know, the best clients to develop for.
Logan: Yeah. Well, and then, you know, shortly following them, of course, was Gmail, making a kind of big announcement of starting to support mobile-friendly code in the sense of media queries and a lot of, like, code that had traditionally not been supported. And they also sent their representatives to the San Francisco Litmus Email Design Conference, right?
Kevin: Yep. Yeah, there were a couple Gmail folks in attendance, which was exciting to see.
Logan: Yeah, it was fun. So in terms of, like, these developments for, kind of, the community, what are we looking at, like, kind of in the future here? Like, what are we talking about in terms of, like, what it means for people who are designing, developing, and marketing for email? What do you think, Kevin?
Kevin: Yeah. So the Gmail update is very, very exciting, especially because all these changes are already starting to happen now. And so we sort of get to see what we can already do in the wild, which is very exciting. For me, I definitely see that this is a start of being able to separate out HTML and CSS. Email developers have always needed to in-line their CSS, because Gmail, most notably, did not support embedded CSS or linked CSS. So we’re not necessarily gonna have 100% support moving away from that, at this particular moment in time, but I think we’ll be able to start to see us shifting to actual, you know, sort of semantic markup structure, where you can separate out the content from the styling and develop just like you would for the web, in separating out HTML and CSS. I think that’s a very big thing that we’ll start to see that trend start to take place.
Logan: In a sense, like, we’ll get to spend kind of less time having to troubleshoot and tweak the things that we’re coding for every, you know, single client, in the same way that we’ve had before, and spend more time on making emails that look better, that push forward what’s possible, right?
Kevin: Yeah, absolutely. It’s gonna make developing just much easier, easier to manage, easier to maintain, easier to update. So we don’t necessarily have to focus in on just getting things to work. We can go back to focusing on the actual design of email, which is very, very exciting.
Logan: Yeah. So we’ve got some examples that you and I both kind of put together, collaborated on. And so we’re gonna take a look at those. First, a bunch of the ones that you had sent over, Kevin, that kinda demonstrates some of, like, kind of, maybe the direction that we like to see email design and development going. So we’re gonna…
Logan: Aspirationally. So we’re gonna take a gander here. So tell me about the things you like about this email, Kevin.
Kevin: So this is a great email from Typeform, and one of the things that I love about this email is the typography that they used. You can see that they’re actually using live text in the email, and they’re using web fonts. And it’s just a very well-laid-out email. The typography really makes the design very nice, very easy to read, very scannable. The color they use for the call to actions really makes them stand out. And I just really love how well done it is from a typographical perspective throughout the entire email, all the different sections. So I thought that this was a great email example of using web fonts and typography.
Logan: Yeah. So let’s talk briefly about web fonts and why that’s a big deal. So, for a long time, we’ve stuck with what we had sort of considered the email safe fonts. And, by that, we really just mean fonts that are just so ubiquitous, so common, that you know they’re installed in everybody’s computer, right. And they are serviceable workhorse fonts. They are the Georgias, and the Arials, and Helveticas, and, Lord help us, Times New Romans, if at all. But so having web fonts and being able to use, like, Google fonts in particular, really kind of opens the door, because typography can make a big difference in the feel of a design. And especially when we’re sort of subliminally accustomed to seeing only a certain range of typefaces, so, like, seeing a new one suddenly, it makes a big difference.
Logan: Is that fair to say, Kevin?
Kevin: Yeah, absolutely. And you can still use, sort of, those fonts as a fallback for ones that are more system safe type of fonts. Those are great for fallback. But being able to progressively enhance using web fonts for clients where it’s supported, it’s supported in over 50% of email clients right now for web fonts. So it’s definitely something you’d wanna take advantage of in your emails.
Logan: Yeah. And probably something worth noting, so over 50% is primarily iOS and Apple Mail, right. And then we’ve got… So it depends a lot on your audience, like, if you know that you’re sending to a lot of clients that don’t use iOS or Apple Mail, it’s probably worth noting that these are not going to display in the way that you think. But since we know that that is a large part of the industry, and if you know that that’s part of your audience, definitely take advantage of those progressive enhancements. Design for that 51%, or is it 53% now, you know.
Kevin: It fluctuates month to month, but it’s around that.
Logan: It’s just like my weight, just a little up or down, you know.
Jamie: Holidays are coming.
Logan: But I dress aspirationally, like, you know, clothes shopping.
Jamie: All right, all right.
Logan: So talk about FontFont 71 from FontShop.
Kevin: Yeah, FontShop. So obviously, it’s good to see that FontShop is actually using good typography in their emails. There would be an issue if they didn’t have good typography in their emails, but they’re using web fonts as well. And I love here, because this is really the central point of the email, that the fonts are really sort of the key design element when you go through all the different sections here. And the fonts are much bigger than you would typically see in a regular type of email, because the fonts are the content for these emails from FontShop. So, again, just another great use of typography in email, especially because these use all different types of fonts in sort of showcasing the ones that they have available through their service. So I just thought this is a really unique type of email where you can see just a variety of different fonts.
Logan: That’s true, yeah. And the font being the product really allows them to showcase that nicely. That’s lovely. This seems really thematically appropriate, considering that we are almost at All Hallows’ Eve. Is this the invitation to your party, Kevin? Or is that…?
Kevin: No, not mine. It’s another one.
Logan: Okay, that’s disappointing.
Jamie: Can we come to your house?
Logan: Yeah, can we? That’d be great. So this takes advantage of some nice animation. What do you find compelling about this?
Kevin: Yeah. Well, first, I mean, this is just a great design, graphic design, all together. It’s a great theme for Halloween with the email, and it really embraces the scroll. It doesn’t care about the fold or anything like that. It really draws into that design pattern. And, yeah, the fact that they have all these different animated GIFs all the way down the email, very captivating. They’re personalized as well. It features some really high-end technology from JibJab that they’ve created to even be able to do that type of technique, which is very engaging, lovely design, and just being able to see the animated GIFs, personalized ones, all the way down the email, just very, very engaging.
Logan: Yeah. Now, so let’s see. And this is also an email that is taking advantage of, like I said, not only embracing the scroll but, like, multiple calls to action kind of all the way down. But keeping that, you know, placement really consistent, keeping kind of the visual cadence of it very consistent as well. Have you clicked on all of these? Have they engaged you with their email?
Kevin: I have not clicked on all of those, no.
Logan: That’s okay. There’s no shame in that. It’s good to know. And then, of course, “Narcos”, also a lovely use of animation. We love animation, because it really just sort of grabs the attention. And since we’re busy people, and you’re, you know, looking at phone and maybe looking away, and if there’s a little bit of something to draw your eye back to it, then it’s effective in kind of reengaging you visually. So, yeah, and this would be pretty similar, like, they’re just making a really nice use of that animation and keeping that call to action. Go ahead.
Kevin: And what’s different about this technique is that this is not an animated GIF. This is actually using CSS animation. So there’s a differentiation there between the actual method that they use to implement this type of animation. So there, you have the foreground images, and then you can even notice the background images. I know it’s a little, perhaps, jinky on the webinar here. But it’s moving them, it’s sort of zooming them in and zooming them out using CSS animation just to create that effect, a trailer-like effect for Netflix, which is perfectly in line with the service and the experience that they want to sort of create. So just a very well-done implementation of this technique, one of the better ones that I’ve seen in email using this type of technique.
Logan: Yeah. So let’s chat for just a second about CSS animation. So CSS animation is similar to, kind of, web fonts, has similar support. And so, again, you know, you have to know your audience to know when you can kind of employ it. But unlike animated, so I’m gonna say “gif”. I heard you say “jif”, I hope that this…
Kevin: It’s actually “jif”.
Logan: Oh, man, I didn’t know that.
Jamie: That’s peanut butter.
Kevin: You can say it, as long as you just know you’re wrong. And if you wanna say it that way, just acknowledge that you’re wrong, and we’re good, because you are wrong.
Jamie: I feel like this would be a good time for an audience poll. So is it spelled phonetically, use the #RealEmailTalk, @emmaemail, “gif” or “jif”? You decide. We’ll weigh back in.
Logan: Yeah, we’ll let the public decide. It’ll be good.
Kevin: Well, the public’s wrong too.
Logan: All right, all right.
Jamie: We’ll see about that.
Logan: Simmer down, man, simmer down. So, yeah. So this allows for, like, animations that aren’t possible with GIFs, and it kind of explores, it opens up the possibilities of kind of engagement. But, again, you have to know your audience. You have to know, like, if these things are going to render. Thankfully, the fallback is usually just a static image, similarly to Outlook GIF support, right. It just falls back to a single frame. But, yeah, an excellent, excellent example here.
We’re gonna talk about interactive email a little bit, because, certainly, I think, 2017, we’re gonna be seeing interactive email kind of surface even more so. And so let’s, yeah, just kind of showing, like… So we’ve got this “TAP to interact,” which I will. Small bone to pick with this one, it’s like, if you have to kind of explain how to use your email, then maybe you need to kind of reexamine how intuitive that design is. But it’s still a great example of, like… So, as you can see, by hovering over these different examples, it pulls up different slides and encourages that interaction. What do you like about this, Kevin?
Kevin: This was really the first interactive email that sort of exploded on in the scene that really sort of went viral from, at least, my perspective. And that’s why I definitely, there are small things to nitpick, but you have to just give credit to the innovation for it.
Logan: Yeah, absolutely.
Kevin: And so, being able to sort of use this in the email, I love that it’s really well done. You can make it… If you resize it to be responsive there down to mobile, it scales down nicely as well. I love that they don’t duplicate any of the content at all to achieve this email. It’s all just sort of the same content. So it’s just really well done, and it sort of has those sections fixed, and they’re just sliding them as the buttons are clicked on or tapped on, whatever environment you might be. And so it’s a very similar pattern to what you would see with the carousel on the web, and the coding, especially, if you take a look at the code and the development, it was just so well done. So those are the things that I really like about this B&Q email.
Logan: Yeah, absolutely. And knowing that it’s kind of the…it was one of the first, you know, to really kind of push that boundary, is really exceptional. All right. And then our friends at Nest, we love Nest, and this is one, I think, that our friend, Eric Lepetit, yes, coded. Yeah, talk about this one a little bit.
Kevin: Yeah. So this is, again, another image carousel, which shows off Nest, which is just a gorgeous product all around. All of their products are just gorgeous. So being able to show the product off in this type of format is very effective. And, again, this was just really elegantly done in terms of the design, gives a lot of white space to breathe and really focus and showcase the product itself. And just the code of it and where this was able to supported was just very well done. I mean, this was even working in Gmail, back when it supported checked pseudo-selector and whatnot. So just a very well-done email, both on the design and the development side, for this implementation.
Logan: Coincidentally, the Nest emails always make such a good use of white space that makes their emails kind of eminently parse-able. Like, you can skim it, you can quickly catch the parts that you are interested in. There’s plenty of room for the brain to breathe and kind of take in that information, nice calls to action, and they feature the product really well. You know, it’s a great example here. All right.
And then here is some real fanciness here, and this is so striking the way that the colors come in. Were you fan of paint by number sets as a child, Kevin?
Kevin: I actually didn’t do too much coloring as a child, believe it or not. Yeah, I’d like to color outside the lines and all that.
Logan: And then you ended up in email support.
Kevin: It was too restrictive for me, you know. I needed to go freehand and go do my own thing. With this email, this just sort of does all of the above for me. I mean, here, you see, they are using animation, with this background image which fills in. So very striking, just visually striking, and this is done by the collaborative font. As you scroll down and look at the rest of the email, just really, perhaps, the most unique design of any email newsletter that I consistently get on a regular basis. Just great typography, great white space. It doesn’t have your typical sort of, like, 600-pixel width with, like, you know, a calm here or there. It’s always, like, big fonts, big bold fonts, great use of typography, big bold images, a ton of color and color sections. So I just always love getting their emails, because it’s just always unique and stands out from everything else that I get in the inbox.
Logan: You can definitely see this. This is one that, as soon as you sent this example over, I subscribed, basically, right away, just because it was very inspiring. And we need people, like, pushing the boundaries like this to kind of imagine and to see what is possible. But, yeah, it’s gorgeously done, such a bold use of color. We love that. Awesome. Well.
Jamie: Are we ready for questions?
Logan: Yeah. I’m… Just about, yeah.
Jamie: Oh. Do go on. I’m just chomping at the bit.
Logan: I know, I know. There are so many good questions. We’re gonna jump into it.
Jamie: This poll is good too.
Logan: Yeah, in just a moment. Oh yeah, I definitely wanna find out about the poll here. So I’m gonna run through just a few examples that I particularly enjoy as well. Charity: Water is an Emma client. We love them. I think, they also make use of Google fonts, web fonts in theirs, but they do such a lovely job of keeping their emails really focused. There’s a lot of white space. They also keep it very simple. It’s kind of clear recognition, then jumping right into, usually, fairly brief copy, encouraging people to just sort of engage with it. And then they always pick very striking imagery. And they play, they test a lot. Sometimes, they put images at the top, some at the bottom, sometimes, you know, kind of from side to side. And just some checking out and then adapting. So we love that.
And then I’m just going to hop over here to Burberry. Burberry is another brand who, I think, is doing such an immensely great job of pushing forward what’s possible. And this is, while it looks like a GIF, #gifjif, is actually, like, a CSS kind of slideshow that they put together. And, again, with all the different colors and the different textures kind of flashing across the screen it’s, like, really visually engaging. And then, below it, like, just keeping those calls to action pretty simple. So they do a great job of, like, getting that visual engagement, pushing forward the technology, and getting people to click through. What do you think about these scarves?
Kevin: Yeah. Burberry, they send great emails, great personalized emails. There’s probably about five others that we could have featured here today over. So I definitely recommend subscribing to their emails to get them, because they’re always doing cool things like this, especially with sprite animations like this.
Logan: Yeah. It’s good stuff. All right. And then one more example, and then we’re on to the questions, I think. So I would really love to call out, so the good folks, Camille and Mia over at table tr td. They just consistently play. They take, like, what’s possible, and they play with it. And so they sent out, this is one of their weekly emails, and they encourage people to interact with it. And it’s done in a way by, you know, kind of referencing bubble wrap. So they encourage people to do that and then to tweet it, you know. And, like, I made a smiley face. It was not probably my best work, but it was something. And then send this out. And so it’s something that doesn’t require a lot of instruction, but it encourages you to play with it and interact. And so having folks like them, who are just putting out things for fun, they’re really just doing this to contribute to our community, which I love, and really kind of allowing us to see what’s possible by playing with it, yeah. So did you make a bubble wrap picture?
Kevin: I did. And definitely, table tr td, again, yeah, it’s just an experimental playground for email hacks and concepts. So definitely subscribe to that too. It’s a ton of fun. I look forward to getting their email every time they send it.
Logan: Every week. I think, yeah, it’s having those people who are just going in and seeing, like, “Oh, maybe we’ll try doing this.” And then it gives, for those of us who are coding for clients or creating for our own brands, it’s just ideas of, like, “Oh, yeah, this is engaging without overdoing it, or this is a way of using this technology.” So it’s fantastic. We love them. All right.
Well, we’re gonna jump over to some questions here.
Jamie: All right. Sounds like we’re gonna take some questions. I think, first, we’re gonna check in on this little poll.
Logan: Oh, yeah, let’s check in on this little poll then.
Jamie: There’s a lot of people that are wrong, according to Kevin, 80% of people. Argument, Rebecca had two arguments for “gif” over “jif”. Argument one, it’s “gif”, not “jif”. Argument two, it stands for graphics interchange format, not jraphics interchange format. Rebuttal?
Kevin: Yeah. It has nothing to do with the pronunciation of the acronym for it, so.
Logan: Oh, okay. It doesn’t have to do with that at all, Kevin, no? It doesn’t have to do what the actual letter’s making. Okay.
Jamie: Well, we want Kevin happy. So answer these questions.
Logan: Yeah, no, no, that’s great, Kevin.
Jamie: So it’s “jif”, everybody. All right, all right.
Logan: Was that wink way too broad? Do you think it was too…?
Jamie: I just had something in my eye. No, very fun poll, thank you.
Logan: Yeah, let’s jump into these questions.
Jamie: We’ve got some good ones. So, ooh, I tried to put them in order, but they’re coming fast and furious. We only have about 30 minutes left. So if we don’t get to everything, maybe we can figure out some ways to get your brainy questions answered.
Logan: I think we can.
Jamie: Here’s one. So we talked a little bit about flexibility, playing within the space. We have a lot of marketers on the line. I, myself, am not a designer.
Jamie: No. So Megan wants to know, from her vantage point, what is an optimal number of messages? You know, we talked about embracing the scroll. Our content blocks or sections for consumer emails, is it best to stick with one-focus call to action, or can multiple CTAs ever work well in one email? I think there’s kind of two things at play. There’s the design elements, and there’s different calls to action. So what are your…think…[cross talk 00:27:57]?
Logan: So, as with many things, there’s not a magic bullet for this, right, but what we’ve found is that emails that have maybe, like, a more singular focus, right, so, like, Patagonia had one that we had used on a previous webinar where they had one kind of clothing line, and they had multiple calls to action, but each was, like, past a different kind of engaging visual element. So whether it’s kind of showing an outfit together, or then showing, like, a video of the outfit in use, or, you know, showing those individual elements. And so you could choose kind of how much you want to engage with that, and they were very successful with that. But keeping it focused, I think that focus is kind of the key point there. So you wanna prompt focused action with email marketing. So you use the visual elements to draw the eye down to where you want them to click, and you wanna keep where they’re clicking fairly concise. You don’t wanna get them too distracted, because we get very distractable. Yeah, Kevin, do you have any particular thoughts?
Kevin: No, I mean, I agree a lot with what you said there. The more focused your email is gonna be, the more clicks you’re gonna get. A lot of studies have been done on this and shown that that’s the data. Not to say that you should shy away from doing, you know, more call to actions and featuring content, but you should definitely have a purpose and be as concise and focused as possible for everything within an email.
Jamie: Yeah, we send, like, a roundup email about webinars. There’s technically three different webinars that we’re sending people to, but there’s a general theme to all of those outlets.
Logan: Yeah, it’s not too disparate.
Jamie: Exactly. Erin has a great question, and I like her phrasing so I bumped it up. There seems to be a circular discussion among marketers about whether or not to use image-heavy email designs, which I’m sure you guys have lots of thoughts. What is your take on this? How can you improve deliverability with image-heavy emails?
Logan: Gosh, Kevin, how do you?
Kevin: Yeah, it’s a great question. So I am firmly in the camp of using live text, and so actual HTML text, as much as you possibly can, away from image-based emails. There’s a variety of different reasons for this. Number one is image blocking. A lot of users will actually have images off by default. And so, if you’re using an image-heavy email, it will block a lot of the content that you can see. And you lose…. You can design for images off, but it’s much harder, more tedious. So you sort of lose that aspect to it. It reduces low time. So if you just have a ton of images, right, that’s more assets that the end user has to download, so your email could be slower to load, slower to open. And just, you know, if you use actual real HTML text, it increases accessibility, which I know isn’t necessarily the number one thing on people’s minds today when they’re developing email, but it’s definitely future thinking. And so being able to use semantic tags, like H1 for headings and P tags for your paragraphs, and things like that, it’ll help with accessibility, writing actual semantic markups.
So I’m sort of firmly on moving away and only using images when they actually need to be images or background images or something like that. And I know the big argument is obviously always around keeping a brand on style, and because things aren’t supported everywhere, or, “Well, we need to use this font,” my argument is just to always build a solid base foundation and then progressively enhance on top of that. And especially if you know your audience, a lot of the people who make that type of argument probably already have an audience where they could get the progressively enhanced experience anyway. So that’s just sort of my view, and I’m always gonna recommend towards using actual semantic markup as much as you possibly can and moving away from an all-image-based type of email.
Logan: Sure, sure. Yeah. I think the accessibility point is really an important one too. Like, you wanna be inclusive in your marketing, and you wanna make sure that people who are using screen readers or people using assistance devices are getting your content too, right. Like, they’re gonna be valuable subscribers and clients and customers also. And, maybe… Like, 43% of email clients have images off by default, I think.
Kevin: Yeah. So we did this study at Litmus. This was before Gmail started caching their images. So we were able to capture some unique data that we wouldn’t be able to get as fine-detailed as we could today, because it’d be a bit skewed now. But when we did it at that time, it was just 2 years ago, we found that 43% of users actually had images off by default. So that’s a significant portion. I would say that’s definitely lower today because Gmail since switched to being…or, having images on by default. They used to have images off by default. So it’s definitely lower today. But it’s still a good portion of your audience, you know. You have to treat images off really as a client. If you’re developing for something like Yahoo Mail or Outlook.com or something that only has a few percentage points, images off is a larger client when you compare it to that. So it’s definitely something you need to take account for when you’re designing your email.
Logan: Yeah. And so, with this, we see, like in many other places, it’s about knowing your audience, right?
Logan: It’s about having those statistics, knowing kind of where your emails are getting opened, and designing for that as much as anything else.
Jamie: This is a good transition. Justin, who’s on the line, wants to know, are animated GIFs supported by all email browsers? Obviously, we saw a lot of examples that use CSS animation, but a lot of them, also, were just GIFs. Is there a way to set up a static image as a fallback if it doesn’t load properly? And what are your thoughts on that?
Logan: Well, that’s a good question. So Outlook doesn’t support animated GIFs yet. I mean, we have hope for the future. And the main thing when designing for that is that it’s only gonna show the first frame of your animation. So, like, you wanna make sure that, if all of your important content is an animated GIF, that you are including…yeah, which you don’t wanna do, you wanna use it for enhancement, not for your primary content…is having any important information, like, in that first frame, even if it’s kind of showing the full image for a quick second in that beginning of that animation. Yeah, what do you think, Kevin?
Kevin: The alternative approach you could do, which is a little bit more advanced, but you could use Microsoft Outlook conditional comments to show a different static image just for Outlook 2007 to 2016, where the animated GIFs are not supported, and then just use the regular GIF for other clients. So you could use some hacking there to serve two different images.
Logan: That’s solid. That’s a great tip.
Jamie: I didn’t even realize that we just did a “gif-jif” live thing.
Logan: Yeah, we did.
Jamie: Now you see where we stand.
Jamie: So keeping with the Outlook theme, obviously, Outlook, big news, with Litmus. And so we have a ton of questions specifically about Outlook. That’s kind of the problem child out there, or was, you know, a little bit, but working on it. So Warren wants to know, how do you have best practices for Outlook? How do you feel about space PNGs? Is there a new list of support CSS tags? So that’s a lot of words…
Logan: That’s, like, three questions in one.
Jamie: That I don’t understand. That’s a lot of things. So, first and foremost, space PNGs, that sounds fun, so maybe explain that. But then, also, sort of, what are maybe some of those nuances of ways that you can use Outlook in its current state, you know, to get your message across?
Logan: Tell us about space, Kevin, and space PNGs specifically.
Jamie: Keep doing this, it’s like storytelling, Papa.
Kevin: Yeah. So space PNG is referring to space or GIFs, they could be a PNG too, I guess, but historically referred to as space or GIFs, basically, as a method to use a transparent one-by-one-pixel image that you can then define any dimensions that you want to essentially create spacing within an email. And that’s a very old hack around Outlook which doesn’t work well with a lot of…or, historically doesn’t work well with a lot of CSS. I personally don’t like using that just because, again, you’re using images when you don’t really need to be. I prefer just to use CSS padding, which you should be able to use effectively on table cell elements for Outlook. When you’re dealing with Outlook for 2007 to 2016, which is the most problematic rendering, which uses Microsoft Word as a rendering engine, if you do everything at the table cell element for your styling, and you’re new to email, just put all of your styling at the table cell level, and that will really make things much, much easier. So if I had to tell somebody just one tip, and it’s something that I wish that I knew when I started, and it’s a quote that I’ve come up with, I say, “TD or GTFO,” which is table cell or get to fixing Outlook. That’s what that stands for. So, yeah, just being able to use tables and put everything at the table cell element, wrap everything in its own table cell, until you get to learn more of the quirks, that should really help you with your rendering.
Logan: Solid advice.
Jamie: Very solid.
Logan: I’d take it to heart.
Jamie: Okay. Oh my gosh, there are so many good ones. Gmail, we mentioned Gmail earlier. Patrick Clark wants to know, does anyone on the panel, not me, I’m not good with this, have any info regarding when Gmail will be responsive for iOS devices?
Logan: For iOS specifically, I don’t think we’ve got any firm dates on that currently. Like, we know, like, unless you’ve got secret information, I think our sources are the same.
Jamie: You are each other’s sources.
Logan: We just refer to one another constantly. Yeah, Kevin, do you have any other dates on that?
Kevin: No, there’s no dates. We don’t have any actual dates told to us about when it’s coming out. Supposedly, Gmail iOS support is supposed to be coming. It’s just not updated yet. We actually do have a live roll-out chart over on the Litmus blog, which shows sort of where the status is for all of the Gmail accounts and clients. So you can see which has the update and which doesn’t, which may be a point of confusion for many users who are unsure as to why they are or are not seeing the update.
Jamie: Awesome. Lauren has a great question. It kinda goes back to the calls to action button, and I also just wanna know your thoughts on it, both of you. We focus our call to actions always in a button in our emails, but also include the link in the photo or text and live text. Is a button not the best way to go? So what are your… We talk a lot about buttons, but what’s the current trend? Are buttons thumbs-up, good?
Logan: It’s a hot button.
Jamie: Yeah, it’s a hot button gust out there. Is that still the best way to call someone’s attention?
Logan: I mean, we already talked about images, right. So we’ve talked about how, you know, that… So having your primary call to action in an image would be problematic, because not everybody is gonna be seeing that. But, on the other hand, like, even nicely styled text doesn’t quite call out in the same way as a button. For one, with a button, you’ve got more surface area to be either tapping on or clicking with a mouse, right. And so it’s just going to draw more attention to itself. Now, having backups as…well, we definitely wanna focus the calls to action, so you wouldn’t want that image and the text link to be linking other places.
Logan: There’s nothing wrong with, like, having kind of those links as well, and seeing how your audience engages. Yeah, Mandeville?
Kevin: Yeah. I mean, it all comes down to your design and your use case. So they can be used properly in both scenarios. So, yeah, it just sort of comes down to what you’re design is, what your content is, and what you’re trying to achieve. But I’m sure, yes, if you just A-B tested, like, a link versus a button for your primary call to action, buttons are always gonna be outperforming.
Logan: Yes. If you think about, like, on your phone, that if it’s for trying to get your thumb onto a text link versus, like, a button that takes up a lot more space, it’s kind of a no-brainer in that sense. But, as always, test, test, test, and know your audience and test. You’re gonna get really tired of me saying… Kevin won’t let me say it to him anymore, so.
Kevin: Well, especially, you know, in talking about buttons on mobile as Justine Jordan, my colleague at Litmus, would say, “I like big buttons, and I cannot lie.”
Jamie: I tend to agree.
Logan: Yeah, she can’t. Fun fact about Justine Jordan, she’s unable to lie.
Jamie: So a lot of our registrants seem to think that you guys are just wise sages, like Nostradamus of email. You can see into the future. We’ve a lot of questions about the future of email. And your opinions, yes. Nikki wants to know, and I wanna know too, your thoughts on emails being looked at as the breakaway from Facebook dependence. What do you think about that statement? What do you think about our relationship to Facebook and email and where it’s headed?
Logan: Very complicated relationship with Facebook.
Jamie: It’s a status.
Logan: In general. But I think, so, as we move into more interactive email, and there’s a way of kind of personalizing email, but people have more control over how they interact with email. You have more control over, like, what you choose to open and what you choose to keep close, what you engage with more. And for Facebook, all of that’s fairly hidden. I mean, you can kind of, like, you know, start to weed out your content a little bit and hide certain, you know, people from your feed. But with email, you get a bit more agency, I think, and a bit more control over that. I feel that as kind of advertising becomes more and more ubiquitous and more common, like, being able to…for people having a voice in, like, how often they’re receiving things and when they’re receiving it, speaks to email maybe being a really great alternate channel. That’s my thought. Kevin, do you have thoughts?
Kevin: Oh, I thought email was dead, guys. I thought that it was dead.
Jamie: Oh, man.
Kevin: It was over.
Jamie: I gotta learn how to do something else.
Logan: Yeah. We hear that every year somewhere. And yet, here we are, online webinar.
Jamie: The ROI is…
Kevin: Now, email is just always gonna outperform. It’s just more intimate, more personal. And it’s great on the creator side as well, like you said, because we do have more control over everything. So social media and all of that, it’s still very important. There’s still a very big place for it in our marketing play. The inbox is people’s home. That’s where they live. So it’s always gonna be important.
Jamie: So, on the flip side of that, companion question, this is from Andrew using the #RealEmailTalk.
Logan: Thank you, Andrew.
Jamie: This is on the flip side. This is with social media. This is sort of, I think, hinting more towards the Slacks of the world. There are several new applications being introduced for inter-company, inter-organizational communication. Is there a desire to bring your technology to additional communication platforms besides email? I think he’s talking more probably to Kevin than to us, because we’re doing email.
Logan: We’re doing email. Yeah, we kind of are linked to that.
Jamie: Yeah. We’re all in. So, yeah, what do you guys think about, sort of, the future of those sorts of tools as, you know, obviously, emails become less and less important for those types of communications?
Kevin: Yeah. Yeah, there’s definitely a shift, right, in terms of business communication moving away from email and to more, other efficient types of platforms.
Kevin: So there’s obviously a trend to that. But I think email is still always gonna win on sort of being that… Email is, like, the best notification service, because you don’t need to respond right away right now. You can organize it very well. And so, I would say, there’s just different use cases, and I think even a lot of other services have been trying to find that balance and, I guess, sort of that culture around responding to what you receive and how you receive it and where you receive it. So that’s sort of how I look at, you know, Slack versus email and those types of communications.
Logan: Yeah. I mean, it’s like, Slack and other kind of messenger sort of services, like, offer kind of more fluid ongoing conversations, so it spares us the kind of never-ending email threads, which can be kinda nice. But in terms of, yeah, those notifications, the important announcements, the summaries, the way of kind of presenting maybe the results of those ongoing fluid conversations in a way that’s easily digestible, right. We still want an email with all of that in it.
Jamie: I do, for sure. Great thoughts here. So Quinn wants to know, here’s another design question, and I think this is less about, sort of, the aesthetic and more about best practices for making sure it gets where it needs to go. So, in regards to the impact of design on deliverability, is there a magic number of images and links that we should stay under? Should we keep image sizes under a certain limit? And so this is… I know we get this question, like, anytime we have any design-related, you know, talk.
Logan: Yeah. Well, certainly, and I understand that, like, we want, the kind of structures we want, formats. We want to know, like, how many, and how many is too much and how many is too little. You know, and I hate to tell people that there’s no magic, because I believe very deeply in magic, yeah.
Jamie: He does.
Logan: I do. It’s embarrassing. But in terms of, like, number of images, like, there’s no magic number there. Now, we know that, like, for deliverability, so when we talk about email size, we talk about both, kind of, its loaded weight and its unloaded weight. Loaded just means you’re including the size of the images and that data size, right. And so we know that for, like, a loaded email, that you wanna keep it under, like, 700,000 kilobytes. That’s kind of a general rule of thumb. And you know for an unloaded email that, just the code itself, that you’re wanting to keep it under, I think, 102. Is 102 the cutoff for Gmail? Yeah, 102 kilobytes. So those are some hard limits. Now, how you choose to, like, create that data and, you know, build up that size, you’ve got some flexibility there. I know that, I mean, generally, we encourage people to keep it lean, to keep just the code and just the images in there that you really need. Do you have strong thoughts?
Kevin: Oh, yeah, the smaller, the better. I mean, the less a user has to download in the end, the better. I would say too, you know, there’s a distinction between deliverability and just performance, right, and load time.
Logan: Right, yeah.
Kevin: I mean, when we talk about deliverability in email, we’re talking about can you reach the inbox effectively. And that’s the actual sending of the email from a service, and that deals with deliverability. When we’re talking about image size and whatnot, that doesn’t directly impact deliverability. It impacts performance and how quickly it can load. But it doesn’t relate specifically to deliverability. It only relates to deliverability if people then get angry at how long your email takes to load, and they mark it as spam, or unsubscribe, or whatnot. And then that’s when you start to feel the effects of those practices affecting deliverability. So, yeah, just always try to compress your images, compress your code, make it as lean as possible so users can download it as fast as possible, especially if you have a large mobile audience, where networks are slower to download with those devices. They just have limitations, it’s slower to download for them. And just create the best experience as possible for your users, because you don’t want to run into any issues and have a bad perception with them around, sort of, taking too long to download with these, you know, megabytes worth of images and whatnot.
Logan: That’s true, yeah. It’s something definitely to keep in mind with the mobile audience and those slower 3G networks, if you’re still in 3G, or even, God forbid, 2G somewhere out in the countryside.
Jamie: Yeah. If your audience is, like, on the top of a mountain, just be aware.
Logan: That’s true. Maybe you can just go to the mountain, I guess.
Jamie: Yeah. Email may not be your [cross talk 00:49:17]. Okay. I had a great one. Okay, Nicole, have you run into any issues with analytics when using web fonts? We have some team players that seem to think using it affects the open rate, which I have not heard. So, yeah, do web fonts affect opens?
Logan: I had not heard anything. Kevin, what have you heard?
Kevin: I am not familiar with that myself, or at least experiencing it. I do believe I have seen a discussion around that. So I know we have, like, the Litmus community, which is just a forum for people to ask questions. I could probably look that up after. I think there have been discussions about this before.
Kevin: But I’m not sure of the details or the intricacies of it.
Jamie: Absolutely. And as a note, there’s quite a few people too that have some really specific, granular Emma questions, and we’ll be sure be reach out to you, if you’re a prospect or a customer or whatever you might be out there on the line. We’ll make sure you get some help.
So here we go. Oh, I like this one. This one is a little different from Erin. Do you have any recommendations for training or certification for marketing generalists who want to refine their email design skills? What are you go-to resources for when someone who isn’t exactly a pro developer or designer wants to throw their hat in the ring? What do you say?
Logan: Well, so there are a lot of really great resources and emails that you can subscribe to. I think, like, table tr td, that we referenced earlier, like, have a lot of great kind of basic explainers on their site, as well as, you could join the Email Geeks Slack community, which is also a great resource if you’re wanting to kind of connect to a lot of great minds in this field, because it is such a niche. Nitch or niche?
Jamie: No, we don’t…
Logan: No, okay, we’re not gonna get to it. Another webinar.
Logan: A whole webinar.
Jamie: We should do polls.
Logan: Yeah, just polls, nothing but polls.
Kevin: Real Polls.
Jamie: I’ll check my dates. I’ll call you.
Logan: Yeah. So, I mean, what sort of resources do you…? You know, do you remember, like, or what do you refer to now, Kevin?
Kevin: Sure, yeah. So, obviously, looking at the Litmus and Emma blog has a ton of great content for all things email design, development, and marketing. You know, again, not to pitch Litmus too hard, but we have a community. So if you ever have any questions, it’s just a great, you know, it’s like a Stack overflow for email or whatnot. We, also, too, actually, just recently, we haven’t really talked about it too much, we have a video section in Litmus now. So people can go and watch past conference videos from the Email Design Conference and whatnot. So you can access content like that. And we will have some more things in the future that address that need and that pain point.
Jamie: Yes. And similarly, content.myemma.com or myemma.com/blog, either/or, tons of resources.
Logan: So many good articles.
Jamie: Myemma.com/webinars, you’ll see a couple of those. I’m fond of them. Yeah. So lots of resources. We’re here to help and would love to drop some knowledge anytime we can, or just chat. Let’s see. Oh, so many good questions. Lots of just fun little comments, like, “Man Bun, winky face.” “Nice jacket,” assuming that’s for you since you’re wearing a ballin’ jacket.
Logan: Probably, yeah.
Jamie: Looking good. So those are good, as I find another real question. Oh, also, our friend Scott Stratten, marketing thought leader, also did…he retweeted our poll, 87%, GIF. Just saying, just saying.
Let’s see here. Oh, here’s a good one. This is just a specific type of email. What do you think is the most effective event email invite and why? So if you’re sending invitations, what do you recommend?
Logan: Well, if you’re sending specifically to Kevin, I think anything that invites him to a Patriots after-party, or any sort of Boston-based, New England-based sports event, I think you’re gonna find a really high click-through rate and a lot of engagement.
Jamie: But if it’s not to Kevin…
Logan: But if it’s not to Kevin, okay, no, that’s fair. I think, you know, with that, if you’re trying to, again, either just…we’re gonna talk about it, focused kind of intent there. So you wanna have the details, you want something to get the visual engagement that indicates, you know, something interesting about the event, you want some short copy describing the event, and then you want a powerful call to action. So keeping it really simple. That Charity: Water, like, it wasn’t an event invite, but other than that, it modeled kind of what I would consider to be just probably the single most effective email design, right, which is keeping it short, keeping it very concise, keeping it focused.
Kevin: Yeah, I agree. We actually had a report at Litmus. We studied into this. We came out with a report called The Viral Email Report. And we actually found that the most common topic among emails in the top 1% of sort of viral emails was events and webinars. So those always get a ton of engagement. So you definitely just wanna make sure, just when you’re thinking about the content and the design, making sure you’re definitely putting a lot of emphasis on the time and the date and, sort of, adding calendar functionality, so that people actually have something in there that’s gonna ping them and remind them that’s independent of the emails that you send. So those always get a ton of good engagement. You wanna make sure you capitalize on that.
Jamie: Awesome. And Patrick wants to know, because we saw image carousels earlier, so that’s when you can scroll through in the email, which is exciting, Patrick wants to know, is there a bulletproof fallback for carousels using the checkbox hack? And I’m assuming that means something.
Logan: Yeah. I mean, you’re assuming correctly.
Logan: So for those of our viewers who are not as technically granular, we’ll say, so a checkbox hack is just making use of some code that would allow for things similar to, like, surveys, with a checkbox or a radio button, you know, things you can click on. And then email developers, being the creative people that we are, came up with a way of using that to load in different content. So that’s what we saw in that Nest email earlier. That’s what we saw in the email prior to that, which I’m forgetting the particular one that you had referenced, Kevin.
Logan: Oh, yeah, B&Q. That one that was the seminal one, right. And so it’s making use of that. I’ll plug FreshInbox, which is another great resource if you would like great information about designing and developing for email. Justin over there has created an image carousel builder, so that it takes a lot of the grunt work out of it, and it just creates a static fallback image. So instead of that carousel loading, it would just be a static fallback image. And so that, yeah, I would definitely direct you to go to freshinbox.com. That would be a tool on there, and that’ll save you a lot of time, frankly. Yeah, anything to add?
Jamie: Well, I was gonna add too, if you are an Emma customer, that’s actually something… We have teams of people here in-house. Logan’s team, dev-design.
Logan: Yeah, sure, my team.
Jamie: But the services team too, they can help with things like writing your copy, helping you figure out if you even need hacking stuff. So you just wanna pick up the phone and be like, “Hey, I have some goals. Do this stuff for me.”
Logan: That’s true.
Jamie: We can help.
Logan: I’ve got a really talented team of designers and developers who can create really engaging templates and emails for you. And we would love to help you get started on that road.
Jamie: You don’t have to know how to do it yourself.
Logan: Yeah, you don’t have to know how to do it yourself.
Jamie: Just wanna make, yeah, get some stuff going. So I like this, Jansen, this is a good question, I think, to end on, because we are out of time. But the last question, do you have any tips for designers when they get more on the marketing sides, on the flip side of that, to channel their inner marketer? What do you recommend?
Logan: I mean, to call back, we definitely recommend taking a look on the Emma content hub and the Litmus blog, are two fantastic resources that have a lot of, like, more marketing directed blog topics and articles. So just take a trawl through there, and you will, I think, be really opened up to a lot of interesting ideas. That’s certainly something that I recommend, is just going to those resources and checking them out.
Kevin: I’d echo that sentiment, and I would just add, I mean, every year, we find, through the Email Design Conference, one of the common trends we see is people, designers, they don’t have a ton of access to data around their email performance. And it just seems that they’re very siloed from their marketing team. So definitely, please, get involved with your coworkers, your teammates, share the information that you have at your disposal amongst your team. It’s critical to help each other, you know, do your job to the best of your ability and to, you know, improve the metrics and move the needle forward. There’s too much siloing going on, we find every year. So, yeah, get talking, people, get friendly. Let’s go, let’s get some email love going on.
Jamie: No, I completely agree. I feel like when we are all very transparent, from the marketing side, of what the goal is and the designer is aware of what the goal is, then it just strengthens both. So we can celebrate the wins, and we can, you know, sort of rally if it’s not getting us there. So I love that. Well, we are out of time. Uh-oh, uh-oh, hold on. Somebody is asking a question here. Oh, could you please repeat the site for the email design ideas? Was it FreshInbox?
Logan: Freshinbox.com and tabletrtd.com will be the two that exists. It’s just, it’s great resources for our community.
Jamie: Absolutely. And, yeah. So thank you so much, Kevin.
Logan: Yeah, thank you, Kevin.
Kevin: Thanks for having me. This was a blast.
Jamie: Yeah, this was super fun. Thank you, Logan.
Logan: Thank you, Jamie.
Jamie: All right. And thank you, guys, for joining us today. Again, we’ll send a recording. If you did have some burning questions that could not be answered online, and it’s worth a personal follow-up, we’ll definitely make sure that Kevin or Logan or someone here at Emma can get those straightened out for you. So thanks again, and hopefully we’ll do this again soon.
Logan: Yeah. Thanks, everybody.
Jamie: All right, GIF.