How To Create Html Email Template

Mailercloud’s Custom Html Editor Allows You To Code Your Own Unique Templates Here Is The Detailed Guide On How To Create Templates

How To Create A Responsive HTML Email Template with HTML5 & CSS3

Why should you use a custom HTML email editor?

Create satisfying, responsive, and engaging emails using HTML code. Here are two reasons why you should use a custom HTML email editor.

  • For making a unique content layout.

  • For sending a luxurious and satisfying email campaign

Before you start

  • Prepare a rough sketch of the template if you are building an HTML template code from scratch.

  • Make sure the template you code suits the message you want to convey.

  • Or find a custom-coded template to copy and paste the HTML code.

How to use Mailerclouds custom HTML editor?

Mailercloud lets you build your own unique templates by adding HTML code by typing the entire code or simply by copying & pasting. Mailercloud gives you a preview of the HTML code just after you code. Follow the steps:

1. log in to your Mailercloud account.

2. Start creating a Campaign

3. Click on Choose email Template

4. Select Copy and Paste editor

5. Now you can type in your HTML code.

6. Or simply copy-paste any HTML code for your Template.

7. Personalise your email templates by adding custom tags.

  • Choose the custom field tag you need from the list that appears.

8. Click Continue and preview your unique Template.

9. Publish your Campaign.

What Tools To Use To Test Your Email Template

