Responsive Email

[00:00:00]
>> Rodriguez: So let's start talking about responsive email. This where things start getting a little bit more interesting, because again, there are some gotchas. There's a couple of different ways to make responsive emails across all these different devices. So there's generally three approaches to creating mobile email campaigns, which is increasingly important because more of our world is going mobile.

[00:00:22]
We track email opens, we have a tool called LMS analytics. And that we anonymize a lot of that data and put it up on a website called emailclientmarketshare.com, which tracks the top ten popular email clients. And over the years we have seen the adoption of mobile just increase drastically.

[00:00:44]
So, if you're talking five, six years ago, barely any subscribers were opening on mobile, something around 10% of subscribers, something like that. Now, it's closer to 50%. So, like half of your subscribers are opening on mobile devices. The most popular clients are Gmail apps and the iOS mail apps.

[00:01:05]
Super popular, lots of people using mobile devices. So we want to make sure that our emails look good on those devices. So there's generally three different ways to do that. There's this mobile-aware approach which we'll see what that looks like. There's not really anything to do code wise with mobile-aware, which is nice.

[00:01:21]
So it's easy to implement. But then you get a little bit more involved each step down that ladder. So traditional responsive is very similar to, how you would build a responsive website which we'll see what that looks like. And then this hybrid or spongy coding technique, which was developed in response to Gmail, stripping out those embedded styles in the head of our email.

[00:01:43]
So while traditional responsive uses media queries to drive a lot of that responsive stuff, when that was stripped out of the email then none of it worked. So this different approach called hybrid or spongy depending on who you talk to, was developed to account for that. So we'll look at that world, we're gonna mostly focus on traditional responsive because since Gmail made that update it's super reliable, works really well.

[00:02:08]
And almost every email client and is easier for people to actually implement because the hybrid method gets, a lot more advanced. It's sometimes brittle depending on what you're trying to do, if you're doing multiple columns like four or five columns, it can be really hard to get that working reliably across clients.

[00:02:28]
So we will look at that what that code looks like, but at this point since Gmail updated their rendering engine that traditional responsive approach is a really good way to think about responsive email and make those emails work. So mobile-aware is cool though in that you don't have to do anything code related beyond what you've all ready learned.

[00:02:50]
So mobile-aware is more about considering mobile devices, mobile users. From a design perspective, when you're first designing your email and implementing it, so you generally want to favor simpler layouts, a large text, large buttons, and anything that scales down well across email clients. So a lot of mobile clients will just simply shrink down, almost like zooming out, your email to scale it to fit that width.

[00:03:16]
They won't do any like reordering or choreography of your content and stack things like that. But if you're not used to building responsive emails, then you could just design your email kind of like Trello does, Trello does awesome emails. They look beautiful. They're fun and easy to use.

[00:03:33]
But, at least recently, for years now they've been doing it in this mobile-aware approach. I think that's a pretty recent email. They may have updated since I've been talking, I don't know. But it's just this simple layout. It uses large enough text that when it's scaled down, it's still readable.

[00:03:50]
The buttons are big enough that you can tap on them easily, even when it's shrunken down on a smaller screen. But it's not using any code stuff beyond just fix what containers and the same kind of table-based structure that we've seen all ready. So this is awesome for teams that might not have the resources to devote to building and testing responsive or hybrid email campaigns and want to use this existing template or it's good for legacy templates that you don't have the time to dig in and update fully.

[00:04:23]
So mobile-aware's cool, just keep things big, keep layouts simple, keep buttons easy to use, and it'll just naturally scale down on most mobile devices and work beautifully. But if we want additional control over our emails, then we'll use this traditional responsive approach. So this is those same tenants that we've seen that Ethan Marcotte introduced however many years ago.

[00:04:44]
What was this back in 2012, 2013, maybe, when this responsive design concept first came into the industry. So responsive design as a refresher is all about fluid layouts, fluid images. And then using media queries to adjust specific things across these different device sizes. So we're doing a couple things all ready to get halfway there.

[00:05:08]
So we're using fluid images by default. We have those responsive by default images that automatically scale down because we're using that max width, width, and mid width approach on all of our image tags. The fluid layouts were kind of there. We have a couple of fluid tables, but then we have those fixed width tables, which we'll see how to swap those over to be responsive and fluid.

[00:05:28]
And then right now we haven't been using any media queries, but we'll introduce media queries to our email to make those more minute adjustments across different pieces of our content.