Adding the CSS Solution

[00:00:00]
>> Rodriguez: So the main point is that we have this container element, so we have our dev. And what we generally wanna do is use that to provide most of the styling for the content in that dev. So we're gonna open up the style attribute and we'll set things like, we can set the color.

[00:00:18]
I like using high contrast also, see it's black, it's default anyways, but we can set it there. And then things like font family, font size, so we'll add, make this sans-serif, I expect some of you will have questions while using web fonts in email, which we can definitely dig into.

[00:00:38]
There's definitely a few gotchas about doing it, but we'll make sure our text is big enough so people can read it.
>> Rodriguez: Good thing is to keep in mind that we wanna have a generous line height, just so people can read things a little bit more clearly. We don't want it to get too big and make it hard to read, but especially in email when so much relies on links, you're trying to get people out of your email and take some sort of other action.

[00:01:05]
If you have those text links and a block of copy, you can create those link clusters and really closely packed links and people will try to tap and they'll go where they don't wanna go. So line height's probably the best way to make sure you have enough breathing space for all those links and those blocks of copy.

[00:01:23]
So here we don't want to use again pixel units and set of relative units like just that 1.4 use ems or something like that. Just cuz a lot of email clients don't they haven't been updated a long time, so they might not recognize or know how to render those relative units.

[00:01:43]
So for the most part, all of our units and our emails are gonna be pixel sizing, which is a little bit weird. There's formulas for kind of converting those relative till you fixed units if you need them by. I usually just give it plenty of space maybe double whatever that pixel size happens to be or a little less than that.

[00:02:02]
When you start doing things like headings like longer lines of heading then you might want to shrink that down a little bit so that the text sits a little bit closer and it's easier to read. Yeah, so let's look at that and see, let's look like here. So better, we don't have that outdated like, Times New Roman style, Serif that nobody likes, pretty much outside of print books these days.

[00:02:30]
Yeah, nothing too fancy, we can see that we haven't really done anything to the heading here. So we get this default styling, which is just bold, a little bit bigger than our normal tech size, but we can update that too. So we have our default universal styles as display whole set to any of that content in there.

[00:02:49]
When it comes to black level elements, the main thing we're gonna be doing is overriding any of those margins or the padding on those elements. So, for headings especially we wanna make sure that we control those margins, we don't leave it to the browser or the email client to do that.

[00:03:06]
So I usually zero this out to start out with, and then introduce more padding or more margins as needed. The same thing applies for paragraphs so we can add a style in there, I add this margin set up 0 for now, and this becomes especially important as we start to add up more copies.

[00:03:25]
So let's copy that and another paragraph down here, and you can see we don't really have any space between that. So that's where we start using those inline styles to add that additional space, but we wanna control that. We don't wanna leave it up to the browser or the email client to set that for us.

[00:03:44]
So for the heading, let's add a little bit of space on the top and bottom. Let's say, since having all maybe add 40 pixels and 0, you can use shorthand, most email clients will respect that shorthand. You don't have to declare margin top, margin bottom, margin left, margin right.

[00:04:03]
Unless you want different settings for those elements or for that spacing. So plenty of space around the heading and then for the most part, for paragraphs as I start training them, I just add the margin to the bottom of that paragraph instead of the top. It'll just help keep things nice and consistent as we start adding more content in here.

[00:04:23]
So we can do, it goes top right, bottom, left for that shorthand property for margin. So we can do 0 for top, 0 for right, but maybe add 20 pixels on the bottom, and then 0 for the left. So when I just copy that style down here, then we have a little bit of space, we have plenty of line height maybe even a little bit too much.

[00:04:46]
We're gonna take that down some, so like 28.
>> Rodriguez: That's a little bit better, a little bit more comfortable. Obviously, we aren't doing anything structural to the email, but we can see how that might work with our container div here. So, all these styles control the text in our email, but if we want to start structuring things a little bit more, we can get started by using the max width property.

[00:05:16]
This doesn't we're again, not using tables yet, we'll see how that comes into play a little bit later on. But this is kinda part of the basis of the hybrid coding approach which will look at, but max width is super helpful. We can make a something like 600 pixels, that'll constrain it, and we can see that our image is still blowing out of that container because it's so large, we're using this retina image.

[00:05:38]
But we'll look at how to constrain that when we need to start digging more into images themselves. Similar on the web right now we're gonna use margins to center that content. So we'll do the old 0 auto trick, and then we're centering that content, which is cool. One thing I wanna do is resize this logo, so if that was my logo, it'd be gigantic and I don't want that to happen.

[00:06:06]
So I'm gonna had a width attribute here and set it to say, let's say 60 pixels. See what that was, so that's a little bit better, I wanna style that a little bit too on the add a border radius
>> Rodriguez: To make it circular so I'll just set it to whatever that width happens to be, that's cool.

