I wrote my first set of HTML Emails over the weekend; The morale of this story is never to think you’ll have it down in “5 minutes, tops”

“Etinosa, we’re going to need to send out our newsletter soon. I’ll need you to come up with a design like this”

“Sure. No problem. I’ll give you something to look at in 5 minutes.”

It was supposed to be easy. Routine. Even though I had never done it before.

One of these days, my brash manner will probably get me into something I can’t code my way out of. But, until that day, I’ll continue to brag to high heavens.

So, this (mis)adventure starts when my company decides to leverage on the power of email marketing. To do this, they have to commission their shiny new developer(although, I am starting to feel the wear and tear a little) to build the email campaign. Now, I had never built an actual HTML email before. I mean, I used to send out plain text emails on smaller projects I had worked on, so how hard could it be to switch from plain text to hyper text?

“Give me 5 minutes, boss”

Several hours later, the email still isn’t ready. There isn’t even anything worth looking at because, over the past few hours, I have gotten to know the struggle and pain that apparently comes with building HTML emails.

First, to code a HTML email, you need to first build a time machine and go back to 1999 because that’s the year that the techniques used in building HTML emails were in fashion. Well, either that or know how to use nests upon nests of tables without going crazy.

Yeah, I think building the time machine might be easier.

Then, there’s the fact that practically no two email clients will render the same email the exact same way. There are always arbitrary differences in the rendering process. For instance, while it’s perfectly acceptable to center an item with good old fashioned margin: 0 auto in some clients, it just doesn’t work on others. This, of course, leads to much heartbreak and head bashing.

Well, long story short, I eventually “discover” Foundation For Emails which makes the process so much more palatable. It’s essentially a stack which includes a preprocessor called Inky that allows us write emails in a much more friendly way and then converts into all that bulky table code.

Here’s an example cropped from the Foundation For Emails website:

So, I build with Foundation, and everything appears to be going great. My boss pays great attention to detail when it comes to designs, so I can’t get away with different sizes of buttons, or fonts not being proper. Y’know, regular stuff.

The real trouble comes when I test sending to a few emails. It looks quite alright on the desktop, but on mobile… that’s not even worth showing.

I then discover, that some clients ignore media queries completely and well, much of my work is based on what has become a foundational principle of modern web design. I toss out that batch of email soup and head back into the kitchen.

After many gruelling hours of work, I finally have something that’s at least presentable.

And then, we send the email! After all of my hard work, people aren’t falling over themselves to open my email. Well, back to the drawing board fam’.