How to Code a Simple, Responsive Email From Scratch


Mobile opens now capture 49% of the market share so overlooking mobile-friendly emails is a big mistake. In this tutorial, I’m going to show you how to code a simple, responsive HTML email from scratch. Here is a preview of what the email will look like.





The Approach

This tutorial will break the email down into 3 different parts. If you’re already comfortable with the HTML and styling, you can jump to the media queries section.

  1. HTML Structure
  2. CSS
  3. Media Queries


Create the file

Start by creating a new HTML file within your favourite HTML editor. I like to use Dreamweaver for emails, but tools like Sublime Text or Notepad++ will work too.

Add a background color

The first thing we need to do is to create a table for the background colour of the email. On the web, this can easily be done by applying CSS to the BODY tag. However, email is a bit more complicated. CSS needs to be added to the BODY tag and a 100% width table needs to contain the background colour as well.

Create a table use bgcolor=”#e9e9e9″./p>

Update the body tag to also have the same background colour as you chose for you 100% wide table.

Now your HTML document should look like this:

Add the container table

Next, create a table that will hold the contents of the email, within the table cell of the 100% width table.

The email should look like this.


Add the header

Create another table that will container the header and insert the logo. Give this table a width of 90% and center it. This will create some padding on either side.

Now, the email should have the logo in it.


Add the Banner Image

Directly under the header table, create another table to hold the banner image.

The email will now contain the banner image.


Add the Content Section

Directly under the banner table, create another table to hold the main content for the email. This table should be the same width as the header (90%) and should be centered, to create padding on each side.

No styling has been added yet but it should start to get some structure.


Add a Call-to-Action button

Inside the main content area (right underneath the text). Create a new table that will act as the call-to-action button in the email.

Add the Footer


All the HTML is done. Now, the styling can be put in place.


Header Styles

Add some padding to the header and center the logo. The CSS has to be inline and inside the tag.

Style the Main Content

Style the Button

Style the Footer

Styling is DONE!

Here is what the code looks after adding all the styling.


The Media Queries

Add the Viewport Meta

The viewport meta tag needs to be placed right before the title tag.

Add the CSS and the Media Query

2 CSS classes will need to be added to scale down the email on mobile properly

  1. .device-width: This will be added to the 600px container table and the image.
  2. .btn-full: This will be added to the table that was created for the button.

Add the Classes to the Elements

Add the class device-width to the big image and the 600px wide container table. Also add the btn-full class to the table that contains the call-to-action.

Now if you shrink down the email template, it should detect the screensize and scale the email perfectly.



Email me, or send me a tweet @jennamolby.

Related Posts

  • 11/06/2019
    How to Turn Any Email Template into a Pardot Email Template

    Do you know you can turn any email template into a Pardot email template? With a couple of modifications to the HTML, you can have a fully functional Pardot email template which allows you to remove, edit and duplicate sections. In this tutorial, I will show you how to take any free, responsive email template and turn it into a Pardot email template.

  • 06/12/2018
    Creating Pardot Email Templates: Common Questions & Answers

    Can my Pardot email be responsive? Why doesn’t my background image appear in Outlook? Can Pardot emails be drag & drop? I get asked these questions a lot from Pardot users and see them posted frequently in the Trailblazer Community. Let’s dive into these questions as well as other common Pardot email template questions.

  • 24/10/2018
    How to Create a Net Promoter Score Survey in Pardot

    Learn how to build a net promoter score (NPS) survey directly in Pardot. I will show you how to create an NPS survey that asks the recipient to give you a score from 1 – 10 using an in-email rating that directs them to a Pardot landing page to collect more information.

2 comment(s)
  • Andrew

    26/08/2015 at 1:04 pm

    This is awesome, thank you for making it easy to follow.

  • Jo

    23/08/2015 at 5:24 pm

    Thank you for the break down - it makes it so much easier this way for those trying to get started and for getting your head around responsive email.

Leave A Comment

Your email address will not be published. Required fields are marked *

About Me

Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a Marketing Operations leader.

Most Commented
Popular Posts