You Can Code, Too: Building a Responsive HTML Email

It’s in the data–more people today are using mobile devices to check their email, write messages and consume information.

Google recognized this fact in a big way with an update released April 21, 2015 (learn about Google’s mobile-friendly update).

Now, this demonstration is catered for Mac users. It uses Espresso, a great tool for Mac users (download it here) and CodeKit (download here). I recommend that you check out the sample project on Espresso before getting started.

First step is to create a folder on your desktop. He called his “email”. So we did too.

Next, drag your folder into Espresso to create a project with it. Now you have an empty project in which to create your files.

Start with your .html file. Again, he called his “email.hmtl”. So we did too.

For this exercise, let’s create a simple “win-back” email campaign (I used this sample re-engagement email campaign).

I’ve gone ahead and started to fill my email.html file with the basic framework for my responsive HTML email. In the image below, note that I dragged an image called “win-backemailcampaign.jpg” into the Project Files section. More on that in a bit.

Next, create your style sheet. You might be used to seeing style sheets titled “style.css”. For this exercise, he uses SASS—Syntactically Awesome Style Sheets. Sass is a professional grade CSS extension.

Name your SASS file “style.sass” and then go back to your email.html file. Note that the link to the style sheet is “style.css”.

Now, go back to your desktop and drag the email folder to CodeKit. There you will select “style.sass” and then right click and select “Set output path.” The output path is not in a CSS folder; it’s just in the email folder.

Now, back to Espresso, don’t style the body as a hook to set font sizes or font styles or background colors. Instead, create a background that will serve as the framework for the email. Use a <div> and classify it as “email-background”. Also create a <div> called “email-container”. The email-container is the responsive section that grows and shrinks depending on the browser size.

In your email client (Ex: Gmail), there’s going to be a subject line. After that subject line, there should be a few lines of text that are usually the first few lines written in the body. Those lines are important in guiding the email recipient to what they should do with this email. This area is often called the pre-header. So let’s add space for a <div> called “pre-header” in the HTML document.

Now, within the email-container I’ve added a headline using the <h1> tag.  I’ll continue by adding an image using the <img> tag, a paragraph using the <p> tag, and a call-to-action link. Check it out:

Watch and learn: