How To Send Out Html Emails

Building An Effective Html Email Template

Send emails from a HTML Contact Form

If youve been building websites for long enough to remember the glory days of GeoCities and Angelfire, you probably built your first websites using tables for layouts. Building an HTML email today will take you back to those heady times, although with rather less use of the < hr> tag.

Go ahead and stick a bookmark in this section, because youll want to come back to it every time you start building a new email template. Well cover the tips and tricks that make it possible to attain good results for as many of youror your clientsreaders as possible.

The only client that still needs HTML tables is Outlook for Windows Desktop, so until that is deprecated, youll need to understand how email clients render tables, even if it is just to fallback to table layouts for Outlook.

But first, its important to know who youre sending to.

Import Html To Email Directly

You dont have to write the HTML source body text in your applicationmanually. You can build a html file with HTML tools and use ImportHtmlBody method to import the html file directly.

You can also refer to the htmlmail.* samples in EASendMail Installer. Those samples demonstrate how to build a HTML emaileditor and send HTML email with attachment or embedded images/pictures.

Next Section

At next section I will introduce how to attach file attachment to email messagein C#.

See Which Platforms Your Audience Is Using

Although its definitely not a best practice, there are some marketers out there who may not have the time or resources to develop a CSS-friendly email template that works across the board. So, as a result, they might just try to optimize their email so it works for most of their audience.

Apple Mail remains the most popular email service. Roughly 40% of people use it to read their emails. Thats followed by Gmail at around 20%. But that doesnt mean your contacts are using the same platforms.

For instance, if you are a B2B company that sells data center services, the majority of your customers may read their emails in Outlook on their work desktop. But if youre a B2C company that sells clothing, youre probably seeing more customers opening emails on mobile in Gmail.

If you know your audience, you can format your emails so they work in the most popular platforms, and sacrifice the quality that the minority of your audience will see.

It should be repeated that although this is an option, its definitely not recommended.

Also Check: Sending Mp4 Via Email

Now Simply Send Your Html Email

Pro tip: Test before sending your HTML email. You can send your first email to someone from your team to make sure its perfect.

Why should you send an email newsletter using Gmail if you have a limited number of recipients?

It is indeed easier to create and send your newsletters HTML emails using services like MailChimp or GetResponse. But this makes your emails prone to be delivered into Spam or Promotions folders. Its because these services use public servers that send hundreds of thousands of emails every second, most of which would be reported as spam.

When these emails are sent from your Gmail/Gsuite account, theyre highly likely to be delivered in your recipients Primary inbox folder. Since Gmail servers dont send out mass emails like some other services, emails sent using Gmail are assumed to be important for the recipient.

Read this article How To Send A Newsletter With Gmail Effectively to start sending your newsletters from Gmail.

But, if you have a list of 10k recipients or more, then you can not send a newsletter email to all the recipients in one day.

Gmail/Gsuite accounts have limitations in terms of their sending rates and limits. Google limits every Gmail account to send 500 emails, 2000 for Gsuite.Read this blog to know more about Gmail and Gsuites daily sending limit.

So if you have limited recipients, you can send an HTML email template in Gmail using Saleshandy.

  • Tags

Keep An Eye On Metrics And Test:

Quickly Send Predefined Email Message from Outlook

See what works and what doesnt through A/B testing.

  • What subject lines lead to a higher open rate?
  • What CTAs drive more traffic to your site?
  • What types of emails get the highest unsubscribe rate?

All of these tips should help you to get the most out of your email newsletters!

Note: Since Apple now allows users to block open rate tracking, we recommend using the click rate as your key metric. Though some email providers will provide you with an approximation, the click rate will actually give you a better idea of how your newsletters are converting.

Don’t Miss: How To Recover An Old Email Account

Create The Content Area

Moving on from the header, lets now concentrate on our HTML emails content area. First off, well add some padding to the Row 2s cell so that the table inside has some space around it, as per our design, so that it now looks like this:

< tr> < td style="padding:36px 30px 42px 30px "> Row 2< /td> < /tr> 

Now well replace the Row 2 text with another table to nest our main content inside. When building HTML email using tables, we need to nest them because colspan and rowspan are not widely supported across email clients.

