How to Create Responsive HTML Email Templates

Postcards is a new innovative tool that can be used to create fully responsive and amazing HTML emails. It is built with an easy to use drag and drop feature that makes the designs and customization very easy to build.

In this content, you will learn how to design your very own newsletter using Postcards. It is very efficient, being one of the fastest and most essential tools for skilled excellent templates without the need to have prior coding or design experience.

For those who have had postcards in mind at a time, you can follow this tutorial to get your fully responsive designs up and running. To follow this walkthrough effectively, you can sign up for a free account or better yet, if you already have an account, follow to learn how to make your emails creatively and with a great degree of details.

Email Preview

Emails templates that Postcards can make

Setting up your template

A list where your new template will be added will appear, select it, and this will take you to a template view where creation and editing can be done.

You need to take time out in exploring the site and sections that are present on the right side menu. You can see many functions to work with there. With postcards, things are straight to the point and concise.

Section Selection

The order of arrangement of the section used is, Header1, Content9, Feature7, Content15, Call to Action2, and finally, Footer8. You will find the names right above the displayed images; you can select them and move on. Even if you don’t select them chronologically, you can always make adjustments.

If you select a section by accident, you can hover over it and click on the trash icon that appears above it. The example below shows you how the template will look like.

Header Customization

In the general tab section, you can make changes to the background. Postcards help to simplify things by adding the dimensions of the images attached. For instance, the Header1 is 600x320 px. Even if you add or upload a larger resolution, it will render it to the default size.

You can equally change the color of the text from white or whatever it is to your preferred color of choice. At the title tab, right at the bottom, you can see the text color that you can change. We will be changing it to #393b40. You can also change the text title for this template from “Weekly Digest” to “Weekly Newsletter.” After that, you can edit the subtitle in fashion. You can change the date too to when you want it to be released. Don’t also forget the color.

You can upload your brand or business logo at the header tab. All you need to do is upload and resize if need be. If you erase the dimensions set there, postcards will help change it to a default setting of 50px.

When you scroll down the page a little bit, you will find a section where you can add the logo link, and for the menu items too. Only change the URL to that of your link. Editing the menu item is easy; click them. You can start by changing their color, for this, we’re using #393b40. You can also change the links to connect to Instagram, Facebook, Dribble and your website. You can remove any link you don’t want too.

Making out your content

We have also uploaded a new post image. Postcards are smart enough to round the corners of the image for you. By default, the image size is 520x400px; you can keep it this way or alter it. Even if you resize your picture to be larger or smaller, postcards will help adjust to accommodate the default width.

You should also shed off the parts you don’t need. For example, the subtitle, we do not need it. The release date has been decided, and we are sharing just a single post. You should add space between the text and the image, convert the subtitle to a period and convert it to the same color of the background.

The next thing we are going to do is to add the title of the blog post and update the color to #2d778e. Finally, you can add a description of the blog post of the post text including an inline link too. On the other hand, the link can be edited manually using the source code editor in the tools drop-down menu.

If you are familiar with inline CSS, you can edit the text area. With this editing, you can equally adjust the font size and the weight and the link color, for this walkthrough let’s select #f18e8c.

Time to adjust the feature section to your taste

The boxes tabs would come with two boxes, but you can delete one or retain both depending on your needs. Start with changing the background. The height will be set only according to the context of use that goes for the title, icons, and description texts. Here, we changed the title to “Brand Visibility checklist” which is the name of the PDF file included, you can then proceed to add a short description. Make sure you add a link in the description yet once more. We changed the link color to white and made the font weight bold using the inline CSS. We also changed the text alignment in the description section to align left.

Proceed to add quotes

Take note that postcards were not designed to round the image in this section if you want a round image, you’d have to create it and upload it for yourself. But you can edit the colors of the texts that are in this section. Use any color you feel is best for you.

Next is your Call to Action

We have also changed the title to “what are you waiting for?” and the button text is now “Read the newest post.” You can pretty much make the button background and text colors look how you want. We are choosing a beautiful shade of pink — #f18e8c and set the value of the text to white. You can remove anything else not needed.

Time to customize the footer

Proceeding to the bottom of the page, you will see the place where you can edit your icons; this is in the first column. We prepared icons like Facebook, Instagram, and Dribble and replaced the default ones there. After replacing the icons, we changed the links too and removed the link we no longer needed. Be careful to edit the default height and width to make sure match your icons. We removed the phone number. We then changed the email color to be in sync with the design that is #f18e8c.

Final touches

General Settings

Email template live preview

Exporting Time!!!

Proceed to copy and paste this code into whatever email marketing software you use such as MailChimp, ConvertKit and any other one. Make sure you replace the texts with their shortcodes in the app you use. Also, make sure you upload all the images and logo used in the template, and you are all set!

Conclusively

You can have fun with the demo version, but after it expires, you would have to pay a token of $15 every month. Be a part of this amazing new wave and have only the best, professional, and easy to use template builder. The results are inspiring yet simple; with this innovation, you can build very flexible and sleek looking templates for different email styles.

Email marketer and developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store