Multiple Column Layouts Exercise

[00:00:00]
>> Rodriguez: When we get into multiple columns, I'm a huge proponent of that single column, simple layout. My own personal emails follow that kind of design paradigm. Most of our emails at Litmus are single column. It really helps you to focus your content and force that strong visual hierarchy which we were talking about when it comes to accessibility.

[00:00:20]
And it helps keep things really easily maintainable. And you can create new emails pretty quickly using that simpler single column approach. But a lot of times you're going to have to create this multiple column layout for a variety of reasons. You might have a product grid. You might have a calendar event like has a picture with whatever kind of media you have next to it, that kind of media card type design.

[00:00:44]
And you're gonna have to introduce these multiple columns. So the way you do that is still relying on your tables. And then we'll start using multiple table cells in a single row to provide those different columns. But you again want to nest these in a specific order. You're gonna have that fluid table again, that's your main container.

[00:01:01]
You're gonna have that fixed width table which was what our 600 pixel wide table was before. Then you're gonna have another fluid table that's 100% wide underneath that. And then you'll have your final kind of fixed width tables for those columns. And we'll see how that works out in this two-one-three column structure that we're gonna build in a second here.

[00:01:21]
So those final fixed tables usually work better if they're, you can use percentage-based width for that. So in our example, we'll set that to a percentage like 50% for the left and the right. You can do 33% if you're doing a three-column approach, something like that. You can do pixel-based stuff.

[00:01:42]
But if you get really heavily nested and start building a bunch of multiple columns, then the math gets a little bit trickier. And you have to account for that a little bit more. Especially when it comes to Outlook, which is a little bit tricky with it when it comes to the math on widths of items.

[00:01:57]
So we'll see how that plays out in a second here, too, when we start building out this example. First I want you to try to add two columns to your email campaign using that approach. We'll have that fixed table, or sorry, the fluid table, the fixed table, the fluid table, the fixed table.

[00:02:13]
And add two tables in that final container for your different columns. So start with two, add a third one in there if you want. You can try using pixel sizing or percentage sizing. And see how you'd actually develop that. Just throw some dummy content in there, an image if you want to.

[00:02:32]
And see if you can get that multiple column structure working. Before we head back and see how somebody like me would code something like that. So let's take five minutes and start adding some columns for those tables that we just built out.