How To Make Html Email

Create A Reusable Custom Template

Create an HTML email in minutes

Intercom gives you a selection of four templates to use for your emails. But if you want to create a stylized template that matches your brands design you should create a custom email template using HTML. Your new custom template will get saved as a template in Intercom and you can use it as many times as you like.

Why create a custom template instead of a full HTML email?

You should create a custom template if you want a custom style for your brand but you still want to take advantage of the power and ease-of-use of the composer. Once you save your custom template in Intercom, you can select it as a template and write your email without needing to use HTML.

Create a custom template if you want to:

  • Set the style of your email, including font type, size and background colour.

  • Add a custom header, footer or border.

  • Create multi-column layouts.

Ready to get going? Heres how to create a custom email template in Intercom.

Html Basics: How To Create Html Email Template

A simple HTML email template includes two parts:

  • Header section: Any code placed between < head> and < /head> is referred to as the header section. All the media queries, styling and CSS animations are specified in this section.
  • Body: Any code placed between < body> and < /body> is the body section and the rendering engine uses the code to create HTML email structure.
  • Further Enhancements With Media Queries

    .col-lge 

    This will override the default max-width of 395px and ensure the text spans full width on all screen sizes up to 530px wide.

    Another thing we can fine-tune is the fact that the columns stack immediately once theres not enough room for them to sit together. In reality, there might be some cases where a users screen is a tiny bit smaller than 600px wide, perhaps on a tablet app with a fat sidebar or because they are using Gmail webmail with a narrow preview panel enabled. In these cases, we might want to ensure the two-colum layout does display, so we can configure this with our CSS.

    After the closing } of the media query above, add a second one:

    This one picks up where our previous one left off it went up to max 530px, then from 531px and up well ensure the columns always appear side by side by overriding our pixel max-widths and instead specifying percentages.

    So there we have it! All together, your < style> tag should look like this:

    If there is anything else you want to tweak with media queries, go ahead and do it here!

    You May Like: Find All My Email Addresses

    Know What Email Clients Your Target Audience Prefers

    Although having access to the general stats provided by Litmus is great, we would recommend you checking what devices and email clients your target audience uses. Having this information at hand will simplify the email development process by reducing the number of devices and email clients an engineer has to tailor an email for.

    At Mailtrap, we use Mailchimp and Sendgrid to send HTML email campaigns. Both tools give access to the top email clients and devices our customers use to read our messages.

    If you are using Mailchimp, go to List and check the following stats:

    If you are using Sendgrid, go to Stats, and then Email Clients & Devices. Sendgrid will provide you with several respective categories: Top Devices, Top Webmail Clients, and Top Desktop Clients.

    The Simple Guide To Creating An Html Email

    How to Create an HTML Email Signature

    When you create an email using a drag-and-drop or module-based tool, you’re actually generating an HTML email.

    There are two main types of email you can send and receive: plain text emails and HTML emails, which are formatted and styled using HTML and inline CSS.

    HTML emails are easy to spot most of the styled, multimedia marketing emails in your inbox are HTML emails.

    As a marketer, you’ve probably compared HTML emails versus plain-text emails and realized that there are different benefits to each type. HTML emails aren’t inherently better than plain text emails, and in different situations, both types can be part of a successful email marketing program.

    Heres what an HTML looks like on the front-end. Click on the HTML button to see the code behind it.

    See the Pen HTML Email Template from HubSpot by Christina Perricone on CodePen.

    In this article, we’ll cover how you can get started creating HTML emails, regardless of your experience level and comfort with coding, and share some free templates you can use. Let’s dive in.

    You May Like: How To Get Emails Back On Iphone

    Embedding Html Into Outlook Email

    When your HTML webpage is ready, you can embed it into Outlook email by clicking New Email Attach File:

    Then navigate to your HTML file, select the file , and from the Insert drop-down box select Insert as Text:

    Voila! – Outlook embeds your HTML file into the email body.

    If you would like to delegate all or some of these steps – from creating images, compiling content or HTML, or conducting the whole e-mailing campaign – Lenetek will be happy to help.

    Make Sure Your Html Email Is Responsive For Different Screen Sizes And Devices

    The way your email looks in a user’s inbox depends on a wide variety of different factors.

    One of the biggest and most obvious factors is the screen size of the device it’s being viewed on. An email that looks amazing and well-formatted on a desktop can easily devolve into a tangle of illegible, overlapping text and images when viewed on a smartphone screen.

    To ensure your HTML emails look the way you intended across a wide spectrum of screen sizes, the best thing you can do is keep your layout simple and straightforward. When you start adding more complex elements like multiple columns and floated images, it becomes more difficult to translate the format of your email for different screen sizes.

    If you do decide to develop a more complex layout, make sure you’re actively solving for how the elements will be rearranged to suit different screen sizes. For example, if your email displays as multi-column on desktop, that same structure won’t fly on mobile you’ll need to use media queries to define how elements will be displayed on different screen sizes.

    Remember, developing truly responsive HTML emails goes beyond the structure and format of your message. Think about how the overall user experience of your email will be perceived on different devices. Make sure your font choices are just as legible on mobile as they are on desktop, and use mobile-friendly buttons or CTAs in place of hyperlinked text .

    Read Also: What Does Cc Mean In Email Example

    The Basics Of Html Email

    Lets go over how your emails are broken down. An email has two parts:

    • Header section: This is the top, or head, of your email. Any code entered between < head> and < /head> are going to be translated into the header section.
    • Body: This is basically the rest of your email. Any code placed between < body> and < /body> is going to populate in the body and structure the email.

    How To Add An Html Signature In Gmail

    How to Create HTML Email in Gmail

    If you use Gmail, you can add an HTML signature from a browser on your computer.

  • Select the gearicon in the upper-right corner of Gmail, then choose See all settings.

  • Select the General tab, then scroll down to the Signature area.

  • If you don’t have a Gmail signature set up, choose Create new, and then name the signature. Then, paste your HTML email signature into the Signature field, and edit as desired.

  • Scroll down to the bottom of the screen and select Save Changes.

  • You May Like: How To Restore My Email Account

    Cheatsheet For Targeting Email Clients

    Email clients modify and remove some of your HTML and CSS, often mercilessly. If one of the email clients doesnt behave quite as expected, you might want to treat it separately. A cheatsheet for targeting email clients allows you to pick a target email client and at least attempt to address it directly. It might not work all the time as email clients change all the time, but its something thats worth giving a try.

    Sending Score And Reputation

    Your emails have a reputation and score associated with them. This affects how ISPs and mailbox providers deal with your email, whether they accept or reject it and whether they send it to the recipients inbox or straight to spam.

    Some contributing factors are:

    • your IP reputation ,
    • your domain name signature ,
    • bounce rates and complaint rates.

    Don’t Miss: How To Unarchive Outlook

    Emails Templates That Postcards Can Make

    You should know that postcards can design a different variety of emails it all depends on how creative you can get. For this tutorial, we will use to create a mock newsletter. Other types that can be designed are releases, greetings, sales, delivery, editorial, and many more.

    Html Email Table Border

    Tutorial: Create and Test Your HTML Email Template

    To specify if a table has a simple black border in an HTML email, you can add the border attribute and set it to 1″. To specify that it does not have a border, set the attribute to 0″.

    Notice in the email template above, that each table element has a border attribute set to 0″. Heres a closer look at the syntax of that first table:

    < table role="presentation" border="0" width="100%"> < tr> < /tr> < /table> 

    Lets see how the email changes when the border attribute of each table is set to 1.

    See the Pen HTML Email Table Border by Christina Perricone on CodePen.

    Read Also: Sending Long Videos Through Email

    Youve Created A Simple Html Email

    Before we call it a day, if you have used any comments in your CSS in the head of your file for any reason, get rid of them. Some email clients can choke on CSS comments so its wisest not to include them.

    Now is a good time to do a final test with Litmus, or Email on Acid, and then your HTML email is ready to send!

    Fully Responsive For Iphone Android And All Mobile Devices

    Last year over 50% of emails were opened on mobile devices. You need to make sure your emails don’t break for these use cases or you will miss out on opportunities.

    Getting responsive design right for email is hard.These templates use a special “hybrid” technique that works across all the major clients. Using this technique the email will know what size of screen it is on andthe design responds accordingly to ensure the user has the optimal experience.

    You May Like: How To Find Out Your Icloud Email

    Create Html Emails To Increase Your Subscriber Count

    HTML emails are an engaging way to share whats happening in your business and keep subscribers coming back for more. With the tips and templates weve shared, youre well on your way to creating beautiful HTML emails without writing a single line of code.

    Editor’s note: This post was originally published in June 2019 and has been updated for comprehensiveness.

    Originally published Jun 10, 2021 7:00:00 AM, updated December 02 2021

    Topics:

    Email Clients With No Standards

    How to Create a Professional HTML Email Signature in Under 5 Minutes (for FREE)

    While coding a web page, an engineer takes the following factors into consideration:

    • operating system
    • browser type
    • screen size

    When building an HTML email template, in addition to the operating system and screen size, one has to account for the email client.

    There is a wide selection of email clients that encompasses several web and desktop solutions, where the way an email is displayed depends largely on the rendering engine a system uses.

    Of course, a universal set of standards would be much easier for email clients to support and for developers to comply with. But, unfortunately, we dont have any. Every email client plays by its own rules. Thats why the rendering of CSS by various email clients may differ significantly.

    Don’t Miss: Why Is My Mail Not Updating

    Basic Mailto Link Syntax

    Here is the basic syntax for the mailto link:

    In the browser, the user can click on the link and it will open up their default email client.

    In this example, when I click on the link it opens up my Mail app and the email address is already populated in the to field.

    Using this method, I would be able to send a quick email and return to the website.

    Proceed To Add Quotes

    To add the quotes you can use the content15 section to feature the quote. We added it to the Blockquote text tab and went ahead to add useful information about the author under the Blockquote tab.

    Take note that postcards were not designed to round the image in this section if you want a round image, youd 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.

    Also Check: How Do I Find Out My Icloud Email

    Import Html Emails In Outlook 365

    1. Select more commands to customize your quick access toolbar

    2. Choose the “attach” function and “add” it to the toolbar

    3. Open the “attach a file” window from the quick access toolbar

    4. Select the HTML file you need to import BUT do not click to INSERT yet

    5. Switch the “insert” button with the “insert as a text” button and click

    Here’s the magic! The HTML file will be imported and visualized properly in your email. At this point you’ll just need to send it to your audience.

    I hope this short guide will speed you up when working with HTML emails in Outlook 365.

    I’m looking forward to your comments.

    Maurizio

    Best Practices For Using Html In Intercom

    How to Create HTML Email Signature

    Whether youre sending a one-off HTML email or creating a reusable custom email template, the following best practices apply:

    Inline your CSS styles

    Most email clients require you to inline your CSS styles and it can make for a not-so-nice development experience. Thats because when you want to add a style, you have to add it to each individual < p> tag. And if you want to change the style youve added, youd have to change the style for each < p> tag individually. However, in Intercom you can write your HTML and styles using style tags and classes like you normally would. Then when the email is sent, Intercom will inline all your CSS styles to the appropriate elements.

    Responsive styles should not be inlined

    One caveat is that you should not inline responsive styles block). If they are inlined, they will be applied by default rather than at a specific screen width. Instead, they should be placed inside a style tag with the special incantation data-premailer=”ignore”. This means that these responsive styles won’t be inlined. Any browsers that understand media queries will apply these styles depending on the screen size.

    Add the right data attributes

    Don’t Miss: How To Restore Gmail Account

    Popular Articles

    Related Stories

    Stay on top - Get the daily news in your inbox