Multiple Column Layouts Solution

[00:00:00]
>> Jason Rodriguez: So then anybody have any trouble adding multiple columns using tables? Little bit different than [LAUGH] using floats or CSS grid in which you might be used to but you get used to it after a while. So let's see how I might code something like that up in our email campaign.

[00:00:16]
So we have this starter example again that we've been working in before we just kind of scaffold it out what these different sections might look like. We're gonna get rid of these for a second and just show you how we might scaffold out those additional columns in here, so we'll call this a two column section.

[00:00:37]
>> Jason Rodriguez: And again, we have this fluid width table as our main container. We have this fix width container underneath there and then we have our two-column module, so this is that component that we're gonna be building out. Inside of here, we're going to want to add essentially the same structure that we had before but inside of this table cell.

[00:00:59]
So we can have that in there and it'll format a little bit.
>> Jason Rodriguez: And close these out.
>> Jason Rodriguez: I think I added one too many there.
>> Jason Rodriguez: So we have our table, table row, table cell, table.
>> [INAUDIBLE]
>> Jason Rodriguez: But the main thing is that we have another fluid table here, and then we're gonna use this to set our actual column width on there.

[00:01:36]
That's where that fixed with comes into play so obviously we don't want this to be 600 pixels wide. Since we're working in that 600 pixels structure you might wanna make this 300 pixels wide. Percentages usually work out pretty well cuz then you don't have to keep track of as much math, so you could set this for 50% wide.

[00:01:55]
And then underneath that we would another table that would,
>> Jason Rodriguez: Add the second column for there. So we have those two 50% wide columns that'll create our structure. So let's see a real world example of that. So again, we have this email campaign similar to what we've been working on, but we have these two columns below here with a heading and a little bit of paragraph copy there.

[00:02:23]
So when we go into this module, we have the two-column module that's its own table, row and table cell. But within there, we break it down by adding another fluid table in here to make sure that those two columns fill that whole space. And then we have our table row, table cell, and then another module for a left column and a module for our right column here.

[00:02:45]
So you can see we have this table and we're using that to set that column width, so right now it's set to 50% wide. Importantly we still have a role presentation, we're overriding the default behaviour. Here we're setting the align attribute to left for the left column and right for the right column so those slide where they need to be.

[00:03:04]
It kinda works similar to floats that traditional kind of float method but you don't have to clear anything which is nice. So we have 50% wide columns then underneath that we just have our same table cells and then our elements underneath that for the heading and the paragraph.

[00:03:20]
So when we look at that in the browser we get those two columns but it's important to note that right now we're not doing anything special for responsive stuff. So when we start looking at this in Litmus we're gonna see a couple of things happening here. All right, so I mentioned you might be tempted to do a specific fixed width like 50% which is what we're doing right now for those two tables, which in theory, works perfectly because 50 plus 50 is a 100 and it fits that 100% wide width.

[00:03:50]
That works for most email clients. You can see that Apple Mail that's perfect those columns display as intended but when we get into Outlook you can see the shifting down here. So Outlook does not handle math that well when it's precise for who knows what kind of reasons, probably cuz it's using Microsoft Word to render these emails.

[00:04:11]
So that's one of those things that it's one of those weird bugs that you have to account for and you have to code defensively against. So you don't want to run into this issue for your subscribers unless that's the look you're going for, you're going for this off-grid kind of presentation.

[00:04:26]
So the way to get around that would be to make this a little bit less than 50%, so let's try 48% for these two columns. This has the added benefit of making it so that it'll add a little bit of a gap between there, a little bit of gutter between the two columns, so when we run this hopefully Outlook is doing its math properly.

[00:04:50]
Well not properly, but it is fixing that on its end.
>> Jason Rodriguez: So we're gonna go into Outlook and then we have our two columns working. So one of those weird gotchas that you would just have to recognize that Word doesn't do math well, it's not Excel, so it can't do math as well as it's cousin can.

[00:05:11]
So you have to adjust that a little bit, make smaller columns, slightly smaller, not too big so that you can maintain that design across Outlook clients. The other thing is they were doing these multiple columns but when we start looking at it in mobile clients you can see that there's nothing responsive going on here.

[00:05:30]
And that's gonna be the next section is figuring out how we make this work across mobile devices. Some clients will just by default understand that you wanna stack that stuff and do it, which is awesome, but that's not the kinda baseline behavior for most mobile clients. So we'll get this fixed width at 600 pixels wider than that screen so it's blowing out that design, we don't see half of that email.

[00:05:54]
There's an email designer named Annie who years ago coined this term, called it the Android grid of grim because you would have this big grid of an email that you'd have to scroll around is a really grim experience. So this way it result in that horizontal scrolling which is such a weird thing on mobile to begin with you don't want it happening in the inbox.

[00:06:15]
So if we wanted to we could adapt this for any number of columns really we want them in here. So if we wanted to add a third column then let's go ahead and copy that fixed width table, drop it down in here. And we'll, do let's say 33% for each of these which will split that into thirds.

[00:06:39]
Hopefully give it enough room for how Outlook to do it's weird wonky math.
>> Jason Rodriguez: Save it, we now have three columns in here. We could add four by doing maybe 24% free each those so it doesn't add up fully. Then we're going to open up and Litmus,
>> Jason Rodriguez: Give it a second.

[00:07:03]
The Apple mails are cool cuz they handle most things that you throw at them. Outlook we now have these three columns. It's slightly less than that full 100% width so things work as intended and then everything's pretty much good to go. Again, if we go on a mobile, should open in Android and again, half our emails not even showing.

[00:07:25]
So that'll bring us to the next section which is all about making sure these emails are responsive across the widest range of devices as possible. Any questions about multiple columns using this table based approach? No, cool? Yeah?
>> Student: Yeah, would you use table cells to separate them instead of like-

[00:07:47]
>> Jason Rodriguez: So I prefer using table, you can try it but some clients will they just won't work with that approach.
>> Student: Okay.
>> Jason Rodriguez: And the nice thing about those tables you get like an extra couple of levels of like hooks or selectors so you can do things with like responsive stuff easier.

[00:08:03]
So I usually like doing a table level and having those tables next to each other. A lot of like back in the day people would build emails using just table cells and then you use COLSPAN which is an old attribute for handling tables. But that usually results in a lot of really hard math to keep track of when you get into more complex multi column layouts.

[00:08:27]
So table cells and COLSPAN and stuff like that is usually more headache than it's worth so it's just using the table based approach.