[00:06:31]
So one thing to note, though, is that as you start using a little bit more advanced CSS, like things that were introduced in CSS 3. Things like border radius, this isn't supported across all email clients. And when we start getting into things like centering these images, that doesn't work across clients as well.

[00:06:51]
So let's center, let's again let's say call us display black,
>> Rodriguez: Margin 0 auto.
>> Rodriguez: So we're centering that in the email, I think I'm going to center the heading as well. So again, we can receives text align center on our hr heading tag. That's not something we wanna set at this universal kinda container level, because we don't want all this copy down here to be centered.

[00:07:22]
That definitely has very big accessibility implications, which we'll look at in a minute, but we'll just set that on the heading itself. So we have that centered heading looks nice, we have the body of the email down here. If we want to style that footer text a little bit differently a common practice is to make it a little bit smaller than the main copy.

[00:07:44]
And then make it lighter colored, so instead of black we could make it gray. And then maybe make it 14 or 16 pixels, decrease the line height a little bit to match.
>> Rodriguez: And you can see that we have this footer copy down here, that's a little bit different.

[00:08:04]
We can add in here a little bit more spacing to our email or to this footer section, so we'll use margin again. Let's say, 60 pixels up top, and a little space below, and then down below too we can add a little bit extra space on the bottom there.

[00:08:34]
>> Rodriguez: So now we have a little bit of spacing between our footer and the rest of our content which will help separate it. But pretty basic stuff, we're just using those tried and true well tested CSS properties. We're adding a little bit of structure using this max width and the margin, we don't need that since that's contained in this overarching div, and just making things look a little bit nicer.

[00:08:57]
And so let's see what something like this actually looks like when we look at it in real clients. So this is again using that limits extension, which will load depending on the speed of the Internet here. Load our email and all these different email clients, right now I'm just testing in 35 popular clients.

[00:09:14]
Right now we have 87 available, it's usually closer to 100 but sometimes some of the machines are down or we have issues with some of the clients who will pull them down. So you can see a couple of things here for things like Apple mail works there which has like really good support for HTML and CSS.

[00:09:34]
You can see that all of this works, our images are still blowing out here we'll make that a responsive in a minute. By all this copy works our images has that border radius applied and it is centered. But when we get into things like Outlook, you can see that a lot of that does not work.

[00:09:51]
The border radius doesn't work, centering that image by making it block level and using margins doesn't work. And then that max with doesn't work, which is a huge issue for us because we do have a lot of people still using Outlook clients. So that's where things like tables or hybrid coding will come into place to provide better, more robust structure for those emails.

[00:10:12]
And just kind of flip through and see how it renders again, the Outlooks are not pretty at all. But when we get into things like Outlook 2019, which happens beyond Mac that uses WebKit again as a rendering engine, which is awesome it works really well. The Apple models are awesome, old versions of Android are actually really good, newer versions, not so much.

[00:10:36]
The Gmail app depending on how you're using it tends to be a pretty solid rendering engine. Surprisingly there's a lot of different versions of Gmail out in the wild. So there's a great article by a guy named Remy Parmentier, who is a French email developer. And he mapped out all the different versions of Gmails.

[00:10:56]
So there's not just like consumer Gmail but there's G Suite, there's Google Apps, there's whether or not you're using it in the app or via iMAP, it does different things to your code. So it's definitely something to dig a little bit into and try to understand, but for the most part the Gmail app is pretty solid.

[00:11:15]
You get into the iMAP rendering, sometimes you run into some issues there, the Outlooks are good. Samsung as its entire own world has a lot of different problems with the e-mail rendering so it's usually pretty tricky to get things working well in Samsung mail. But we'll look at using tables and hybrid coding to account for some of those problems.

[00:11:37]
Gmail Outlook, but it's nice you can go through and see exactly how your email renders across these different email clients. So, a nice trick to account for things like for centering in Outlook is to rely on a good old tag that nobody uses anymore which is center. So this is completely deprecating, but we can use it in the context of email to make that work and outlook.

[00:12:07]
So if we say that we can rerun the messier,
>> Rodriguez: Hopefully Outlook pop up soon.
>> Rodriguez: So you can see we do get that centering, so depending on what you need to do, that's really common for logos, different images like icons and stuff like that. You can use that dedicated HTML, it's pretty commonplace in email development to make Outlook handle some of our styling a little bit better.

[00:12:41]
>> Speaker 2: We did have a question in chat.
>> Rodriguez: Sure.
>> Speaker 2: What about borders, should it be used or not on block level elements?
>> Rodriguez: So borders you totally can use it's pretty reliable, so the way you do that is just using that. Border shorthand so say, width UR, what type of border that is whether it's solid dash dotted, whatever and then the color of the border.

[00:13:03]
Padding again is pretty well supported across block level elements. So those are used together a lot of times to create like buttons or like a grid type element or like a card type element you'll have that border around there with padding around that element. So yeah, go for border works well, and usually combine that with padding to get cool effects like buttons which we'll look at.