Tables Layout

[00:00:00]
>> Jason Rodriguez: All right, so we have looked at a whole bunch of things so far, the basic HTML and CSS. We're gonna be using our email campaigns. Some of those different elements using things like images, links, buttons in our emails. But the big topic is really gonna be about how we structure those emails, the content inside of those emails.

[00:00:19]
How we use layouts effectively across these different email clients. So there's a couple of different ways we can structure emails from a layout perspective. We're largely gonna focus on table-based design, just because that's most reliable method of coding emails. But when we get into looking at how to make those layouts responsive, we'll look at a secondary solution called hybrid or spongy coding.

[00:00:43]
But first, before we start looking at code or anything like that, I want to encourage you to start thinking about all of your email code in this modular fashion. You wanna think about all these different components, creating those different components in your emails to make it easier to troubleshoot those emails when problems occur.

[00:01:02]
And you built your email in this modular design approach, then you can pinpoint where those problems are and find those problems and fix them a lot quicker. But perhaps and more importantly, when you start getting the more advanced email development, you'll need to start building out these modules, these components, so that you can quickly generate new versions of emails.

[00:01:23]
So if you have all these, this kind of library of modules built out, save those as snippets or partials or something like that in your build system, you can almost use them as puzzle pieces or LEGO pieces. And you can quickly create all these different versions of an email campaign based on what that subscriber needs.

[00:01:40]
So you can personalize things with the actual design, with different components that you're pulling into your email campaigns. But the only way you can really do that is by building in this modular kind of componentized way. So we'll see how that actually works when we start looking at tables and what those modules will actually look like in the context of an email campaign.

[00:01:59]
So when we're talking about layouts, again, we're gonna use tables. So most of you probably haven't used tables for layout since the late 90s, early 2000s. Ever since Jeffrey Zeldman came around and encouraged us to start embracing web standards, that separation of concerns and relying on CSS to structure our content.

[00:02:22]
And I'd love to be able to live in that world of email, but unfortunately we've seen all those different email clients have different rendering engines that support varying levels of HTML and CSS. So we can't reliably use CSS for structural stuff inside of emails. So the most reliable way to do that is use HTML tables to provide that structure.

[00:02:44]
So the number one thing I want you to take away, again, when we're thinking about accessibility, is to include the role attribute on any table you introduce in your email with that value of presentation. So that it's not read out loud for somebody using a screen reader. Beyond that, we're going to restrict our table elements to table, table row and table cell.

[00:03:05]
While there are other elements like headers and footers, and th and tf, and all those different components, the tbody, we're not really gonna use those. They're not gonna make any difference to us in our emails. Some engines, rendering engine, some web browsers will add those in your email campaign without your say.

[00:03:25]
Some ESP's will just automatically dump those in there. But we're not gonna do anything with them, we're not gonna worry about styling them or anything like that. So we're just gonna use tables, table rows and table cells. For the most part, those components are gonna live either in their own table that will be that component structure or they're on the row and table cell.

[00:03:47]
And so if we're doing just a simple kind of layout, a single column layout, which we'll look at in a minute here, then you'll see that we use table rows and table cells for each component. Things like the logo or the headline or the hero image. You could get more complex as you go down this path.

[00:04:04]
You could create components from anything from a product shot or product feature to event invitations and calendar invites, receipts, all that kind of stuff. But it's important to have them in their own discrete unit so that you can swap them in and out as needed. And we're definitely gonna be overwriting some of the defaults that most browsers and email clients add to tables.

[00:04:28]
And we'll use HTML attributes to do that. And then most of the styles that we place in our emails from here on out, at least when we're doing table-based design, will be included in table cells. So that td tag as opposed to a div or some sort of container like we've seen before.

[00:04:47]
So boilerplate table looks something like this. We have that table tag. We're overriding a couple of different things in those HTML attributes. We're applying border 0 so that no borders are added to that table or the cells within it. And then we're adding cellpadding and cellspacing and setting those to 0.

[00:05:06]
Because we wanna have full control over all the white space in our email campaign. So when we are adding white space or kinda structural stuff to our emails, that's gonna happen on the table cell level. So we have that table, we have tr for the table row, and then we have td for the table cell.

[00:05:24]
And then most of the styles we're gonna be adding are gonna be in that table cell level. So you can see that inline style, the styles will go there. Except for anything you're kinda being more specific about, something like the heading element, like that h1, we'll still wanna apply our margins there.

[00:05:40]
We could either remove those wholesale by setting margin 0 on h1, h2, h3 and then using padding on the table cell. Or we can use the margins on the heading level there. Yeah, that's kind of the base thing that you're gonna be working from, is that table, table row, table cell.

[00:05:56]
And then all of your content will live inside of those table cells themselves.
>> Jason Rodriguez: You need to keep in mind, though, how you're gonna be nesting this content. There's a good way and a bad way to nest tables in email. The bad way is to have everything possible in its own table and then nest them deeply.

[00:06:17]
There's some email clients, older versions like Lotus Notes or IBM Notes, if you get up to, I think it's 12 tables deep, then everything will just break. The layout will just completely fall apart on you. So hopefully you're not doing that as you nest more and more tables in your email.

[00:06:34]
It's gonna be a massive pain in the ass to actually maintain that and figure out what's going where, how to fix problems. So generally, for just single column layouts and simple structures, we'll have a fluid table that'll be set to 100% wide. We'll have a fixed table inside of a table cell within that container table that will be set to something like 600 pixels, that fixed width.

[00:06:59]
And then the content will be in its own discreet table rows and table cells within the fixed width container. We'll see how that comes into play when we start making things responsive by adapting that fixed width for smaller screen sizes.