As we mentioned, almost every paid or free email marketing tool has a builder with responsive email templates — why not take one of those and customize them to the moon? While it’s a quick and easy way to build your emails if you’re a newbie, it has its drawbacks.
Here’s why you may want to build a responsive email template from scratch:
Did we convince you to build your own responsive email template? If yes, keep reading — here’s a detailed guide on creating an email template from scratch.
Here’s a thing. You likely won’t be coding a template with all the styling in a text document, since most people use email editing software that may or may not give you access to code. That’s why we won’t show you the code alone — we’ll also use the Selzy builder as an example. Also, since our builder offers no-code previews, it will be easier for you to see how the code renders.
Keep in mind that you’ll be able to repeat the same steps in any no-code email builder — their user flows are quite similar.
When you start building an email from scratch, the code looks like this:
Wait, this email is empty. Why do we see so many lines of code then?! Let’s do a quick rundown of all the basic elements. You should keep them in and build upon them.
This “epigraph” instructs email clients how to render your email — if you remove it, the page will display weirdly. For example, the code above means that this is an HTML email that specifically uses HTML 4.01, and includes the link to a web page that explains this document type in English. We’re not going into heavy details here — check out this website if you’re interested in why HTML 4.01 is cool.
Let’s examine the rest of the code, piece by piece.
In our case, both margins and paddings are set to zero, which means that the email “occupies” the entire space available for it.
Even though this is the baseline code, it already has records indicating the responsiveness of your future email template. Don’t remove these!
Now, once we have the baseline, let’s alter it to our liking.
You may ask: why is there a table in an empty email template? It’s because tables are the baseline of any email — every content element is placed in a table cell. Here’s a demonstration.
This is called a table layout — and, to define your email template structure, you need to come up with your own. As you can see in the picture above, your table doesn’t have to be a very even grid with the same amount of cells in each row and column. It can actually be as complex as you want! If you’re using a no-code builder, you can drag and drop your template structure using premade empty blocks. And if you’re coding, you need to mark up the structure using a lot of <td> and <tr> tags within the <table> tag.
In Selzy, you can create a unique table structure with pre-made empty Blocks. To do this, go to Blocks and click Empty. Here, you’ll have several layout options for rows — feel free to stack them in your email template.
For demonstration, I created a relatively simple email structure. It has three identical blocks that will become the hero section, the main text, and the footer with the unsubscribe link.
As you can see, although the email is still empty, there’s a lot more code now. Let’s break it all down using the Selzy builder navigation. When you click on a certain element in your preview, the coinciding code part is highlighted.
Here’s an example:
But why is every block a nested table? This is simply what pre-built Selzy blocks look like — they’re built like tables inside tables.
The highlighted table (the inner one) is where you will put all your email content. Technically, you can do a layout without tables inside tables — the Selzy builder blocks are made this way for more email customization options. For example, you can set up separate background colors for the “main” cell and the “second” table, add frames, and other stuff. When you’re coding emails from scratch, you can even build the table inside this table for more complex layouts and more customization — it depends on your creativity.
What will the two-column block look like in this case? Here’s an example:
This block is also a table inside a table. However, unlike the previous one-column block, the “second” table has three instances of <td>. It means three cells — the first (smaller) column, the space between the columns, and the second (larger) column.
Once you create the empty table, it’s time to bring some life into it — starting with the visuals.
CSS stands for Cascading Style Sheets, and it’s a code piece that describes the styling of HTML elements of a web page — for example, an email. There are several types of CSS:
Let’s take a closer look at the embedded CSS we previously added. The styling info is stored in the <style> element of your template’s <head>, which is the metadata haven of your email template.
Let’s take a closer look at these records:
And here’s what the inline CSS looks like — here’s how you will customize the design of every single element in your email:
Here’s the text version (we’ve already added this code previously):
As you can see, this inline CSS style prescribes everything from font to line height. This code also has a semantic markup tag: “strong” is not just “bold”, it also highlights importance. Semantic markup tags are important for email accessibility.
We’ll use some of these later — now, let’s build a responsive email template from scratch.
The first element your subscribers will see is the header or hero section. Let’s create a hero section with text and an image in the background. The hero section is the first row in our table layout — so that’s where we’ll add the necessary code for the background image. Here’s what it will look like:
Here’s the text version of the code:
You already know that this block is a table cell. As you can see, I increased the top and bottom paddings to 50px so the hero section looks larger. Here’s what’s new:
Now that the empty header is ready, let’s add text to it.
Here’s what the code looks like:
<div> stands for “division”. It’s an HTML element styled with CSS. You can see the style record right next to <div>. Let’s break down its attributes:
Why do you need the “font-family” parameter and store the specific font info separately? You need this so your newsletter looks close enough to your original design in case some fonts are unavailable. For example, if Mulish is unavailable, your subscribers will see Helvetica or Arial instead. Mulish is sans-serif too, so, these fonts are the closest approximation.
Now, it’s time to customize the rest of the table! I can’t give definitive instructions here since you may have a different template structure. So, keep in mind that this is just an example. The template I’m making for the demonstration consists of three table rows. We already customized the hero section, which is the first row. The second row will be our main content area. It will be quite simple — I’ll add the placeholder “Lorem Ipsum” text and change the design a little bit.
Here’s what it looks like in the Selzy builder:
Time to look at the code!
Here’s what I did:
Now that we have the main text, let’s add an image. I want it placed under the main text but within the same main content block, which is the second main table row of our email. For each new element in a block, Selzy creates a new nested table automatically. So, since we’re adding an image to the second table row, the row will get another one-cell nested table specifically for the image. As I mentioned, it’s the Selzy builder quirk for more design customization options — you don’t have to do this but this type of layout has its benefits.
Here’s what it looks like:
Here’s a quick code rundown:
Now, let’s take a closer look at these parameters:
Now that we have our header and main content blocks set up and ready to go, let’s finish it off by customizing the third row of the table layout — it will be the email footer with the mandatory unsubscribe link. The process won’t be that different from customizing the hero section. All we need to do is change the background color and add a short text with the unsubscribe link.
Start by changing the background color — I used a dark blue shade, similar to the header background image.
Now, let’s add a short text to the nested table in this block.
You’re already familiar with most of the tags so we’re not repeating those. Here’s what’s new in this code piece:
And there we go! Here’s a simple responsive email template I built:
Now, it’s time to test the email template to avoid issues while sending real campaigns.
When testing the responsive email template, it’s important to check the following:
And here’s how to test all these characteristics:
So, you know how to build a simple responsive email template using HTML and CSS, and you know how to test it. But simply knowing how to do something is not enough to do it well. Here are some tips that can help your email look great on any device:
Creating responsive email templates via HTML is a bit harder than only using your favorite no-code builder without peeking under the hood. However, it can give you a lot of creative freedom and independence from your email software changing or going out of business. And, if you remember the basic principles, creating responsive emails won’t be as tedious anymore!
Here’s how to build a responsive email template from scratch:
