How To Send An Email Template

The article below is © copyrighted. Please do not reproduce or duplicate it.

HTML Email Newsletter Templates F.A.Q.

Even though our website mainly deals with WordPress related subjects; we thought writing a simple tutorial about the process of sending email templates would be beneficial, considering that email is still one of the most powerful and inevitable online marketing tools.

What is an email template?

It’s just an HTML document. Email Tempates are still using old techniques from the late 90s like table based layouts to ensure consistency across many different email providers.

You should always use Inlined CSS when sending an email template

WHY?: Some email providers strip the CSS out from the head section of the HTML email document (i.e. GMail), making all of your styles invisible and ineffective. Absolute bulletproof solution is using inline styles.

If you’ve bought a premium email newsletter template to build and send an email campaign, then chances are high that the download package will contain both Embedded CSS and Inlined CSS versions of the HTML document.

  • Embedded CSS: All of the CSS stylings are grouped together at top of the HTML document, within the Head section. For example, please check the humble HTML/CSS code example below. It styles the text content between all of the “P (paragraph)” tags in entire HTML with the color “red” by assigning them a hexadecimal color (#ff0000 = red) globally. Defining the rule once will be enough to display any “paragraph text” with the color red. Practical, right?

The advantage of Embedded stylings will become more obvious when we discuss about how the presentational customizations can be applied to templates.

embedded css in email template

  • Inlined CSS: Instead of keeping all of the CSS stylings in one, centralized place like we did above ; they are applied to each tag individually where they appear. As you’ll be seeing, this approach is far from being practical, but unfortunately is a must for email marketing. Thankfully, there are many online services and responsible email marketing companies that handle this process automatically for you. For example, Mailchimp offers an automatic “inliner” when you’re sending your campaign, which transforms any HTML email template’s Embedded Stylings into Inlined CSS.

Inlined css in email template

How to make changes to the content

Where to edit HTML Email Newsletters?: You can use any code editor or text editor ; even their simplest forms would be fine, like NotePad on PC or TextEdit on Mac®. NotePad++ and SublimeText are also free and very useful options which can be downloaded online.

Some coding environments like Adobe® DreamWeaver® use WYSIWYG (what you see is what you get) editors which you should stay away from. Using DreamWeaver is fine but you should use its “code” view (from top menu, View > Code).

Use a newsletter template with Inlined CSS, fill with your content and send it: As we’ve said before, any responsible author (the developer of the templates) would include both Inlined and Embedded versions of HTML documents. If you’re fine with the template’s default presentational stylings (colors, fonts choices, font sizes etc.) and only need to change the content with your own (images, text content and links) , you can just use the Inlined version to send your email.

How to change images?

You should use “src” attribute of the “img” tag to define the path of your images as you see below, where the template pulls necessary image (picture590x270.jpg) from a folder named “pictures”.

updating images inside newsletter template

Note: When sending email campaigns, many prefer to host their images at their own server where they also host their website. Using this approach can (and will) make your email campaigns lighter because they will be pulling necessary images from your server. Please keep in your mind that if you prefer to use this approach, you must use absolute paths as the path of your image inside the “src” attribute. An absoulute path basically defines the directory of the image on your server. The example below pulls the image (picture590x270jpg) from a folder called “email-images”, which resides inside the server of your website.

absolute image path within email

How to change text content?

We use only two tags to present text in our templates to keep things simple; which are “td” and “a” (anchor tag) for the links. Other templates may use “h1″, “h2″, “h3″, “p”; even “ul” tags for the lists. All you have to do is to find the text between those tags and change them with your own. Inline stylings could result in long code, please be very careful while replacing the text and don’t destroy the HTML architecture.

Changing text content

Quick Tip: Replacing the “green” section you see above with a “mailto” HTML link opens the default email client in users’s computers, when clicked.

Mailto in email templates

How to make changes to the presentation

Here we will be talking about the CSS stylings which can be used to alter presentational properties like font-size, color, background-color, line-heights, font-weight, letter-spacing and many more.

Embedded versions of the templates are basically there for your comfort, providing a much practical way to change elements’ stylings. All of the CSS code you have to deal with are grouped in one place, between the “head” tags of your HTML document. You can very easily customize presentational properties of the individual elements from a centralized place.

IMPORTANT: The trick is to make all of the presentational changes (if you really need to customize the presentation) within a layout that uses Embedded CSS and if you satisfy with the end results after performing all of the necessary customizations, making the template’s styles Inline by help of an online service like Mailchimp’s Inliner tool. This useful service transforms all embedded styles into inlined versions within a couple of seconds. Basically, copy and paste your entire HTML code into the box provided by the tool, and let it do the hard work for you. Copy the end result and paste it into your document.

IMPORTANT 2: Mailchimp’s CSS inliner service may also strip out the Media Queries if you check the option “Strip Original Style Tags” (which shouldn’t be happening). Media Queries are the code pieces used in responsive email templates which are responsible to make templates responsive. We’ve had a recent email conversation about this matter with the helpful, fellow support staff of Mailchimp; and a fix is already on its way. However, please always check your code when you copy and paste the inlined version into your document.

Mailchimp Inliner Tool

  • How to change the theme color of the templates: Changing the templates’ main theme color is a smooth process. Performing a “FindAndReplace” action would be enough to have a new custom theme color. For example, let’s assume that you want to change an imaginary template’s current theme color, which is defined as #ff675f by the developer.
    1. Open the HTML document with your favorite text/code editor.
    2. Trigger a “Find And Replace” action from your template’s default theme color to your target color. This will replace all of the #ff675f color codes with the color code that you’ve specified while creating the findReplace action.
    3. Don’t forget to save your document to see changes in effect, and open your HTML document in a browser to see if everything is right. (right-click on the HTML file’s icon > open with > your favorite browser)
    4. If your template’s layout uses graphical elements (i.e. buttons), you should also customize their colors via Adobe® Photoshop® or an other Graphic Editor program to achieve a complete color change.

changing templates theme color

How to add/remove modules to build your own layout

Each section of our email templates are clearly described within HTML code. If you’re not code savvy (and you don’t have to be), you can still easily find your way with help of deeply commented sections.

For example, “Module” sections are created between descriptive comments (each module represents an individual piece of the layout), stating the beginning and ending of each module. You can select a whole module like we did below, copy it and paste it into an another place between any other module, or completely delete it if you wish. If the template is mobile responsive, layouts will also remain responsive and mobile friendly.

Modules and commented flexible structure

Modules in html email newsletter template

How to make “Forward”, “Subscribe”, “Unsubscribe” links work

First things first: Each email campaign you’re about to send MUST have an unsubscribe link, and again, it’s not a choice but a MUST.

With Mailchimp:

We mostly use Mailchimp as our Email Service Provider to send our newsletter campaigns, and as you have been guessed our templates already include Mailchimp specific “merge tags” to make Forwarding, Subscribing and Unsubscribing actually work. “Subscribe” feature becomes very useful where one of your subscribers forward your email campaign to their friends, and one of them wants to become a subscriber of your list. Those special tags are placed as a value of the “href” attribute of the anchor tags, as you see below:

Mailchimp specific merge tags

It’s also possible to offer more alternatives to your users by taking the advantage of Mailchimp’s Template Language. We also suggest you to read the wonderful source related to the subject of Merge Tags, which is a very easy concept to grasp and gives you many possibilites to enrich your subscribers’ email experience.

With Campaign Monitor:

Campaign monitor uses their own tags to serve to the purpose. Instead of including them into the “href” attribute of an “anchor”, they use completely independent tags for Forwarding and Unsubscribing. For more information about the template language Campaign Monitor is using, you can refer to their template language section.

campaign monitor unsubscribe forward

How To Send Email Templates

You can’t use email services like Yahoo®, GMail® and Outlook® to send HTML email templates as your newsletter campaigns. They are good at displaying HTML email content, but not at sending them. You should use an email marketing service provider specialized in sending mass HTML newsletters, like Mailchimp® and CampaignMonitor®.

As we’ve stated before, we use Mailchimp especially for their user friendly interfaces. They also have a Free Option for up to 2000 subscribers.

Signing Up With Mailchimp

Please type www.mailchimp.com in you favorite browser’s address bar and go to their home page. Sign up with an account, provide your email address and Mailchimp specific password ; and finally confirm the confirmation email they’ve sent to your email address. While you’re filling in the necessary sections related to your organization/profile details, you will be also forced to fill the section “Website URL”. If you don’t have a website yet, you can also add your social media account to finish the process.

Create Your List

By following the route below, you can create a subscribers “list” which will be receiving the newsletter campaigns you’re about to send.

Creating list with mailchimp

Right after clicking the “Create List” Button you see below you should fill in the required “list” options; like “name of the list”, default “From” email address, and a note to remind people how they got on your list.

Click button to create subscriber list

Once you’ve succesfully created your list, Mailchimp offers enough options to populate your list including options to import your existing subscribers by using a CSV File or add them manually.

populating subscriber list

Create Your Email Campaign And Send It To Your List

The process starts with selecting the “Regular Ol’ Campaign” from the drop-down menu which stands at the top-right corner of the screen. When you click on it, you’ll be greeted with a screen where you will be choosing your target list for the campaign.

Creating your html email campaign

After selecting the target list, you should click “Setup” from the menu which resides at the bottom of the screen:

mailchimp-bottom-menu

At the “Setup” screen, you should fill in the “Name Of Your Campaign”, “Email Subject”, “From Name”, and “From Email Address” sections. Once you’ve filled in all of the input fields, click “Template” from the bottom menu. Template section is the place where you finally upload email newsletter template into Mailchimp.

selecting the template as ZIP file

As you see, you’ll be uploading a ZIP file, actually

  • If you’re hosting the images of your newsletter, ZIPping only HTML file will be enough, you don’t need to include your images separately. All of the required images will be pulled from your server (because you’ll be using absolute paths for your images).
  • If you’re not hosting your images, you should also add the folder which contains all of the images of your newsletter. Your ZIP file should include the Inline HTML File and the image folder.

Zipping up the newsletter HTML

Once your ZIP file is uploaded into Mailchimp, all you have to do is to click “Confirm” from the bottom menu to finally send your campaign to targeted list of subscribers.

F.A.Q – HTML Email Newsletter Templates – Copyright © WPThemesCafe.