Kicking it Old School with Email HTML

Welcome to the Email HTML Workshop!

Coding for emails works quite differently than regular HTML for a few reasons:

  1. Email readers have far greater security concerns than your average web page. The easiest way to keep up with all the different kinds ways someone trying to get at your email data, is to not allow advanced computing at all. So, client side programing languages like JavaScript are disabled. (But you can still do server side.) Some email clients even strip out CSS styles and images for download speed purposes. Which is not to say that you shouldn’t use them, but you do need to take the possible repercussions of your choices into consideration.
  2. If you have any sort of web development background, you know what a nightmare browser compatibility is. So, you take that nightmare and you multiply that against all email clients. Now you have to make things compatible on several browsers on every known computer and device in the world as well as every email client, in those browsers as well as standalone.

What’s a girl to do? Transport back to coding in the 90s. Tables are back! We’ll get into that a bit further down the page.

Your Basic HTML Primer Here
Everything that you write in HTML is encapsulated between tags that look like this : <> </>. You can think of these tags as signs to do things. Imagine you’re reading a children’s book which had been marked up to indicate that you should read certain parts in funny voices tagged with the kind of funny voice it might be:

<scary> RAWWRRR! </scary>

This does a great job of telling you where to speak in a funny voice but it doesn’t give you quite enough information to do it correctly. To give more information, tags have variables, which, in our example, would be like adjectives that give you more information on what kind of scary voice to use:

<scary type=”animal”> RAWWRRR! </scary>

 

Every HTML Based Page Starts With

HTML

The <HTML> tag opens up the conversation with the browser or email client (as in this case) to tell it what language it will be using. The last tag in your document should be </HTML> end tag to tell the browser/email client that it can start rendering.

 

Head & Body

The next tags are structural. They indicate the head of the document which contains technical information like the <meta> tag, which tells the browser/client things like what character sets you’re using, and tag words to help search engines find you. The other tag is the page title, which is not hugely important in an email, but can help you to keep track of your emails.

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Email Practice</title>
</head>

The <body> tag comes next. It indicates when the viewable content starts and ends. It can be given attributes for the page like background color.

<body bgcolor=”white”>

 

Our Tags for This Lesson 

Comment

<!– Stuff you don’t want to be shown when someone views the email, but that you would like leave as a note for anyone else who might work on this email should be in a comment tag like this. –>

 

Image

<img src=””> Image tags are another that don’t have closures because they only describe where to get the image as well as any attributes that you may want to give it, such as height and width, so that your email will load with the spacing already made available for the images, making so that your text doesn’t shift around as images load, potentially pissing off your reader and making them delete the email.

 

Link

<a href=”” style=””>Click here for more!</a> Links are placed in emails with anchor tags <a>. Href stands for HTML reference, which is the url that you want the link to go to. You can make images into links by placing the link tag within the anchor tag and adding in variables like “border=0” to eliminate the image being outlined in whatever color you’ve designated for links. (Visit https://www.w3schools.com/html/html_links.asp for a full listing of attributes.)

 

Font

<font style=”bold” size=”12px” face=”times” color=”red”>Text</font>  <!– This will give you the word, “Text,” in an average size, in bold, using Times Roman font and in the color red. –>

 

Paragraph

<p>Anything between paragraph tags will be shown in the designed paragraph format. Without designating paragraphs all of your text will run together in one big long line.</p>

 

Div

<div style=”line-height:14px; padding-top:5px;”>In the case of emails, div tags are like turbo charged paragraph tags, which you have far more control over through the use of variables. </div>

 

Line Break

To put a break after text or image without formatting insert a <br> tag.

 

Space

Web browsers, and email clients ignore all spaces after the first one, so if you would like to insert a bunch of spaces use &nbsp; in your code. It stands for Non-breaking space, it and many things like it are considered special characters rather than tags.

 

Table

Tables create the structure of HTML emails. They consist of the full square border of an email and individual spaces for items. They can be as complex or as simple as you would like. Even though, they are incredibly verbose in their formatting, they are incredibly flexible and solid.

You start creating a table with the outside table tag adding in the variables for it’s size, color and how much space you want around it. This example is a table that will be 98% of the width of the window it’s in, with no padding on the inside of the cells, between the cells and no border around the table with a white background:

<table width=”98%” cellpadding=”0″ cellspacing=”0″ border=”0″ bgcolor=”#></table>

Then we add in the rows and columns. Table rows go lengthwise, columns go the height of the table and they are both contained in table rows first <tr></tr> with the table data (your content) nestled inside <td></td> tags.

All together it looks like this:

<table>

<tr><td>Content in here.</td></tr>

<tr><td>Content in here.</td></tr>

</table>

Which translates into a pretty boring table where you get to imagine the closing tags:

IMG_3710

But, through the magic of design, we’re going to build out the and turn the Plain Jane table into this beauty:

 

THE CODE 

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Email Practice</title>
</head>

<body bgcolor=”#efefef”>

<table width=”470″ style=”border-style: solid; border-width=0; border-color: #ddd;” cellpadding=”0″ cellspacing=”0″ bgcolor=”#fff”>
<tr>
<td width=”450″>&nbsp;&nbsp;&nbsp;</td>
<td width==”20px” align=”right”>
<a href=”http://www.twitter.com/krishase”><img src=”http://www.krishase.com/twitter.gif” border=0></a></td>
</tr>
<tr>
<td colspan=”2″ width=”470″ style=”font-family: Arial, Helvetica, sans-serif; font-size: 48px; text-align:center; background-color: #b7dd1f; font-weight: bold; padding-top: 50px; padding-bottom: 5px;” >
<font color=”#fff”>How Minnesotan<br> are you?</font>
</td>

</tr>
<tr>
<td colspan=”2″ style=”font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-align:center; color: #a6a6a6; padding-top:3; padding-bottom: 3;””> Take this quiz to find out!
</td>
</tr>
<tr>
<td colspan=”2″><img src=”http://www.krishase.com/duck.gif” border=0>
</td>
</tr>
<tr>
<td colspan=”2″ align=”center” width=”600″ height=”100″ bgcolor=”#333333″ style=”font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#a6a6a6;-webkit-text-size-adjust:none;”>

<br><br> This email was sent to <span style=”color: #f4f4f4;text-decoration: none;”>**Preview of things to come in the AMPscript workshop**</span><br> by <a href=”http://www.krishase.com/krisleecloud”>Kris Hase</a>

<br><br> To ensure delivery to your inbox, please add <a href=”” style=”color: #f4f4f4;text-decoration: none;”>hello@krishase.com</a> to your address book and safe-sender list.

<br><br><a href=”” target=”_blank” style=”color: #f4f4f4;text-decoration: none;” class=”vendor-clickout” rel=”nofollow”>Shop Now!</a>. If you no longer want to receive emails from us, you can <a href=””
style=”color: #f4f4f4;text-decoration: none;” class=”vendor-clickout” rel=”nofollow”>unsubscribe</a>.
<br><br>
</td>

</tr>
</table>
</body>
</html>

 

Extra resources:
https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch–webdesign-12770

About author

kris

Post a comment