loginradiusloginradius Blog

HTML Email Concept

If you choose to code your HTML email by hand, there are many different things you need to use while creating HTML email.

The two types of email you can send and receive are plain text emails (any email that contains just plain old text with no formatting) and HTML emails, these are formatted and styled using HTML and inline CSS. HTML email is the use of HTML to provide formatting and semantic markup capabilities in an email that are not available in plain text.

An HTML email is designed just like a website with the help of graphics, table columns, colors and links. A non-programmer can also create it since email marketing services provide flexible campaign builders. Email client vendors have not been as developing as web browser vendors in adopting new standards.

Definition

Emails which are formatted using Hypertext Markup Language(HTML), as opposed to plain text email.

How to Create an HTML Email

Many tools that create and send an email will offer pre-formatted, already built HTML templates that allow you to design emails without knowing or accessing any code of back-end.

The best way to understand any process is to do it yourself, from level zero. We make any changes in the email editor; those changes will be automatically coded into the final result. This email building tool is the best option if you don't have an email designer, but you still want to send any professional marketing emails.

If you want more control over the code of your emails and you are comfortable with HTML(that is just basic and easy), most email tools will allow you to import HTML files directly for using it as custom email templates. They have a wide variety of free HTML email templates available on the internet, and if you are familiar with HTML, it is a straightforward process to use that template in the email building tool of your own choice.

To create an HTML email from scratch, you will need to have advanced knowledge of HTML. Because creating an HTML email from scratch can be quite tricky, we recommend you to work with a developer for this process, or you may go with a template for an easy process.

If you choose to code your HTML email by hand, these are the necessary steps you need to use while creating HTML email:

  1. The perfect email template size should have 600-700 max-width.
  2. If the design has animation, then use .gif animated file because interactive elements like Flash, JavaScript, or HTML forms won't work in most email inboxes.
  3. Try to use HTML tables (HTML tables present tabular data in a semantic and structurally appropriate manner) for your presentation.
  4. To improve the presentation of Web, use inline CSS within your HTML email.
  5. CSS style should be either in a separate CSS file or below the body tag and not under the head tag.
  6. To save yourself from trouble, avoid the use of CSS shorthand code.
  7. The most genuine way of coding background colors is to use six-digit hexadecimal code for color (like #000000, i.e. for black).
  8. Be sure always to use "display: block;" for your image tags (either inline or embedded CSS) because this takes the baseline out of the equation and keeps everything arranged neatly and in order.
  9. If you wish to have padding on columns, it might be more cross-browser, so you can always create spacer DIVs in between the columns (or between rows).
  10. You need to use absolute paths for your images.
  11. Try adding a line-height and font-size of 1 under "" (or the desired size).
  12. Inline styles to and tables are the right way to go for Html email.
  13. In an HTML table, you can set the cell padding and cell spacing to zero to eliminate the unwanted spacing in your layout.

How to send HTML emails through Outlook?

  1. Select more commands to customize your quick access toolbar(suggestion).
  2. Choose "attach" function and then "add" it to the toolbar.
  3. Open "attach a file" window from the quick access toolbar.
  4. Select HTML file you need to import BUT do not click to INSERT yet.
  5. Switch "insert" button with the "insert as a text" button and click.
  6. Now, you can send it to your audience.

You can check HTML Email Template here:

https://github.com/designmodo/html-email-templates

Nivedita Singh

Written by Nivedita Singh

B. Tech Student, Nivedita Singh is a passionate Web Developer and is an open source enthusiast.

0

LoginRadius CIAM Platform

Our Product Experts will show you the power of the LoginRadius CIAM platform, discuss use-cases, and prove out ROI for your business.

Book A Demo Today