Html code for mail

Coding emails from scratch: a guide to the best practices

You see them everyday as you scroll through your inboxes, and maybe you’ve even created your own using a template builder, but do you know the ins and outs of what goes into crafting a dynamic, vivid html email? And have you ever coded html emails from scratch?

Understandably, everyone is not interested in doing so, but having some idea of how an email is birthed can give you more insight into your subscribers’ POV and help you deliver better email content. However, we should probably define these emails first.

What are HTML emails?

HTML stands for HyperText Markup Language and is used to code a document, such as an email, in a way that tells an HTML reader, such as an email client, how to display information.

These are more complicated than plain-text emails, which, as their name suggests, are emails that consist of simple text without any beautification.

HTML emails tend to be a lot more aesthetically pleasing with graphics, colorful sections that stand out from each other, and a lot more flexibility as far as design goes. In basic terms, you can think of these emails as plain-text emails that have been given an extreme makeover.

Whether you have some experience with HTML and CSS or not, coding emails is something that anyone can learn with enough patience and proper guidance. Below you’ll learn the basics of setting up an HTML email, as well as a few tips and tricks to ensure your code renders perfectly.

Let’s get started

Before you can begin coding anything, you’ll need to decide on which version of HTML you want to work with so that email clients know how to display your email to your subscribers. This is called a doctype. Technically, you could leave it up to chance and not assign a doctype, but using one is highly recommended to ensure that your emails are seen the way they were intended to be seen.

So, which is the best doctype to use for email? HTML5 is the most recent doctype and was designed to hold multiple forms of code, making it ideal for cross-platform options. However, it is still evolving and isn’t supported by all email clients. That’s why we recommend these 2 doctype declarations:

These transitional doctypes allow you to use particular elements and attributes that aren’t allowed in strict doctypes, such as presentational or deprecated elements, giving you a little more flexibility with your code.

After picking a doctype for your email needs, you’ll want to add the support for VML code. VML stands for Vector Markup Language and it’s useful for making sure that unsupported features, like background images and rounded borders, display properly on Outlook email clients.

DPI scaling can also be a pain with Outlook email clients, so we suggest adding the following code inside the tag:

The Head

After adding in all the above code, it’s time to create the element. The information in this section won’t be visible to any of your subscribers, but it’s necessary for machine processing by email clients. The following pieces of code will need to go in this section, specifically nested within a tag.

Meta Tags

There are various meta tags you can use, but we find these 3 to be useful in helping you maintain more control over how basic aspects of your email display:

The first two meta tags will keep iOS from turning any phone numbers or addresses in your emails into links. Of course, you may want these elements to show as clickable links, but Apple’s default blue may not match the color scheme already in your email, so including these meta tags will prevent this override while allowing you to tailor your links to your liking.

The third tag is used to give a browser guidance on how to scale your email, specifically on how to set the width. This will keep your email content positioned neatly so that you don’t get weird blank space next to your photos or text that doesn’t wrap properly.

After your meta tags, add in this CSS style tag to indicate that the content in your email is in fact CSS:

Body and Tables

Next comes the overall structure for your email, where all your beautiful graphics and selling points will go. This section begins with a tag, which goes right under the tag. You can also remove any space around your email by adding padding:0px; margin:0px; to the body tag.

Be sure to add role=“presentation” to each of your tables to make it clear to email clients that the table is being used visually instead of as a data table. Every table will also be implemented with border=”0″ cellpadding=”0″ cellspacing=“0”.

Once you have your main table, create a new row (tr) with one column (td). Inside this column, create a new table. This will help you to define your content (we suggest 600px wide).

Since your email will be viewed on multiple viewports, make sure the email is optimized for the different types. Desktop, for example, has a larger viewport than mobile which gives you more horizontal room for your layout. Mobile on the other hand has a much narrower scope, which means you’ll have to stack most of your sections in order for the email to be viewed properly. You can account for these contrasts by using media queries, which will allow your email to display differently when viewed on mobile devices.

It’s also good practice to use attributes such as “align” and “valign” for your tables. If you’re familiar with HTML, you know that these attributes are considered deprecated, or obsolete. However, since email clients widely vary in terms of CSS support, you should use certain deprecated elements to make sure everything displays as intended and avoid any strange-looking tables.

Below we’ve summarized all the previous steps so that you can refer back to them at any point during the process of creating your email.

1. Pick and enter a doctype at the top of the html document
2. Insert code for VML and DPI Scaling
3. Create a head element
4. Insert meta tags and first CSS Style tag into the head element
5. Create a body tag underneath the head element
6. Insert a table tag as the main container within the body tag
7. Add a row to the inside of the main container table
8. Add a new table with the preferred size for your content, adding rows, columns and nested tables to define your layout.

A shell to get started

To summarize the above steps, we’ve put together a sample shell for you to work from: