How to code a responsive email

Recently I was asked to demonstrate my ability to code responsive emails – something that I hadn’t done before. After researching best practices I saw an awesome tutorial how to do it, so I thought I would share it with you all. For those of you who want the template now, please go straight to my CodePen

To begin you will need to have a simple text editor installed, my personal preference is Sublime, and code out a nice foundation for us to work on.

image-1

As you can see I have linked an external CSS file and I know that some email clients strip out the ‘head’ and ‘style’ tags from emails, so it’s best to have your CSS written inline within your markup. However, it is just much easier to style it this way to begin with.

Now, begin to add some more content in, h1’s, p’s, images and then style them in the CSS. For example:

image-2
image-3

And now, our email is starting to take some shape!

image-4

From here, add in a call to action and a footer and style them! Additionally, create a div and add a class called ‘pre-header’. This is very important. The text inside the ‘pre-header’ div will be what the recipient sees before they open the email.

image-5
image-6
image-8

One key thing you may have noticed is that the color and background of ‘pre-header’ matches the background color used of ’email-background’, why? Well we don’t want the pre-header text interfering with our HTML email, so we have cleverly hid it using CSS.

image-7

By setting the font-size to 5px, changing the text color to #eee and then the background to #eee, it completely hides it out of view.

So, we are almost there! We have an awesome layout, a completely responsive email template – now we remove the external CSS file and bring all the styles into one, new seperate HTML document. To save confusion, I created a new HTML called ‘responsive email inline’.

Once created, copy all of your styles from your stylesheet and place then inside the style tag in the ‘head’.

image-9

After you’ve done this, begin stripping out the HTML. Remove the HTML tag, remove the title tag and remove the Body tag. All you should now have left is ‘head’ in which all your CSS is, and then the responsive email template we created.

image-10

The last step in our responsive email build is to go to, Mailchimp’s CSS inliner tool, which if it isn’t obvious will take our code and automatically add the correct styles to the HTML elements.

So a simple copy and paste, and your code should look something like this:

image-11

ta-da! You have an awesome responsive email template now to send off to your lucky customers. As mentioned at the start of this tutorial, if you would rather just go and grab my responsive email template, please do so! Just go to my CodePen and take it directly from there!

Really hoped this helped, any questions please don’t hesitate to contact me!

Happy Coding!
Levi