How To Make Html Email Templates

Option : Start With A Bee Html Template

Build Responsive HTML Email Templates with HTML Tables & CSS

Go to beefree.io/templates to scan through more than 200 professional HTML templates to get started. You dont need to register or log in to use the editor, and all the templates are free. . You can filter by industry, purpose/occasion, or search by tag to find the template thats perfect for youfrom newsletter templates to event promotion templates. Or of course you can just scroll and browse.

Whichever HTML template you select whether simple or more ornate you can completely customize it. Add your own text and images change the fonts and font sizes update the CTA button color and size, and more.

Here are some resources for customizing your template:

Identify Your Audiences Viewing Habits

The first step in building a successful HTML email is to know how it will be read. If the subscribers are all going to be reading your email on their company Outlook email, for example, this might point you toward using plaintext.

In most cases therell be a mix of email clients in use, but there are a few ways to find out. Campaign Monitor publishes some overall statistics for email client usage that give a broad overview, albeit with some limitations. Or you can take a look at Litmus Email Market Share site.

Theres no guarantee that these reflect your audience, though. Campaign Monitor and a variety of other email service providers will give you a report for each campaign, listing the email client for each subscriber where available.

What youre looking for in these reports is your lowest common denominator. If theres 30% using Lotus Notes 7, for example, youll need to make sure you specifically test in that client before sending. A particular version of an email client might be relevantOutlook 2003 will cause you far fewer headaches than Outlook 2007, and in some cases, your list might only use one version.

Its worth remembering that over the past few years the number of recipients reading email on their mobile devices has grown to 50% of the time. In some markets, more than 70% of emails are read on mobile. Making sure your emails are responsive will give a better client experience, especially as mobile email consumption only continues to rise.

How To Create An Html Email Template

Creating an HTML email template is a lot easier than it sounds. You dont even have to know how to code.

Seriously.

All you need is an email marketing provider.

These days, email providers have created numerous free templates for their customers to use for their email marketing campaigns. And the leading providers templates are all written with HTML, XHTML, or HTML5 .

With Constant Contact, you can create an HTML email in a few ways:

  • make a customizable branded email marketing template
  • choose a non-branded template and make it your own
  • use a customizable blank template
  • insert custom code into an advanced editor
  • or have Constant Contacts professional services team build one for you

But, before we get down to choosing the best method for you, let me give you an idea of why you want an HTML email template.

You May Like: How Do I Get My Old Email Address Back

Adding A Two Column Section That Stacks On Mobile

To add this layout, insert a new row after the previous closing < /tr> :

< tr> < td style="padding:35px 30px 11px 30px font-size:0 background-color:#ffffff border-bottom:1px solid #f0f0f5 border-color:rgba ">         < /td> < /tr> 

You can see were setting the font-size to zero on this cell. This is because we are going to place two inline-block divs side-by-side inside this cell, and if there is a font size greater than zero, a gap can appear which causes them to stack.

I have also added a 1px bottom border on this row. Ive added a fallback border of a solid #f0f0f5, but then as an enhancement I specify an RGBA colour which will use some transparency: rgba. This is just a little trick to help improve the appearance of the email when viewed in Dark Mode. Outlook.com in particular doesnt adjust border-color in Dark Mode, so you can be left with a generally dark email with really bright borders. It will however respect the transparency within our RGBA setting, so the semi-transparent shade will be laid over the adjusted background, resulting in less of a clash. Any clients that dont respect RGBA will just fall back to the hex colour.

Setting Our Column Widths

17 Responsive HTML Email Templates ~ Email Templates ~ Creative Market

I want a left-hand column of 145px, and a right-hand column of 395px. Fluid hybrid columns work in a similar way to the outer wrapper. They are set to be fluid up to a fixed pixel max-width, and at their max-width they should comfortably sit side-by-side, giving us a multi-column layout on larger screens.

As soon as there isnt sufficient space for the columns to side side-by-side, they still stack down on top of each other, and as the screen size becomes smaller than the columns max-width, they remain a fluid 100% wide. In this way, we have a set of columns with responsiveness baked into them, which means we arent reliant on media queries to do these transformations for us. We can apply media queries on top of this behaviour to further fine-tune it in clients that support them.

As with our outer container, we need to use a Ghost Table for Outlook on Windows, because it doesnt support the CSS we need to achieve this. So we need set up a two column ghost table for Outlook on Windows.

Replace the marker with the following:

As mentioned in the aside above, you can see how this method requires some doubling up. We have the first column in our Ghost Table, where I have set the width, the text alignment to left, and vertical alignment to top, all done using a mixture of HTML and CSS. Then the div inside, div.col-sml, has all of the same settings again, this time all in the CSS.

Recommended Reading: Recover Old Email Account

We Provide The Code For Our 3 Default Templates Here

We recommend picking the one you like the best as a starting point, and paste its code into the editor.

The reason we suggest starting with one of our templates as a base is because there are several variables that are required in a ConvertKit template, namely:

  • A place for the content you add in the email editor to go, using the } variable

  • A valid unsubscribe link, using either the } variable on its own, or the } variable if used for the value of the href attribute of an anchor tag

  • A physical address, either manually typed in or automatically populated from the one in your account settings using the } variable

These elements must all be added correctly for your template to be functional and compliant. Since our default templates include all of these, and are valid out-of-the-box, it’s often easiest to duplicate one of those and customize it to your liking from there.

NOTE: We’re won’t prevent you from writing your own template code from scratch if that is your preference you’ll just have to be sure to include all the elements above in order for it to function properly. If you run into trouble, we have a troubleshooting guide here.

Be Conscious Of How Long Your Html Emails Take To Load

How long your email takes to load could very well be the difference between gaining a new customer and losing a frustrated subscriber. While it can be tempting to take advantage of all the different styling options and opportunities to incorporate visuals that HTML emails offer, none of that matters if your email takes too long to load.

As you design your HTML email, remain conscious of how long your email will take to load especially if someone is, say, opening your message on their morning subway commute with a weak data connection. Here are a few little steps you can take that will go a long way towards improving load time.

Use images sparingly.

That way, youll bolster the message you want to get across to subscribers. Always use an image compressor to reduce the file size as much as possible. Most image compressors can significantly reduce the file size of an image without compromising on quality, so taking this extra step won’t hurt the visual integrity of your email.

Use standard web fonts.

Custom fonts are great for spicing up a landing page, but they can add an extraneous layer of complexity when added to an email. As we talked about above, all email clients handle style elements differently, and this especially extends to fonts. To be safe, use standard web fonts and check to make sure the email client most of your subscribers use supports a particular font.

Try an HTML minifier.

Keep your message focused on a single objective.

Recommended Reading: How To Get An Old Email Account Back

Building The Hero Section

We’re going to work our way down the email, starting with the hero section:

I’m going to dive right in and show you the whole code at once, we’ll break it down bit by bit after. It’s not as daunting as it looks!

Lets get into it! Here is our opening of the table:

< table width="640" cellspacing="0" cellpadding="0" bgcolor="#" class="100p"> < tr> < td background="images/header-bg.jpg" bgcolor="#3b464e" width="640" valign="top" class="100p"> < !--> < v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px "> < v:fill type="tile" src="images/header-bg.jpg" color="#3b464e" /> < v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> < !--> < div> 

The first bit is easy, a table that’s 640 pixels wide. It has a class of 100p which, as we touched on earlier, forces it to 100% width on smaller screens:

< table width="640" cellspacing="0" cellpadding="0" bgcolor="#" class="100p"> < tr> 

The next bit is a bit more tricky. This is controlling the background image. As we know, the beast that is Outlook doesn’t support background images. But, have no fear! The VML hack is here!

< td background="images/header-bg.jpg" bgcolor="#3b464e" width="640" valign="top" class="100p"> < !--> < v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px "> < v:fill type="tile" src="images/header-bg.jpg" color="#3b464e" /> < v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> < !--> < div> 

Here is the code. Don’t get too scared, we’ll break it down.

Insert Custom Code Into An Advanced Editor

How to Send HTML Email Templates with Outlook 365

If you know how to code in HTML, have a designer who will be creating code for you, or have a set of code that youve created in another program, then you can create an HTML email template using your own code.

