How to Code a Simple, Responsive Email From Scratch

In:

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.

Desktop

email-styled

Mobile

media-queries

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

The HTML

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.

container-box

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.

container-box-header-with-logo

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.

big-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.

email-only-text

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

HTML is DONE!

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

The CSS

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.

email-styled

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.

media-queries

Questions?

Email me, or send me a tweet @jennamolby.




Related Posts

  • 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.

  • 24/05/2017
    8 Tips for Creating Marketo 2.0 Email Templates From Scratch

    Over the past couple of months, I have been creating email templates using the new(ish) email template syntax in Marketo and I’ve learned a couple tricks along the way. To save you from some headaches, here are 8 tips that I’ve learned from creating Marketo 2.0 email templates from scratch.

2 comment(s)
  • Andrew

    26/08/2015 at 1:04 pm
    Reply

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

  • Jo

    23/08/2015 at 5:24 pm
    Reply

    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 sales and marketing professional.

LEARN MORE

Categories
Most Commented
Popular Posts