How To Create a Designed Newsletter Email Template

To Create An Email Template We Should Use Tables And Inline CSS

Email templates are created using HTML tables, that are styled using inline CSS properties, First, we’ll add an overall structure for our email, we will create a basic HTML document with a basic HTML tag and a language attribute, then meta tags, an empty title tag, a head tag, and a body tag.

Note: We will add a style tag in our head tag temporarily just to display the borders of the table cells while we are creating the content.

You can see the margin and padding are set to zero on the body tag to avoid any unexpected spaces that email clients add. Also, we’ve added a table with a width of 100%. This represents our true body tag for our email because the body tag is sometimes removed by email clients.

All of our tables will have the attribute (role=”presentation”). This tells screen readers to treat it as a visual table, not as a data table.

also, we set border-collapse to collapse, and both border and border-spacing to zero to avoid any unexpected spacing in the table.

You have noticed that we are using align center on the main table column, which will center our content. You might be already familiar with HTML coding and you may be wondering why I used align keyword when it is a deprecated HTML property. The answer is that email clients vary in their level of CSS support, and often we still need to use deprecated HTML to ensure everything displays properly everywhere. it is because, for example, Outlook for Windows does not center content in any other CSS centering techniques.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        table,
        td {
            border: 2px solid #000000 !important;
        }
    </style>
</head>

<body style="margin:0;padding:0;">
    <table role="presentation" style="width:100%;margin:10px auto;border-collapse:collapse;border:0;border-spacing:0;">
        <tr>
            <td align="center" style="padding:0;">
                Content!
            </td>
        </tr>
    </table>
</body>

</html>

We’ll replace our temporary “content!” text with a table with a maximum width CSS property of 600 pixels which is the safe width for your emails to fit within most desktop and webmail clients on most screen resolutions. And on mobile screens, it will fit the screen. And it is good practice to give it a border of 1 pixel with a solid color, to differentiate the content of the body of the email and I gave it here a gray border.

<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">
    <tr>
        <td align="center" style="padding:0;">
            <table role="presentation" style="width:100%;max-width:600px;border-collapse:collapse;border:1px solid #dddddd;border-spacing:0;">
                <tr>
                    <td style="padding:0;">
                        Content!
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Nice! Now we have our outer table, and our main content table sitting inside, ready for some rows and columns of content. We will create the 4 rows that our design has:

The Header.
The Introduction Title and The Paragraph Text.
The Two Posts Row.
The Footer.

This is the code of the 4 empty rows of the content table:

<table role="presentation" style="width:100%;max-width:600px;border-collapse:collapse;border:1px solid #dddddd;border-spacing:0;">
    <tr>
        <td style="padding:0;">
            Row 1
        </td>
    </tr>
    <tr>
        <td style="padding:0;">
            Row 2
        </td>
    </tr>
    <tr>
        <td style="padding:0;">
            Row 3
        </td>
    </tr>
    <tr>
        <td style="padding:0;">
            Row 4
        </td>
    </tr>
</table>

Note: make sure you always set the padding on your table cells to zero or a specific amount, because if there is no padding to be applied to any of the sides, you must explicitly set it to zero. This is a rule in HTML template development.

The Header

Ok, next in our email design we’re going to focus on Row 1. Inside the column add the header image, and notice that the path should be absolute to a folder on your server, so insert the full remote URLs for each image into your code. this way the email clients will render the images of your email template. And all images should have a display property set to block.

<tr>
    <td style="padding:0;">
        <img src="folder-on-server/header.jpg" width="100%" style="height:auto;display:block;" />
    </td>
</tr>

The Introduction Title And The Paragraph Text

Let us continue in the second row we will add the heading one and the paragraph tags, specifying the font family inline along with the font size and text-align CSS properties.

Note: when using paragraph and heading tags in email templates, you must assign top and bottom margin properties, because each email client applies its different default top and bottom margins to them. but in my case, it would not be a that big problem, so I will not set them.

also notice that I put the padding of the content table to 10 pixels on the top and bottom edges and 30 pixels to the left and right sides to give the content some spacing.

<tr>
    <td style="padding:0px 30px;">
        <h1 style="font-family:Verdana;font-size:20px;">Heading One</h1>
        <p style="font-family:Verdana;font-size:11px;text-align:justify;">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
            survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            <br /><br /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
            type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
    </td>
</tr>

The Two Posts Row

Now let us create the 2 posts row, which is row3, we create a table with a width of 100%, and all the basic CSS properties we explained before, and it is good practice to use percentage widths rather than using a pixel value wherever possible for tables width because this will make your email template responsive which will fit on all mobile screens, as it will automatically adapt to new container size.

This table has 3 columns with a width of 47%,6%, and 47% sequentially added to the columns which makes a total of complete 100% width, with a vertical-align CSS property set to the top. Also, the padding of the parent container cell is 30 pixels to the left and right sides, it is a good practice to keep spacing constant on your design although some designs might break this rule, this style fits our design, where the 2 posts content will align perfectly with the previous introduction paragraph content in row 2.

<tr>
    <td style="padding:0px 30px;">
        <table role="presentation" style="width:100%;max-width:600px;border-collapse:collapse;border:0;border-spacing:0;">
            <tr>
                <td style="padding:0px;width:47%;vertical-align:top;">

                </td>
                <td style="padding:6%;">

                </td>
                <td style="padding:0px;width:47%;vertical-align:top;">

                </td>
            </tr>
        </table>
    </td>