< table role="presentation" style="width:100% border-collapse:collapse border:0 border-spacing:0 "> < tr> < td style="padding:0 "> Row 1< /td> < /tr> < tr> < td style="padding:0 "> Row 2< /td> < /tr> < /table> 

Weve set the width of this table to 100%. Its good practice to use percentage widths rather than using a pixel value wherever possible because this will help you further down the track if you want to make your email responsive, or even if you simply need to adjust the width of your email later on. Percentage widths will automatically adapt to a new container size, whereas pixel widths would all need to be individually updated.

Now well add our content to the top row, which is a heading, a paragraph of text, and a final paragraph with a link inside. At this stage, we arent adding any styling at all to these elements.

Replace the ‘Row 1’ text with the following:

Replace ‘Row 2’ with this table:

Adding The Main Table

Now let’s place a table of 602 pixels wide inside the container table.

600 pixels is a safe maximum width for your emails to display comfortably within most desktop and webmail clients on most screen resolutions, and we’re adding 2 pixels so we can have a 1 pixel border around the outside, which adds a pixel on either side.

Well replace our little Hello! greeting with this table.

< table role="presentation" style="width:602px border-collapse:collapse border:1px solid #cccccc border-spacing:0 text-align:left "> < tr> < td style="padding:0 "> Hello!< /td> < /tr> < /table> 

Great! Now we have our outer table, and our main content table sitting inside, ready for some rows of content.

Read Also: How To Get Your Old Email Back

The Best Way To Send Html Email With Gmail Without Coding

Creating HTML email messages that look great without coding should be simple. Thats why HTML editor software exists. Tools like BEE provide users with a flexible email editor. This makes it easy to create an HTML email and send it with Gmail.

To get started, youll need a BEE account. then head into the Settings page.

Inside the settings select Connectors and click Connect on Gmail. Next, you can choose which Google account to connect to. Just click on the account you want to link and click Allow when asked.

Did Your Recipients Open Your Emails

How to Send HTML Email Templates with Outlook 365

After knowing how to send emails from Salesforce, wouldnt it be interesting to know whether your recipients have opened your emails? Follow these steps:

  • Head towards contact record to whom you have just sent an email.
  • Proceed towards the HTML Email Status section.
  • You will see a line item of the most recent email and a column call # of times opened. You can also see other data columns such as Date Opened and Last Opened.
  • You May Like: How Do I Get My Email Back

    How To Create An Html Email

    Good news: You actually dont need to know how to code to create an HTML email.

    Most tools that create and send email will offer pre-formatted, ready-to-go HTML templates that enable you to design emails without ever needing to access the actual code on the back-end.

    As you make changes in the email editor, those changes will be automatically coded into the final product. Email building tools like this are an ideal option if you don’t have an email designer on your team, but you still want to send professional-looking marketing emails.

    Still want to create an HTML email from scratch?

    If you’re comfortable with HTML and want more direct control over the code of your emails, most email tools will allow you to import HTML files directly for use as custom email templates.

    There are a wide variety of free HTML email templates available on the web , and if you know your way around an HTML file, it’s usually quite straightforward to adapt the template to the email building tool of your choice.

    To create an HTML email completely from scratch, you’ll need to have an advanced knowledge of HTML . This guide offers a solid overview of coding a basic HTML email. Because the process of creating an HTML email from scratch can be quite involved, we recommend working with a developer or using a pre-made HTML email template instead.

    Developing an HTML email specifically for HubSpot?

    Be Careful With Tables Background Color And White Space

    Even though many email clients support padding and margins, the results are always inconsistent. If the spacing is essential, then the developer can nest tables inside their main tables instead.

    Regarding background color, it is essential to have a wrapping table all around the content. Setting the background color attribute on the content will ensure that email clients do not do away with the background on the < body> tag or whatever is set on the developers style sheet.

    Away from that, in theory, all whitespace in HTML files ought to be ignored. However, in practice, it can cause various issues, especially if there is whitespace in between the table cells. As such, it is essential to eliminate any spaces in between the closing tag of one cell and the opening tag of the next to remove layout problem and unpleasant gaps.

    Check out the way National Geographic makes use of black background color. It elaborates the space topic making an email a mysterious piece of art. In addition, the brand has taken special care of the text color for the sake of contrast.

    Recommended Reading: Restore Email Account

    Important Note When Using Paragraph And Heading Tags

    When using paragraph and heading tags you must specify your top and bottom margin settings, otherwise each email client will apply their own wildly different default margins to these elements. You also need to make sure your top and bottom margins are set to zero if you don’t want any at all, in which case you would set your heading to margin:0 . If you only want a bottom margin, you should still set the top margin to zero, e.g. margin:0 0 10px 0 .

    With that in mind, we’ll set our desired margins on all our tags, and we also want to set the text colour to be #153643, which we can apply to the cell, as everything inside will inherit that colour. After these changes, the whole cell looks like this:

    < td style="padding:0 0 36px 0 color:#153643 "> < h1 style="font-size:24px margin:0 0 20px 0 font-family:Arial,sans-serif "> Creating Email Magic< /h1> < p style="margin:0 0 12px 0 font-size:16px line-height:24px font-family:Arial,sans-serif "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan et dictum, nisi libero ultricies ipsum, posuere neque at erat.< /p> < p style="margin:0 font-size:16px line-height:24px font-family:Arial,sans-serif "> < a href="" style="color:#ee4c50 text-decoration:underline "> In tempus felis blandit< /a> < /p> < /td> 

    Now, moving down to our two-column area, add the color to each of the 260px wide cells so that they both look like this:

    Html Email Best Practices

    Easily send the same email to multiple recipients ...

    An HTML email is the use of a type of HTML to provide an email with semantic markup and formatting abilities that is not possible with plain text email. It helps marketers to create stunning emails that drive more sales and increase customer engagement.

    Texts are fitted into the width of the viewing surface instead of breaking each line at every 78 characters. HTML email allows the provision of tables, colors, mathematical formulae as images, charts, and diagrams. They assist companies in building brand recognition.

    Why is HTML email important? 64% of people say that they prefer HTML emails over plain text emails. This high approval rating is due to the following benefits of HTML emails:

    That said, here are the HTML best practices to help businesses achieve those benefits.

  • Avoid Flash, JavaScript, and Complex CSS/HTML
  • Recommended Reading: How To Put An Image In An Email

    Problem: Once You Send An Email A Lot Of How Its Rendered Is Out Of Your Control

    We updated some of our brand designs recently, and made changes to our email templates to match. To test the templates, we rendered sample emails in the browser and everything looked perfect. However, once we started sending emails to ourselves to verify, we noticed some issues. We were seeing emails appearing without a header, without a logo, and with the wrong colorsit was a mess.

    We quickly diagnosed the problem and realized it wasnt on our end. Instead, the issue was that email service providers like Gmail or Outlook dont all render emails in the same way. Coding an HTML email is not the same as coding a webpage, where you can expect browser support to be fairly consistent and up-to-date with the latest CSS modules. There are many more limitations and differences to be aware of.

    Html Vs Plain Text: Whats The Difference

    Lets start by taking a quick look at the differences between plain text emails and HTML emails.The simplest explanation is that an HTML will contain images and colors while a plain text email contains no images, no graphics, and no formatting.

    Here is an example plain text email:

    And here is an example HTML email:

    Now, its important to note that many mistakenly call HTML emails with minimal formatting plain text emails. These emails will actually be HTML, but are designed in a way that they appear to be sent as if coming from a colleague or friend. Theyll feature no or very minimal use of graphics and simple text formatting. Heres an example of that:

    Well call these hybrid emails because even though they are not exactly a plain text email, they do imitate plain text emails.

    Don’t Miss: How Do I Restore My Gmail Account

    Browse And Customize Bee Templates Inside Gmail

    When you log into your Gmail account, youll see the BEE logo on the right side panel. Click on it and open any email in your account and then the plugin menu will appear in the sidebar.

    In the Gmail compose window, youll only be able to do a few things with the HTML email:

    • Change the body copy of the email.
    • Remove and replace images.
    • Change the subject line.
    • Update the CTA button and links.

    Youll need to get a free BEE account to do more with the HTML templates. In BEE, you have way more options to edit HMTL. When youre editing basic templates in Gmail messages, you will be limited. Once youre done editing your template, you can send your emails.

    Popular Articles

    Related Stories

    Stay on top - Get the daily news in your inbox