How To Create & Code Your Own HTML Emails

1. What is HTML?

HTML stands for HyperText Markup Language and it is the main markup language for creating web pages and other documents such as emails.

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets.

HTML tags most commonly come in pairs like <h1> and </h1>. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web and email designers can add text, tags, comments, and other types of text-based content.

The text between <HTML> and </HTML> describes the HTML document. These will always be the first and last tags of an HTML document/email.

The text between <BODY> and </BODY> is the visible page content that you see.

The text between <h1> and </h1> is displayed as a heading. There are 6 different HTML heading tags.

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

The text between <p> and </p> is displayed as a paragraph.

There are a few HTML tags that do not have a closing/ending tag, these are referred to as empty tags and include:

The <br> tag, which inserts a single line break.
The <hr> tag, which inserts a horizontal rule line.
The <img> tag, inserts an image/graphic.

Below is a visualization of an HTML page structure:

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

2. Intro to HTML Coding

Source: http://www.w3schools.com/html/

3. What is CSS (Cascading Style Sheets)?

CSS stands for Cascading Style Sheets and is a language used for describing the presentation semantics (the look and formatting) of a document written in a markup language, such as HTML.

4. Intro to CSS Coding for Emails (inline CSS)

Source: http://www.w3schools.com/css/

CSS Basics

IMPORTANT: Always use Inline Style Sheets when designing for emails.

To use inline styles you use the style attribute inside the relevant element tag.
The style attribute can contain any CSS Property.
The CSS property and its value is seperated by a colon :
Each CSS property/value pair is ended with a semi-colon ;

Examples of Inline CSS:

<h1 style="font-size:12px; color:red; padding-top:10px;">This is a Heading.</h1>

<p style="font-size:18px; color:#008080; padding:10px 10px 10px 10px;">This is a paragraph</p>

CSS Styling

CSS Box Model

The image below illustrates the box model:

Explanation of the different parts:

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins.

(Another great tutorial on CSS Box Model Part 1 and CSS Box Model Part 2

CSS Padding Short Hand

5. Email Design Fundamentals

Creating an HTML email that looks right to every reader is a job that makes nuclear engineering look easy. What can go wrong? After reaching its final destination, an email could be read using any number of standalone email clients (such as Outlook, AOL, and Eudora), and even more Web-based clients (Yahoo, Hotmail, and Gmail to name a few). Each of these email clients displays your HTML email message a little bit differently, so ensuring that your message displays correctly can be a daunting task.

How are coders coping with this issue? Some say the only solution is to go retro -- by ditching CSS and using old-school HTML for formatting, fortunately, we have options.

RULE #1: DO NOT USE Microsoft Word.

Here are common problems we've experienced with emails generated by Microsoft Word:

HTML Code is too bloated with Microsoft-specific tags. This causes the email to display funky in different email readers. You'll need to Run it through a cleaner to get it to work right.
Using fonts that aren't "web safe." Hey, just because you have Comic-Sans, doesn't mean everyone else does. Only specify fonts that are on a wide spectrum of machines. Fonts like Arial, Helvetica, Times, Courier, Trebuchet and Verdana are safe.
Wacky and outrageous colors. Don't make every other word in your email a different color. We're not sure what it is about Word, but it seems to tempt people into going berserk with the font colors. Remember that when you assign different colors to fonts (especially blue and red, according to some sources), you'll set off more spam filters (because that's what the spammers do, remember?)

Word is really only good for generating very simple HTML email newsletters, with simple font formatting. It's much, much better to use a real text editor to code your emails by hand, as we'll see later.

RULE #2: Don't place CSS inside the HEAD tags in HTML Email.

When you code for a web page, you traditionally place the CSS code in between the HEAD tags, above your content. But when HTML emails are viewed in browser-based email apps (like YahooMail!, Gmail, Hotmail, etc), those applications strip out the HEAD and BODY tags by default, so any styling applied to these elements will be lost as well.

RULE #3 Use a Wrapper Table for Content

Any background colors or BODY settings/styles should be handled with a 100% wide TABLE "wrapper", which is placed around your entire email content. This WRAPPER table is usually placed within a Container table, which acts as the "Body" of the email. It's what I like to call - Placing a Table within a Table.

Layout Techniques

We suggest using tables for page layout within an HTML email. Tables are the most stable option, especially if you're creating email messages that require a more complicated multi-column layout. Gmail simply removes div tags, and coverage in other clients like Hotmail is spotty. Also, floating div tags don't work in several email clients, so any floating elements should be placed in a table.