</tr>

we insert the content of the 2 posts accordingly, with heading 2 titles, an image, and a paragraph with all the rules we followed previously.

<tr>
    <td style="padding:0px 30px;">
        <table role="presentation" style="width:100%;max-width:600px;border-collapse:collapse;border:0;border-spacing:0;">
            <tr>
                <td style="padding:0px;width:47%;vertical-align:top;">
                    <h2 style="font-family:Verdana;font-size:16px;">Heading Two</h2>
                    <img src="folder-on-server/post1.jpg" width="100%" style="height:auto;display:block;" />
                    <p style="font-family:Verdana;font-size:11px;text-align:justify;">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </p>
                </td>
                <td style="padding:6%;">

                </td>
                <td style="padding:0px;width:47%;vertical-align:top;">
                    <h2 style="font-family:Verdana;font-size:16px;">Heading Two</h2>
                    <img src="folder-on-server/post2.jpg " width="100%" style="height:auto;display:block;" />
                    <p style="font-family:Verdana;font-size:11px;text-align:justify;">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </p>
                </td>
            </tr>
        </table>
    </td>
</tr>

The Footer

Next, we will create the final row which is the footer section, as a start let us give a background color to the cell of the design blue color. And make our consistent padding again.

Then we will repeat the previous three columns’ table but with different alignments, the first cell is aligned left and the third cell is aligned right. And we make the text color white.

<tr>
    <td style="padding:0px 30px;background-color:#096cb3;">
        <table role="presentation" style="width:100%;max-width:600px;border-collapse:collapse;border:0;border-spacing:0;">
            <tr>
                <td align="left" style="padding:0px;width:47%;vertical-align:top;color:#ffffff;">

                </td>
                <td style="padding:6%;">

                </td>
                <td align="right" style="padding:0px;width:47%;vertical-align:top;color:#ffffff;">

                </td>
            </tr>
        </table>
    </td>
</tr>

Now We Fill The Content Like This

Part 1: Unsubscribe Statement

<tr>
    <td style="padding:10px 30px;background-color:#096cb3;">
        <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">
            <tr>
                <td align="left" style="font-family:Verdana;font-size:10px;padding:0px;width:47%;vertical-align:center;color:#ffffff;">
                    If you no longer want to receive this newsletter
                    <a href="#" style="font-family:Verdana;font-size:10px;text-decoration:underline;color:#ffffff">Unsubscribe</a> from this newsletter instantly
                </td>
                <td style="padding:6%;">

                </td>
                <td align="right" style="font-family:Verdana;font-size:10px;padding:0px;width:47%;vertical-align:top;color:#ffffff;">

                </td>
            </tr>
        </table>
    </td>
</tr>

Part2: Name Contact Details And Social Media Icons

<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">
    <tr>
        <td align="right" colspan="5" style="padding:5px 0px;">
            <h4 style="color:#000000;margin:0px;">Some Business Name</h4>
            <a href="#" style="font-family:Verdana;font-size:10px;text-decoration:underline;color:#ffffff">email@some-domain.com</a>
        </td>
    </tr>
    <tr>
        <td style="padding:0;width:40%;">

        </td>
        <td align="right" style="padding:0;width:15%;">
            <img src="folder-on-server/facebook.png" width="100%" style="height:auto;max-width:34px;display:block;" />
        </td>
        <td align="right" style="padding:0;width:15%;">
            <img src="folder-on-server/instagram.png" width="100%" style="height:auto;max-width:34px;display:block;" />
        </td>
        <td align="right" style="padding:0;width:15%;">
            <img src="folder-on-server/twitter.png" width="100%" style="height:auto;max-width:34px;display:block;" />
        </td>
        <td align="right" style="padding:0;width:15%;">
            <img src="folder-on-server/youtube.png" width="100%" style="height:auto;max-width:34px;display:block;" />
        </td>
    </tr>
</table>

All these properties and ways of building tables have been explained previously just have one note, which is every single element for example the anchor tag should have its separate CSS properties because the elements of a specific parent element do not always inherit their parent element especially if the child has multiple states like hover effect.

Finally

At this point, it’s a good practice to send your HTML code through real emails client services like Outlook, Yahoo, and Gmail. while you are Leaving the borders on all the tables and cells, which can be helpful to see what’s happening in each email client.

we delete the style tag in the head tag of the HTML document to see the final clean design without borders.

Just a final note before we end our lesson, if you have used any comments in your CSS in the head of your file for any reason, get rid of them. Some email clients ignore CSS comments so it’s better not to include them.

Thank you in advance, for supporting the blog and the YouTube channel of Gemini Tutorials.

posted by Emad Zedan on 04 May 2022 in UX/UI Design, Web Design

Tagged with:

CSS3 Gemini Tutorials HTML5 JavaScript

Our Latest Blog Articles

Where Does UIUX Come From?

User Interface (UI) and User Experience (UX) design are critical aspects of modern digital product development. But where does UIUX come from? To understand the roots of UIUX, we must…

How To Use the Relative “rem” Font Size Unit for Responsive Web Design Media Queries?

In today's mobile-dominant world, websites need to be as adaptable as a yoga master – effortlessly adjusting to any screen size. Responsive web design (RWD) is the key to achieving…

Visit Our Blog

Top

Gemini Tutorials Blog