CSS Resets

[00:00:01]
>> Jason Rodriguez: So the first thing we wanna do is to reset some of that default email client behavior. So there's a couple of things we're gonna look at here, is some Microsoft Office behavior. That just kind of comes by way of using something like Outlook. Then some browser and client default behavior.

[00:00:17]
And then the main thing though, is disabling, not disabling, but overriding any auto-linking behavior that certain mobile clients especially will add into our email campaigns, if we don't account for it. So a good example of this is this email campaign. You can see that it's using that dark background and then white text.

[00:00:36]
But we have a mobile client, I think this screenshot was from Apple Mail. But you can see that it's auto-linking things like days, that Thursday through Sunday, or Monday through Wednesday, those dates in there. You'll see this with addresses in your email campaigns, telephone numbers, times, things like that.

[00:00:56]
So it's helpful behavior because they want you to use this across your operating system. So they see a date, they want you to make a calendar event for it. They see a phone number, they want you to call that number. They see an address, they want you to use maps to look up that address.

[00:01:11]
So it's a really helpful, cool user feature, but it causes a lot of problems, really in two areas, one is from a design perspective. A lot of times, that doesn't go along with the branding or the style guidelines for our email campaigns. But more importantly, it causes really big accessibility issues like this.

[00:01:30]
So you can't really see that dark text on that dark background. So anybody that can't really see that really low contrast, which is a lot of people. I have contrast issues, this is very hard for me to read. Or if you're using a mobile device with a dim screen, then that's gonna be even worse.

[00:01:49]
We wanna make sure our emails are always as accessible as possible, and contrast is a big part of that. So we don't wanna disable this behavior because it is helpful for a lot of people that wanna take advantage of that information. But we do wanna override that styling on our email campaigns, to make sure that whatever they do link will just inherit whatever that parent styling happens to be, that original styling.

[00:02:13]
So let's look at what that actually looks like in practice, so we have our starter email here. The first thing we're gonna do is add some CSS to take care of all those resets. So I have a snippet here, I'm gonna expand.
>> Jason Rodriguez: So we'll see a couple of things that were added up in here.

[00:02:32]
This is stuff that's essentially just boilerplate, that we add to all of our email campaigns, that do a couple of things. So these client-specific styles are essentially to account for Microsoft Office products. So you can see we're using this ms prefix here to make sure that Microsoft Office will not adjust our text sizing.

[00:02:53]
They won't shrink or enlarge things unless we want them to. Same thing for webkit, that's just to make sure they do the same thing. Sometimes they will try to adjust our text settings. If you're using anything less than font size of 14 pixels on iOS, then they will automatically bump that up to 14 pixels, so this helps account for that.

[00:03:15]
So if you do need really little copy, which I don't as rule of thumb recommend, you wanna make sure all of your copy is readable, even those disclaimers, that footer information. You should be using something bigger 14 pixels, but if you need something small for whatever reason, then that'll help make sure that both Apple Mail and then Microsoft don't adjust that.

[00:03:34]
These tables, since we do use tables and table cells very heavily in email design, Microsoft likes to add some spacing around those tables by default. So using this mso-table-lspace and table-rspace properties, and setting that to 0 points helps us to make sure that they don't add that spacing around our tables.

[00:03:55]
And then the images, we just wanna make sure that when we're scaling images, a lot of times, we'll be using what are called retina images. Which are larger images that are scaled down, to make sure that they display really clearly on high DPI screens. If you're doing that, sometimes in different Outlook clients, that interpolation is a little bit off, so things look a little bit fuzzy, or introduce some artifacts.

[00:04:19]
So if you set it to bicubic for that interpolation mode, then it helps take care of those problems. Just general resets, we're again just taking care of some defaults that different browsers and different rendering engines like to add in there. For images, we wanna make sure that we don't have borders around that unless we want that on the image itself, and then we'll apply that to the image tag.

[00:04:41]
And then we wanna make sure of the height, and the height is just autosizing, so it maintains that aspect ratio. line-height, we like to put just so there's not different spacing and stuff added that we don't intend, outline's similar to border. And then text-decoration, again, helps take care of any underlining on images that happen to be linked that we don't want to happen.

[00:05:04]
The tables, we want to generally make sure that our borders collapse because we don't want those table cell outlines. And that just helps take care of that for us by default. If you do want something like that border for your table, if you have some tabular data or some list of things, that's really common in receipt-type emails, then you can set that on the table itself.

[00:05:26]
But if you're just using tables for layouts and that structural component of emails, we don't generally want those borders, we wanna rip them out of there. And then again, similar to what we do in line, we have body, we set the heights 100%. So if we're using any background colors, then it'll hopefully render properly across email clients.

[00:05:45]
And then reset things like the margin and the padding and the width too, to make sure that our document renders as intended. We don't get all that added spacing or anything like that, depending on what email client you're using. So those blue links we were talking about, it used to be that you had to essentially code in a little bit of HTML to take care of that.

[00:06:07]
So if you had something like some suspect text, so you have your address in the footer of your email, you think it's gonna be auto-linked because it probably will, then you would wrap that in a span. And then you would target something like span, whatever that class happens to be, and then the child anchor tag that's added in there, and then you override those colors.

[00:06:28]
But somebody smarter than me discovered that Apple actually adds this attribute to those anchor tags, this x-apple-data-detectors. And that's how they tell and provide that auto-linking behavior. So we can just target any anchor tags with that x-apple-data-detectors attribute added to it. And then we can just make sure that everything that they might change is inherited or overwritten from what they would have.

[00:06:52]
And the same thing kind of applies for Gmail, Gmail does the same thing. For this one, though, they do something funky where they change the HTML to be an underline using this u tag, that tag instead of HTML. And then we're using that ID body that we applied to body to say we're selecting that body and then any anchor tags in there to inherit whatever.

[00:07:20]
That's a weird color, inherit any of those set properties that we have on those anchor tags instead. Samsung Mail will do similar things. This has been kinda, they seem to be pushing updates that will break this randomly, different updates come around and this technique works. Then a month goes by and that doesn't work, and then it'll be back a month later.

[00:07:47]
So I think they're always making updates to their client, but they usually add this MessageViewBody ID to your document. So then you can just target that with any anchor tags and override all their settings. Later on, we'll look at what CSS we're gonna be adding in here. But we'll get into the best place to add CSS to our emails in just a second here.

[00:08:12]
Any questions about any of these resets?
>> Jason Rodriguez: No, cool.