The most import thing when it comes to designing more complex emails is understanding how to code HTML tables. Understanding how to create tables with multiple-rows and columns and how to NEST tables inside of each other, will be important for beginners to learn and understand.

Here is a great article/tutorial on creating HTML tables.

http://www.beginnersguidetohtml.com/guides/html/tables/complex-tables

Formatting Text

One place where inline styles may make a real difference is in the headings and special notes within your email. When you want to ensure that a certain notice is always red, or that headings are the same shade of orange as your logo, you should use inline styles for that specific element.

Some email clients are notorious for changing text in strange ways that can only be overridden with inline styles. Hotmail, for example, always displays links in small blue Verdana, regardless of the appearance of the rest of the email. If this is a problem for you, you should use inline styles on each link tag to override it.

The most important advice that I can give to you about CSS in HTML email is not to expect CSS to work perfectly. Test, test and test some more. Keep things simple, by using CSS for general font-formatting, colors, font-size, padding, etc. Stay away from back-ground images, and positioning properties.

Images and Backgrounds

The ability to include images is a key advantage to HTML email -- they allow you to show as well as tell, plus they're often used to track email open rates. Like most perks, they have their downfalls. Spammers frequently abuse HTML images, so some email clients don't display them at all without the user's permission. Some email clients display images that are inserted in an img tag, but not images that are inserted with CSS, or as a background image, or both.

When using images always include the alt property for the images, this helps for when images are disabled in email readers such as Outlook, Gmail, Yahoo, etc. etc. Also make sure to use the FULL URL of the image that is stored on the internet, NEVER, NEVER, EVER insert it as an attachment from your local harddrive.

Example:

When creating HTML emails, you should also avoid using dark background colors, especially in the background of your email. If one of your lighter background colors is ignored by an email client for some reason, users may see the email as black text on a dark blue background and ignore the message or, even worse, report it as spam.

General Do's and Don't's for HTML/CSS Emails

Do ...

Use a Text Editor for writing your code (notepad, etc.)
Use inline style declarations for the most important styles if you have to use a CSS inliner. Such as MailChimps CSS Inliner
Use ALT tag on all images.
Declare styles in a style tag when they're absolutely necessary.
Use table tags for multi-column layouts and floating elements.
Test your email in multiple standalone and Web-based email clients, as well as smart phones.

Don't ...

Use MS Word
Use external stylesheets.
Use floating div tags for multi-column layouts.
Expect CSS background images to show up in most email clients.
Rely on images showing up by default, especially background images.

6. The Tools You Will Need

1. HTML/TEXT Editor

Notepad (best option comes with Windows OS)
Dreamweaver CS6
http://www.1stdirect.com/emailbuilder/
http://www.htmlkit.com/
http://www.bluegriffon.org/
http://net2.com/nvu/download.html

There are lots to choose from ... google "free html editor" if you are not comfortable with the ones listed.

2. Graphics Editor

3. Online Image Storage

tinypic.com/‎
imageshack.us/
photobucket.com/‎
imgur.com/‎
FaceBook
Pinterest
Your Own Website (recommended)

4. BoilerPlate Templates

5. Online Editors

Online editors can be a very valid alternative to hand coding an email. If you don’t have particularly specialized needs (or you are short of time) this could be just the trick.
These editors are built into the feature set provided by these email services but you’ll obviously need an account to use them. There is no cost to setup an account. You only pay when you send using their service. So you can use their design tools to create your campaign and then just copy the code to your email client.

Campaign Monitor
Mailchimp

7. Creating Our 1st HTML Email

This will be a live demonstration with the course instructor.
The course instructor will be using Photoshop for graphics editing and Dreamweaver as the HTML Text Editor. You can use any Graphics Editor and Text Editor you prefer. It is the techniques that are demonstrated that are important. Use the links above for free tools you can try/use.

8. Other Great HTML Email Design/Coding Resources

Crash Course: Building an Email Newsletter

Beautiful emails to help inspire your next email design.

Really Good Emails

Typography

HTML Email Design - Video (5 mins)

HTML Email Coding and Design Tutorial Video (50 mins)

How to Create a HTML Email Template (Part 1 - design in photoshop) - 40 mins

How to Create a HTML Email Template (Part 2 - convert image to HTML) 40 mins

How to Create a HTML Email Template (Part 3 - Testing your email) 15 mins

How to Create an EMail Signature that Looks Great -( 8 mins)