Hybrid Coding Example

[00:00:01]
>> Rodriguez: So the easiest way to see this is in a single column simple layout, like what we've been building out, to see how this actually works in action. So you'll see that single column hybrid HTML example. And I'm gonna pop it open here and walk through what that looks like.

[00:00:20]
>> Rodriguez: So the same stuff we've been doing before. We have our base document, we have our CSS resets doing all that good stuff. And then, we have our div. This is what we had originally, where we have this container div. And then, each of our modules, those content pieces, are just sitting inside of that div.

[00:00:39]
We can use margin on these different elements to add that white space and make everything look good. But we're not using tables or anything like that. So it's nice and super clean to code something like this when it's a single column layout using this hybrid approach. And this is something I do for my own e-mails.

[00:00:56]
But it gets a lot more complex when you start adding multiple columns, which we'll look at in a few minutes here. But you can see that we have this div, that's the container. And the only thing we're doing to constrain that width is using this max-width property in line on that div.

[00:01:11]
So for most e- mail clients, it will render that properly. But we saw earlier that Outlook just completely blows that out. It doesn't understand max-width, so we have to do something different. And that's where these conditional tables come into play. So in this e-mail, the only table you'll see is this one up here for that Microsoft only view.

[00:01:34]
So we use that same conditional comment. We're saying if this is greater than or equal to Microsoft Outlook 2000 or IE, then I want you to wrap all this content inside of this table, table row, and table cell. And this is using the exact same table approach that we've seen before.

[00:01:51]
We're overriding things like cell spacing, cell padding, and the border. We're setting the specific width, which is 600 pixels wide. We're gonna use align-center so that entire e-mail's not shifted to the left, it's centered in that viewport. And then, we have role equals presentation to make sure that anybody using assistive technology doesn't get that table read out to them if they're on Windows using Outlook.

[00:02:16]
So we open that up. You can see the table, the table row, table cell. And then, the entire e-mail lives inside of that. Then, when we get later down, again, we use this exact same conditional comment. And then, we just close out those three elements, the table cell, table row, and table.

[00:02:32]
So when we do this, we can see that it will render properly in Microsoft Outlook.
>> Rodriguez: Apple mail, perfect as always. I love you. Outlook, it's looking great, it's awesome. We don't get our border radius, that's no big deal. Our bulletproof button's working nicely. But our whole design works well there.

[00:03:01]
But perhaps most importantly, when we get down onto mobile, then the e-mail works as intended. It shrinks down because it's fluid by default. So we don't have to do anything special with media queries, and this is where it came into play. Because Gmail was starting out our media queries, we had to make that fluid by default approach to designing e- mails.

[00:03:21]
So it works well across all these different mobile devices. You'll see Samsung's usually a little bit weird and will do some weird scaling or shifting of your layout. There's not too much you can do about that. But across all these different devices that our e-mail's working really well because it is fluid by default.

[00:03:40]
Again, for single column layouts, this works really, really well. It keeps your code super clean, super easy to update, so when you're updating this, you're just looking at these basic HTML elements. So you can swap those out, do whatever you want with them, style them how you want.

[00:03:57]
But when we get into multiple columns for hybrid coding, it gets a lot more complex because you have to account for that stacking in really unique ways for e-mail design. So let's see what that actually looks like.
>> Rodriguez: So I'm gonna open this up so you can see what it looks like.

[00:04:21]
Similar to what we were doing before, two columns, nothing special. But when we start looking at our e-mail, it gets a little bit more lengthy, a little bit more verbose, and we have to account for more. So again, we're using our main container div here. We're using that max-width, we're using our conditional table for Microsoft Outlook.

[00:04:42]
But then, we get down into our two column layout, and that's where we have to introduce back into tables. We need a better container than a div to house those two different columns using this hybrid coding approach. So we're keeping that table fluid, which is awesome, all right?

[00:04:58]
We're using that 100% wide. And then, we're gonna open up a table row and table cell. Make sure that's 100% wide to force that full width. And then, you can see some additional ghost tables in here. A couple of things to keep in mind, though, is you're gonna see a lot of nesting in here, and some kind of weird things.

[00:05:16]
So you'll see this font size equals 0. And that'll just help ensure that the spacing and the stacking works properly. It's really weird that it's in there, but it does work. And we'll see multiple nested tables in here. We'll see the divs that we are using. So the column comes from these table cells inside of this ghost table.

[00:05:38]
You can see that this ghost table's 600 pixels wide, but this table cell's 300 pixels wide. And then, we're using for other clients that don't see those ghost tables, then we fall back to use this div based approach. So we can say the max-width for this is 50%.

[00:05:55]
So it's gonna be half that design. We're gonna set it to inline block so that it lines up next to its neighbor column. And then, you can adjust these, all this stuff, as necessary. You can adjust your content as necessary. But by default, what it's doing is gonna be stacking this on mobile because of how, just this this min-width is working.

[00:06:22]
So you set your min-width to equal whatever that max column size is. And then, when it gets down to that, it will naturally stack those. It's not gonna let you go below it. And it'll just force that stacking on mobile clients. So you can see that in action when we pop it open in Litmus.

[00:06:45]
>> Rodriguez: The thing I don't like about the multiple columns hybrid approach is that it's so complex. There's a lot of code in there. There's a lot of things that if you make one wrong move, then it's gonna break your design. And it gets even more complex as you start adding three and four column layouts.

[00:06:59]
But again, we have our two columns. Since this is set to inline block and it's only 50%, those columns will shift up on a large enough screen size. But when it gets down to, again, this is working well. We could adjust that gutter a little bit so there's space between the two columns.

[00:07:18]
But when we get down on a mobile, since it's dropping below that max-width breakpoint, then it's going to naturally stack those columns. So we get that single column layout. So this is awesome, again, for clients that don't support embedded styles and media queries in the head. It will just naturally do this.

[00:07:38]
It's that fluid by default, and it works nicely and choreographs that content without having to mess with media queries. That being said, it is more complex and there's just more that potentially go wrong when you're making updates or trying to adopt this to new designs. You can see that I put in here a folder into the GitHub repo that's called Hybrid Examples.

[00:08:05]
And this is code from Fabio Cannaro who was developing a lot of these ideas. And these are just examples of different e-mail type structures. So you can see this two column fluid, which is the same thing that we were just looking at. It's nice that he has a couple of developer notes in here to tell you what's going on here.

[00:08:24]
So setting the font size zero is necessary to ensure there's no extra space introduced and that they wrap properly. To have each column center upon stacking, wrap them in the individual divs and set the max-width and width the same. Set them to display inline block, and then using vertical-align will help those line up when they're next to each other.

[00:08:46]
So some helpful notes in there that'll help you pick through this stuff. But when you get into you even more columns, then it's just a hell of a lot of code to try to maintain. So this is a simple three column layout with gutters between those columns. No real styling.

[00:09:06]
If we pop this open, you can see what it looks like. There's nothing really going on, and it's already at 130 lines of code that you have to dig through and maintain. Whereas, if we got our single column hybrid e-mail that has images and styles and all that good stuff, it's only at 117 lines of code.

[00:09:24]
So I'll leave it to you to decide which one you wanna maintain and build on top of. But if you do need to make specific multi-column layouts, and you want to ensure that they work across the widest range of devices and e-mail clients, especially if they make any updates where they're stripping out that head of your e-mail and those embedded styles, then that's where this hybrid approach really comes into play.

[00:09:49]
There's some cool things you can do, too, as well. You can have reverse stacking. You can have unequal columns that reverse stack. So you would have this example where you have your right, which is wider than your left. If we shrink down here, then you can see the right comes on top.

[00:10:08]
It's that reverse stacking order, but it still maintains those widths. You can combine this with media queries to get some really advanced stuff and adjust all those styles as needed. But it's really up to the developer what they need to support, what they need to do to make sure that it's working for their subscribers.

[00:10:27]
But yeah, that's hybrid coding in a nutshell. The examples in here get pretty lengthy, so I'll leave it to you to go through those hybrid examples which are available on the GitHub repo for this workshop. Definitely worth picking through and testing out and seeing how they actually work.

[00:10:44]
Fabio's developer notes are super handy in there. But really, I like this hybrid approach for single column layouts. But if I'm doing multiple columns, then I'm usually just falling back to tables and using media queries and classes to target those for mobile devices.