An email template that has not gone through a stringent QA or testing process is a recipe to quickly reduce your email subscribers, and also the sign of an inexperienced email marketer. Uplers provide hand-coded email templates that are tested against 40+ email clients. Yet, in case you make any alterations, it is a good practice to test your email templates once your email developer sends them across.

  • Email template rendering
  • Googles Accessibility Developers Tools
  • Wave Tool
  • Getting Started With Html Email

    If youre just trying to understand everything thats happening behind the scenes of a quirky world of HTML email, Caity G. OConnor has published a wonderful guide on how to start with email coding. The article features courses, tutorials, articles, and just general guidelines to keep in mind when building and designing emails all in a comprehensive one-page-guide. On SmashingMag, Lee Munroe has published a detailed guide to building and sending HTML emails as well.

    Alternatively, How to Code HTML Emails for Any Device is a very thorough guide on building a reliable HTML email template, and how to test it along with a hands-on example of building a newsletter template from scratch. In general, thats a very solid overview of everything you need to know to get started on the right foot.

    Jason Rodriguez has a detailed video course on HTML Email with pretty much everything to know about them, from accessibility to troubleshooting, workflows and tools.

    And if you find yourself struggling with an email issue or just looking out for some help from a community, #emailgeeks is a great starting point. Its an invite-only Slack community with plenty of channels to discuss code, design, job openings, events and new tools and resources. You can also find many resources shared with the hashtag .

    You May Like: Can You Recover An Old Email Account

    What Is A Plain Text Email

    Before the integration of HTML coding in the early 1990s, emails were plain text emails available only in Unicode formatting . Even after HTML was widely adopted, plain text emails still held their own importance and till date, ESPs send a plain text version along with their HTML counterpart. Also, many email marketers make it a point to create a plain text version, as emails risk getting into spam folders.

    The advantages of using plain text emails are:

    • To supersede the spam filters of certain email clients like Outlook and Gmail, as they require the plain text versions of HTML emails.
    • Some email clients do not support HTML versions, which means that your HTML letters risk getting into spam folders.
    • There are people who prefer plain text emails to HTML.

    While data says that plain text emails get better open rates than HTML email template, a plain text emails lacks the luster of HTML emails and it thus heavily relies on a strong email copy to improve the click rates.

    Now, lets take a look at what HTML emails offer and how to make an HTML email template.

    Test For All Email Clients

    How to Create a HTML Email Template (3 of 3) Check more at ...

    Although most of the major email clients support media queries, not everyone is on board with them at all times. Sometimes providers change their stance on them. Therefore, testing your emails on several clients before sending them is essential. This is possible with Copernica marketing software. Furthermore Copernica shows you which clients and which devices are used by your audience, so you know what to focus on while testing and designing.

    You May Like: How Do I Delete My Email Account

    Simple And Free Html Email Templates

    There are an overwhelming amount of HTML email templates available on the web, and they vary in quality, responsiveness, and price. We’ve pulled together a selection of free HTML email templates that provide a responsive user experience. Be sure to read the terms and conditions on each individual template before use.

    Configuring Our Logo Image

    We want the logo image to be fluid at small sizes but limited to a maximum fixed width, just like our outer container.

    Here I want it to be 80% wide on small screens up to the point where it reaches a maximum of 165px on larger screens. To implement all this, we can replace the img tag with this one:

    < img src="images/logo.png" width="165" alt="Logo" style="width:80% max-width:165px height:auto border:none text-decoration:none color:#ffffff "> 

    The width=”165″ is very important for Outlook on Windows, as it will respect this size. For all other clients, in our style attribute, we set it to be 80% wide, with our pixel max-width, and set the height to auto so the image retains its aspect ratio. I have also included some colouring and styling to prevent the linked image ALT text rendering as blue with an underline.

    And there we go! Our logo is done, and if you resize your window youll see it flow between 80% wide and 165px, whichever is smaller.

    Adding A Header With A Logo Image

    Replacing the marker, add the following table row markup:

    < tr> < td style="padding:40px 30px 30px 30px text-align:center font-size:24px font-weight:bold "> < a href="" style="text-decoration:none "> < img src="images/logo.png" alt="Logo"> < /a> < /td> < /tr> 

    Here we have our cell with some padding, and inside is a logo wrapped in a link. On the cell I have also set the text alignment, size and weight, so that our ALT text looks nice if people have images turned off, or they dont load.

    A Repository For Email Bugs

    How To Create A Responsive HTML Email Template

    Apple Mail not showing embedded SVGs, Gmail not displaying emails at full width, Outlook changing the behavior of animated Gifs we all know how weirdly email clients sometimes behave.

    To help you understand whats going on when you come across bugs like these, RĂ©mi Parmentier maintains Email Bugs, a GitHub repository for weird email client behaviors. It not only makes the life of email designers easier by providing a place to discuss bugs but also tries to reporting each bug to the concerned company and fix them for good. But just in case its not possible, How to Target Email Clients provides an overview of workarounds to target specific email clients.

    Option : Build An Html Email From Scratch In Bee

    Want to start creating from scratch? We can do that too! Lets say we want to build a stunning, simple HTML email like this one we recently received from the print company MOO

    Its engaging, mysterious, and super fun to look at. Plus, the basic structureopener text, CTA, imageis one that can be used for almost any kind of email. And check out the GIF!

    Well start by going to and selecting Start from Scratch.

    Then with our lovely blank canvas, we can begin building. Lets first drag in placeholders for our content. The main body of the email has a layout that flows from image to header text to CTA button to image . Well pull in those elements from the Content menu on the right, so our structure looks like this:

    Next well drop in our images and update the textincluding on our CTA button.

    We need a background color! Use an HTML color code matcher like this one to get just the right hue . Paste in your color code in the Settings menu.

    Lastly, well adjust the font , adjust the padding around images a bit, link our CTA button and images, and thats it! Our email is ready to roll.

    Now that were ready to send, we can simply click the Save button in the upper right corner, then download the HTML email.

    Your downloaded message will contain a zipped file with the HTML and images, which you can import to the email client of your choosing.

    Heres a look at the contents of the zip file

    And when we look at the email itself, heres the HTML code behind what we built

    Hiring An Email Developer

    With full-time email developer salaries being quite the investment, some businesses – big and small – may want a more budget-friendly alternative. This is where you have to decide whether youll settle on an in-house email developer or go the agency route. Both have their pros and cons and the ultimate choice depends on which model is best suited to your businesss needs.

    In-house Email Development Teams – The Pros and Cons

    Hiring in-house email development teams is especially advantageous to big brands that need dedicated email developers. But apart from having a dedicated team of email developers, here are some other advantages of hiring in-house:

    • Easier communication of vision.

      Because in-house email developers are part of your organization, they understand your vision easier.

    • Allows you to be hands-on.

      If you enjoy being part of the creative process, having an in-house team gives you that opportunity.

    • Revisions can be faster.

      Because communication is easier, any revisions or adjustments to projects can be carried out faster.

    • Better understanding of your brand.

      Because of being dedicated to running campaigns for your brand, in-house email developers have a better understanding of your brand.

    Cons of Hiring an In-house Email Developer

    These, and other factors that are more nuanced towards your business, are the considerations you have to take into account as you consider hiring an in-house HTML email developer.

    Pros of Hiring an Agency for Email Development

    What Is Html And Why Do I Need It

    In laymans terms, HyperText Markup Language , is the computer language that is used to create web pages. And, its what turns plain-text emails into visual, web-page-like experiences.

    Without HTML, wed be back to only sending the old type-written plain-text style of emails. We wouldnt be able to have the images, colors, fonts, and an email GIF that we currently use to make our emails visually appealing to our readers.

    Besides being more visually appealing, HTML emails also allow for hypertext and tracking codes .

    Optimising Buttons For Mobile

    How to Create and Send HTML Email Template in Gmail?

    Well turn our footer link into a nice fat button on smaller devices, since this will make it easier to tap with a finger.

    If we return to the < head> of the document, we can insert the following code inside our < style> block underneath our font rule:

    This media query will change the appearance of our button on screens that are narrower than 530px wide.

    Now if you refresh and make your screen smaller, you will see the link turns into a nicely tappable button:

    What To Pay Attention To When Writing An Html Email

    Although HTML is a really simple framework, there are several features/limitations of Gmail that you need to be aware of. Here are the main ones:

    1. Images need to be hosted online and available publicly

    If you were to add images to an email, they would be stored as attachments. This is probably not the ideal way for a recipient to access the pictures. Thats why images need to be uploaded somewhere on the internet and referenced with a link in the HTML code.

    If possible, store them on your own server or use, for example, Google Drive. When uploading to the latter one, make sure the link is public, not private . When uploading to popular image sharing services such as Imgur or Tinypic, make sure you fetch a direct link to an image, not to a folder where its stored.

    2. External style sheets wont work

    Gmail doesnt offer support for external styles. You can, however, utilize embedded CSS as well as Inline styles. A good responsive email typically consists of a fair share of Inline CSS, used mainly to maintain a proper structure and styling of a message. Embedded CSS is used to add CSS Reset Styles and rules required to make an email responsive.

    3. You cant use web fonts

    Gmail doesnt let you utilize any of the web fonts and theres no way to import them into your HTML. Youll need to use one of the available fonts in your emails:

    What Newsletters Will You Send

    Use Vero to send useletters to your customers. Integrates with Airtable, PostgreSQL and more. Send up to 20,000 messages per month free.

    Select a template to begin

    • Notification
    • Promotion

    Plain text emails look like this:

    They still convey the message but might not be the best fit for your brand. HTML emails give you more styling options, but theyre difficult to create.

    The Key Features To Look For In An Html Email Template Builder

    There’s a vast market of HTML email template builders. There are options available for every necessity and every budget. Variety is good, until the time to make a choice comes. When looking for the best HTML email template builder for your business, you need to make sure you know what comprises a great tool.

    There are a few key features every great HTML email template builder should have for you to get the most out of your experience using it:

    Over To You: Use Email Templates For Your Next Campaign

    How to Send HTML Email Newsletter Templates with Gmail

    Now that you have all the resources you need, there are no more excuses to send boring emails. Whether youre using downloaded email templates or a drag-and-drop design tool, youre ready to start sending beautifully-designed emails that convert!

    After creating the design that you want to use whether using a template or creating your own email dont forget to use email list segmentation and personalization tactics in your message content to achieve the maximum amount of engagement.

    And, if youre creating a newsletter, be sure to think of the users needs first.

    For more content like this, subscribe to our newsletter and and !

    About the Author

    Popular Articles

    Related Stories

    Stay on top - Get the daily news in your inbox