Today we’ve launched our newest HTML emails course, Unmasking HTML Emails, and to celebrate, I’m going to show you how I created the announcement email for this course (very meta, I know). Explaining all of the code required is too much for a blog post, so I’ll be digging into the concept behind each section and the code that creates it.
All About That Base, No Haml
After I get the final copy and design from my fellow Code Schoolers, I start coding things up using our base layout. While we write all of our emails in Haml, this is the base template in HTML. It has our branding in the header and a combination of ESP requirements with mucho engagement options in the footer.
The interesting thing about this base is that it uses all of the techniques taught in our course, which are:
Some email clients require CSS to be inline, so you’ll see that we’re using inline styles throughout this bit of code.
Tables for Layout
Email clients have varied support for layout CSS, so we’re using tables to control the layout of the header and the footer.
For clients that support them, we’re using media queries to make adjustments.
You’ll notice some really strange code in there (and no, I don’t mean my choice of class names) — there’s code in the media queries and around the tables that deal with various clients.
Small Screen First
For clients that are used on devices with smaller screens but lack media query support, we structure our tables in a specific way.
So, all of that is in the basic layout of the email, but there’s so much more fun to be had! What’s the one thing that most excited me about creating this course? There’s so much room for improvement in email design — I can’t wait to have an inbox full of great work.
With that said, here’s how I took the great work of our designers and coded it up into an announcement email.
Bring the Branding
The branding for this course was a lot of fun, and the original concept had some glorious lighting. While I would have loved to replicate that, the lighting and texture would’ve been really tough to blend with the rest of the email.
I was able to keep the texture on the actual text, but aside from that, I’m using a JPG file with a background here and a separate, textured background image. It’s similar to the one in the course email, but I lightened it up a bit.
Don’t Tell Them About the Button
We have an internal style guide, and I try to stick to it as much as possible. However, announcement emails feel like a time to play with the theme. So, I customized a bulletproof button with a gradient, box shadow, and border top for clients that are down with that kind of thing.
The designers do some initial exploration in their files when they’re just starting out, and they’re like treasure chests for a front-end developer. I found this accent as part of a larger piece, so I colorized and used it for framing and dividing the content — score!
A lot of front-end folks use a pattern called the “flag object” or “media object.” We call it a bucket and I’m using a crazy, tables-only version here. It uses a fluid table with a max-width and set to
align=“left” to hold the image. The text follows that same premise, but with a larger max-width. Together, they equal 600px when there’s room for that, and 100% when there’s not.
Not Satisfied? Have a Button
So far we’ve got most of the course information, but we’ve noticed that many users like to check out the course page too. So, we link up the course page here, and then add a Twitter button for our amazing fans that want to help us spread the word.
For a final touch of fun, I really wanted to incorporate the lights. Having them come from the top was an implementation decision, but it also went well with the shadow direction and button location. Unfortunately, only people using an email client with WebKit as a rendering engine will get to see this. I’m also restricting it to larger screens because of the performance needs for the animation.
Get in the Ring
This blog post was just the beginning, now it’s your turn — learn to create HTML emails and improve inboxes everywhere! Be sure to share your creations with me in the comments section below.