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.

Desktop

Mobile

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.

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

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.

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.

Questions?

Email me, or send me a tweet @jennamolby.