Hybrid or Spongy Coding

[00:00:00]
>> Rodriguez: That's what we're gonna look at next is preventing those kind of issues by using this other approach that's called a hybrid or spongy coding. So this was developed by a couple of people really back in the day years ago. The hybrid version was originally developed by a woman named Nicole Merlin who's from Australia.

[00:00:22]
Worked for campaign monitor for a while. Is unfortunately no longer the email industry but she is awesome. So she called it hybrid coding and a couple of other people referred to it as hybrid coding. And then there is this guy that worked for Mailchimp for a long time that built all of those email templates that Mailchimp users and create inside of their wizard editor named Fabio Carnero.

[00:00:41]
He works for booking.com now. Super smart email developer. He referred to his version as spongy coding. I have a bunch of kind of coding samples from him that we'll go over. But this takes a different approach from the traditional version of the response female. But we're still gonna use that fluidity for our layouts.

[00:00:59]
It's a very important key component of this. But everything's gonna be fluid by default. So all of our tables are gonna be fluid widths, instead of having that 600 pixel wide. But to constrain that, we're going to fall back to using that max-width CSS property. So this is similar to what we were doing when we were first starting out, we had that div container.

[00:01:19]
I had set it to have a max-width inline on that div to be 600 pixels. And then that constrained it for all of the different email clients except for our Outlook friends, and that's where the problem comes into play. We can have those fluid by default responsive emails, but when they're opened up in Outlook that doesn't work and we get those broken layouts that are super wide and look terrible.

[00:01:40]
All those line lengths are really long and hard to read that copy in an email. So the way we get around that is using something that's typically referred to as a ghost table or an MSO table. So Microsoft has this concept of targeting itself by using these conditional comments.

[00:01:59]
So you might be familiar with this. If you were building websites way back in the day years ago. You would conditionally feed IE a certain CSS styles that you knew that it would respect and display properly. Because it wasn't very happy with older versions by Alias. We're very happy with newer properties and CSS, CSS three stuff like that.

[00:02:19]
So you could use this conditional comment and use the square bracket a notation to target IE and we can do that same thing. Inside of Microsoft Office to target Microsoft Outlook. So what we can do the same, we can open up that comment. Using that comment, same syntax for HTML comments.

[00:02:38]
And then we use the square bracket, we say if this is opened up and in this case greater than or equal to MSO 9. Which is one of the versions of Microsoft Outlook. We'll see what those versions correspond to in a second here, or it's viewed an IE.

[00:02:52]
So all the versions of IE, then I want you to apply the code inside of this conditional common. So it's kinda like a media query or setting some sorta property that you're testing for. Then if that property is true than that condition's true that anything inside of that is displayed and rendered, but this only works in Microsoft Outlook, which is awesome because that's where most of our problems and email design lie.

[00:03:14]
So we can target Microsoft Outlook very specifically. So we've seen this in play when we were looking at those bulletproof buttons, the buttons.cm approach that used VML. So you probably saw one of these conditional comments. It would start up in front of our anchor tag and below it as well, to open and close that conditional code.

[00:03:35]
Same thing applies, we're gonna be targeting specific versions of Outlook. And then we're gonna be feeding them stuff that they understand. So in our case, it's gonna be tables. And since these are not rendered or seen by any other email client, only Outlook. They're kind of like ghosts for that, so that's where that term ghost table comes from.

[00:03:54]
For all other clients they are nonexistent, they don't matter. But Outlook will see these and render them accordingly, which is awesome. So these are the different Outlook versions, it goes up from there. You can see Version 9 is Outlook 2000, Version 10 is 2002, it goes all the way up there.

[00:04:11]
I think more recent versions have fallen off of this naming convention, and you can see it skips weirdly from 12 to 14 for no reason whatsoever. But these are the main ones because they're still using Microsoft Word. Newer versions will respect anything that's greater than or equal to that older version, which is why you typically start at that lowest version of Outlook, that oldest version, and then go anything above that.

[00:04:36]
And it will respect this conditional code here. If we wanna target things specifically we can say greater than or equal to using GTE. Greater than is GTE. Less than or equal to, and less than, have those properties as well. It's very rare that you would ever have to target a very specific version of Outlook.

[00:04:55]
It is usually easier to just target the old one and work ahead and just make it apply for all of those different versions of Outlook.