All you have to do is choose the Custom code option.

Then, work through a couple of pages of basic, but important information, including naming your email, indicating whether your code is in HTML or XHTML, filling out your basic information, writing your subject line, adding some personalization, and completing your footer information. After that, select the advanced editor where you can add your custom code.

For more complete instructions, read this article from our product Knowledge Base, found under Help in your account.

And that brings us to the one option that takes no work on your part at all:

Don’t Miss: How To Restore Gmail Account

Create The Body And Main Table

First, well add an overall structure for our email, starting with a < body> tag. Add the code below directly underneath the < /head> tag:

< body style="margin:0 padding:0 "> < table role="presentation" style="width:100% border-collapse:collapse border:0 border-spacing:0 background:#ffffff "> < tr> < td align="center" style="padding:0 "> Hello!< /td> < /tr> < /table> < /body> 

You can see the margin and padding on the body tag are set to zero to avoid any unexpected space.

Weve also added a table with a width of 100%. This acts as a true body tag for our email, because the body tag is sometimes removed by email clients. Apply any ‘body’ background colour that you want to this table tag.

All our tables will be set to role=”presentation”. This makes them more accessible, as it tells screen readers to treat it as a visual table, not a data table.

We have set border-collapse to collapse, and both border and border-spacing to zero to avoid any unexpected space in the table.

You’ll notice we are using < td align=”center”> , and if you’re already familiar with HTML you might be wondering why, since align is actually a deprecated HTML property. We use it because email clients vary so widely in their level of CSS support, and often we still need to use deprecated HTML to ensure everything displays properly everywhere. In this instance, it is because Outlook for Windows does not obey margin:0 auto in CSS to center things.

Html Email Best Practices

  • Make sure your HTML email is responsive for different screen sizes and devices.
  • Make sure your styling works in different email clients.
  • Be conscious of how long your HTML emails take to load.
  • Plan for end-user inconsistencies.
  • Conduct thorough testing.
  • Now that you understand the basics of what goes into developing an HTML email, let’s go over a few important best practices you should keep in mind. No matter what method you plan to use to create HTML emails, these best practices will help improve the design, user experience, and deliverability of your emails.

    Read Also: What Does Cc Mean When Your Sending An Email

    Colorlib Email Verification V11

    This template will do you well if you want to make your verification emails more personal. You can showcase who is behind the brand with a picture, which is a nice touch. Moreover, this web design is also very minimalistic, making sure everything comes into view stunningly. And if you would like to perform improvements and adjustments, you can do that.

    Along with the main compartment, there is also the footer area, which you can use for additional text and links. The necessary unsubscribe note is also there.

    What Is An Html Email Template

    How to Create and Send HTML Email Template in Gmail?

    HTML is the code that defines the structure and content in an email marketing campaign. It lets you add different elements to your email, such as images and hyperlinks.

    An HTML email design means you can create enticing email templates with loads of visual appeal and interactive elements. You have the creative freedom to get your message across more effectively and stand out in a cluttered inbox.

    However, any developer knows that creating HTML email templates from scratch can be extremely challenging and tedious, not to mention there are now about a million different ways that email can render on desktop on mobile.

    Also Check: How To Find My Icloud Email Address

    Other Benefits Of Using Html Templates From Saleshandy

  • You can share your templates with your team members with just one click. You will find saved templates listed under Team and Personal labels in your list of templates.
  • You get access to detailed analytics on the performance of each of your templates, like open and click rates. This will help you compare your templates and improve them.
  • Saleshandy also provides integration with Outlook. If you are an Outlook user, you can use templates in your Outlook.
  • You can send automated personalized emails using templates and mail merge campaigns on Saleshandy. Apart from that, you can also schedule automated follow-up sequences to be sent based on your recipients behavior .
  • You can assign access rights of your templates folder to your teammates on various levels like Create, Edit, and Delete permissions.
  • Create and save email template directly from Gmail using Saleshandys Chrome extension.
  • Directly send email templates from your Gmail Compose box and use shortcuts to save time while loading your template in the compose box.
  • Popular Articles

    Related Stories

    Stay on top - Get the daily news in your inbox