e-mail

HTML e-mail creation

Why can’t I send an e-mail to hundreds of recipients in my address book at once?

If you send an e-mail to many recipients at once you run the risk of having your e-mail address blacklisted as the originator of spam. This not only blocks your e-mail address from sending but also everbody elses e-mail from the domain you are sending from. So all messages from ‘yourdomain.com’ get blocked.

Even if you are using your domains e-mail legitimately, unblocking domains from a blacklist can take time and expertise. A huge and what could be costly inconvenience.

Also, dependent on where in the world you are sending e-mail from and how you have obtained your mailing list you may fall foul of laws. Most recently in Europe the GDPR Data protection laws.

Why use a HTML e-mail bulk e-mail service?

HTML bulk e-mail delivery services adhere to strict guidelines so that they are approved to send mass marketing e-mails or bulk e-mail messages. Part of the approval to be able to send bulk e-mails through their services is that they facilitate the unsubscribing process. They’re not able to send messages without this.

A bonus of HTML e-mail delivery systems is that they provide statistical feedback as to how many people have opened your message, how many people have clicked on links contained within the html e-mail and even their approximate location etc.

HTML e-mail creation isn’t easy!

HTML e-mail design considerations

Here’s my list of design considerations for graphic designers click here

HTML e-mail considerations for coders

Achieving a uniform appearance between all e-mail programs (clients) is impossible. Forget everything you’ve learned about style sheets and html5! Code EVERYTHING as inline styles.

Most e-mail clients have not moved with the times and are only capable of processing basic html. They are kept ‘old fashioned’ (simple) for the reasons of, SECURITY and SPEED.

If you keep your HTML e-mail design basic you’ll ensure that they’ll view nicely across the majority of popular e-mail clients.

You can also go some way toward making your HTML e-mail compatible with different devices with some viewport settings. Catering for ipads, iphones and other smart devices etc.
Yet to confirm

Essential includes in your HTML e-mail

Many marketing campaign softwares’ (Campaign Monitor, Copernica and the like) require some essential information. One of which is including a link for viewing the HTML e-mail online in a browser window.

Good practise was to include these links at the top of your HTML e-mail giving recipients a chance to see it. If the e-mail doesn’t load properly for them they can click the link to view it in their browser.

However, to do so you lose valuable promotional text within the viewing pane of mobile devices. Notice below how messages are delivered.

The graphic above shows how the message pane contains the first text that it sees within the HTML e-mail. So pay close attention to the first text the design of your HTML e-mail.

Promotional text

TITLE: 30 characters inc. spaces
SUBTITLE: 50 characters inc. spaces
TEXT: 100 characters inc. spaces over two lines

The other ESSENTIAL is the inclusion of an <unsubscribe> link

Include at the bottom of your HTML e-mail

Change your table width and colspan to match your design. Remember to change the unsubscribe link to the format which YOUR Bulk e-mail provider recommends for their service.


<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
	<tr>
		<td>
			<p>No longer interested? <unsubscribe>Unsubscribe</unsubscribe> instantly.<br />Having trouble reading this mail? <a style="text-decoration: underline; color: #000000; font-style:italic;" href="your-url-in-here">View it in your browser</a></p>
		</td>
	</tr>
</table>

Your HTML e-mail design

Your html e-mail design should be produced in a graphics package to show how the completed thing should look. You can code a html table from this. This would be enormously time consuming and arduous with many possibilities of errors creeping in. Thankfully there are Apps (programs) that automatically produce a table of your graphics for you. The market place leader being Photoshop. Slice your graphic elements to isolate them then export for web along with the HTML code.

Splicing or Slicing?: Fireworks Vs Photoshop

I loved Fireworks for splicing images in to tables. It was built for the task. However, Fireworks in Adobe’s infinite wisdom has discontinued this gem of web optimising App. The professional next choice is Photoshop.

NOTE: Be aware that in Photoshop you will have to go to maximum zoom to make sure your slicing is sliced perfectly with no gaps or overlaps which can cause headaches for you further down the line.

Create the most basic html page to insert your code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled</title>
</head>
<body>
</body>
</html>

Outlook’s CSS

In the <head> insert the following style sheet. This style sheet overides Microsoft’s external style sheet so as to emulate almost every other browser’s interpretation of your HTML e-mail.

Important: REMOVE the commented out text

The commented out text is for your information only. This work-around and more useful information on Outlook’s rendering of HTML e-mails provided by the very excellent E-Mail on Acid

Putting it all together…

HTML E-MAIL TEMPLATE


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Untitled</title>
    
<style type="text/css">

table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #000000}
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}

.ExternalClass {width: 100%;}
</style>


</head>
<body>
	<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
	
	
		<tr>
			<td colspan="1">

			<!-- Your spliced table code from your graphics package in here -->

			</td>
		</tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
	<tr>
		<td>
			<p>No longer interested? <unsubscribe>Unsubscribe</unsubscribe> instantly.<br />Having trouble reading this mail? <a style="text-decoration: underline; color: #000000; font-style:italic;" href="your-url-in-here">View it in your browser</a></p>
		</td>
	</tr>
</table>
</body>

</html>

Change your colspan to match the number of colspans in the table that you will paste in the body of this document (the table you created of the HTML e-mail design from the graphics App). Omitting the opening <table>, <tr>, <td> and closing tags as they’re already provided in this coded template.

NOTE: Mailchimp uses the following unsubscribe code


<a href='${Gears.unsubscribe()}'>Click here</a>

HTML E-MAIL CUSTOM FONTS

You can specify the fonts you want to use in the HTML. BUT, this is only supported by
iOS Mail, Apple Mail, Android and theThunderbird e-mail client.

You can specify special (non-system) fonts as the first option then supply web standard fonts as fallback options thereafter to make sure your message appears.

Take a little time to select the most appropriate fallback fonts. By carefull selection you can come a little closer to retaining the emphasis of your original design

Use the @fontface code to display custom fonts in your HTML e-mail

This is the same code provided by your font provider that you might use within a website build.

YOUR code should be placed in the head of your document

It should look something like this example @font-face code

            
<style type="text/css">
@import url("http://yourfontprovider.net/t/1.css?apiType=css&projectid=646468444e284488w6846484684");
    @font-face{
        font-family:"Futura PT W01 Light";
        src:url("http://yourdomain.com/Fonts/9869762c-2f06-40c3-929e-2d412d64cd87.eot?#iefix");
        src:url("http://yourdomain.com/Fonts/9869762c-2f06-40c3-929e-2d412d64cd87.eot?#iefix") format("eot"),url("http://yourdomain.com/Fonts/9ad55860-bbe2-4e51-be58-08b45bdda354.woff2") format("woff2"),url("http://yourdomain.com/Fonts/eceb6e13-403b-4d2b-af74-c05bc9c2535e.woff") format("woff"),url("http://yourdomain.com/Fonts/956fd236-834e-4736-91af-a04cadf17544.ttf") format("truetype");
    }
    @font-face{
        font-family:"Futura PT W01 Medium";
        src:url("http://yourdomain.com/Fonts/c0b084f4-7139-4e63-ba96-7f3a421195c3.eot?#iefix");
        src:url("http://yourdomain.com/Fonts/c0b084f4-7139-4e63-ba96-7f3a421195c3.eot?#iefix") format("eot"),url("http://yourdomain.com/Fonts/f7552419-a773-41ab-ae4a-b12b1d853f02.woff2") format("woff2"),url("http://yourdomain.com/Fonts/83e72918-97c3-41cd-8a7d-4056788a00f0.woff") format("woff"),url("http://yourdomain.com/Fonts/5b88228b-bd3b-49f4-b7c2-db89968ce116.ttf") format("truetype");
    }
    @font-face{
        font-family:"Futura PT W01 Bold";
        src:url("http://yourdomain.com/Fonts/88a061c2-3303-401d-85e9-619b5ea5f5af.eot?#iefix");
        src:url("http://yourdomain.com/Fonts/88a061c2-3303-401d-85e9-619b5ea5f5af.eot?#iefix") format("eot"),url("http://yourdomain.com/Fonts/1a34942e-33ed-43bb-b229-7460d55b49f7.woff2") format("woff2"),url("http://yourdomain.com/Fonts/baecea54-cfd3-4578-8717-abf89eba62b6.woff") format("woff"),url("http://yourdomain.com/Fonts/f275eebe-30f5-4068-9294-51dc44c8409e.ttf") format("truetype");
    }
</style>

The content

Paste into the code your sliced up table content

Objective: Replace all graphics that contain just text with coded inline styled text. Initially, just replace the text with text encased in <p> tags. e.g. <p>Your replacement text</p>

Systematically Search & Replace

Search and Replace <td with…
<td valign="top" bgcolor="#000000"
Adjust the bgcolor to suit your design.
Search and Replace <p with…
<p style="font-family: 'custom font', helvetica, arial, sans-serif !important;font-size:25px;line-height:30px;color:#3c3c3b;margin:0px;padding:0px;font-weight:500;text-align:left;vertical-align:top;
Adjust the styling of the text code snippet above by taking all of the measurements from the original graphic file (Usually this is a Photoshop.psd file).

NB: You will never achieve a perfect match. Programs render text differently so the same font and specifications can and will look different in another program such as your browser or different e-mail clients. Most noticeably this is a weight issue that can then lead to text running over shorter or longer lines.
Search and Replace <img with…
<img border="0" style="display:block;"
Search and Replace special character entities within each coded text table cell e.g. £ with…
£
Search and Replace special characters within each coded text table cell e.g. ’ with…
’
Search and Replace special characters within each coded text table cell e.g. & with …
&
and so on. A full list of special character entities can be found here https://dev.w3.org/html5/html-author/charref. Replace them ALL with their HTML entity code.
Upload files to your server!
If your HTML e-mail looks good locally in your browser it’s now time to upload it to your server. This will be the location of your “View it in a web browser” version of your HTML e-mail.
Point ALL images to our server hosted images.
Now that you have a “live” web version it’s time to point every single image to our “live” hosted version of that image.
Search and Replace src="images/ with…
src="http://www.yourwebsite.com/images/
(the full url location of the hosted image)
View it in your browser
We have a “View it in your browser” link as part of the essential includes in our HTML e-mail. We now need to make this a link using the full url to your hosted version of the HTML e-mail.
Now check your local version in your browser to make sure all links work and all graphics from your server load.
VALIDATION There’s no such thing as a HTML e-mail validation service. However you can use an everyday HTML validation service which will pick up on any misspelt or unclosed tags etc. Expect to see your results with a huge amount of “Obsolete” errors! With regard to HTML e-mails this means you’ve done it right!
Use W3C Validation Service and point the url to your online version and correct any unopened or unclosed tags and any mispellings. After any corrections remember to upload your file again, replacing the hosted version.
Remove any commented out code from your code
Finally, a space or return in your code can (in some e-mail clients) produce a 1px vertical line (gap) where that space or return appears within table cells. It reveals itself when viewing background images or colors that have been distributed within table cells. To eliminate this problem use your text editing software to "compact" your code. Taking out all spaces and ‘carriage returns’ from your code making one long compact line of code.
Voilá you now have the code to use within your Bulk e-mail service provider.

Add to Calendar

A nifty piece of software to allow people to add events to their calendars with one click…
https://addtocalendar.com/

“Add to calendar” icons for use in HTML e-mails

There’s a method to deploy the following icons on a web page but I wanted them on my HTML e-mail therefore I’ve introduced them as images within a table that can have the link (calendar information) applied to them.

Use the code provided by Add To Calendar then strip out the code for the icons for my choice of icons if you like my choice better.

    
          
 

    <!-- Reverse the icons with iconname-white -->
	<table width="540" align="center">
	<tr>
		<td valign="top" bgcolor="#FFFFFF" align="center">
			<a href="https://www.addevent.com/event/eZ14894320+apple" title="Apple" target="_blank" style="display:inline;">
				<img border="0" style="display:block;" src="http://www.mastertemplate.co.uk/images/cal-icon/cal-red-04.png" width="36" height="36" alt="iCalendar"> 
			</a>
		</td>
		<td valign="top" bgcolor="#FFFFFF" align="center">
			<a href="https://www.addevent.com/event/eZ14894320+google" title="Google" target="_blank" style="display:inline;">
				<img border="0" style="display:block;" src="http://www.mastertemplate.co.uk/images/cal-icon/cal-bw-01.png" width="36" height="36" alt="Google Calendar"> 
			</a>
		</td>
		<td valign="top" bgcolor="#FFFFFF" align="center">
			<a href="https://www.addevent.com/event/eZ14894320+office365" title="Office 365" target="_blank" style="display:inline;">
				<img border="0" style="display:block;" src="http://www.mastertemplate.co.uk/images/cal-icon/cal-red-02.png" width="36" height="36" alt="Outlook"> 
			</a>
		</td>
		<td valign="top" bgcolor="#FFFFFF" align="center">
			<a href="https://www.addevent.com/event/eZ14894320+outlookcom" title="Outlook.com" target="_blank" style="display:inline;">
				<img border="0" style="display:block;" src="http://www.mastertemplate.co.uk/images/cal-icon/cal-blue-01.png" width="36" height="36" alt="Outlook Online"> 
			</a>
		</td>
		<td valign="top" bgcolor="#FFFFFF" align="center">
			<a href="https://www.addevent.com/event/eZ14894320+yahoo" title="Yahoo" target="_blank" style="display:inline;">
				<img border="0" style="display:block;" src="http://www.mastertemplate.co.uk/images/cal-icon/cal-red-03.png" width="36" height="36" alt="Yahoo Calendar"> 
			</a>
		</td>
	</tr>
	<tr>
		<td valign="top" bgcolor="#FFFFFF" align="center">
			<p style="font-family: helvetica, arial, sans-serif; font-size: 0.76em; line-height:1em; color:#2d4345;">
				<a href="https://www.addevent.com/event/eZ14894320+apple" title="Apple" target="_blank" style="display:inline;">
					iCalendar 
				</a>
			</p>
		</td>
		<td valign="top" bgcolor="#FFFFFF" align="center">
			<p style="font-family: helvetica, arial, sans-serif; font-size: 0.76em; line-height:1em; color:#2d4345;">
				<a href="https://www.addevent.com/event/eZ14894320+google" title="Google" target="_blank" style="display:inline;">
					Google Calendar 
				</a>
			</p>
		</td>
		<td valign="top" bgcolor="#FFFFFF" align="center">
			<p style="font-family: helvetica, arial, sans-serif; font-size: 0.76em; line-height:1em; color:#2d4345;">
				<a href="https://www.addevent.com/event/eZ14894320+office365" title="Office 365" target="_blank" style="display:inline;">
					Outlook Calendar 
				</a>
			</p>
		</td>
		<td valign="top" bgcolor="#FFFFFF" align="center">
			<p style="font-family: helvetica, arial, sans-serif; font-size: 0.76em; line-height:1em; color:#2d4345;">
				<a href="https://www.addevent.com/event/eZ14894320+outlookcom" title="Outlook.com" target="_blank" style="display:inline;">
					Outlook Online 
				</a>
			</p>
		</td>
		<td valign="top" bgcolor="#FFFFFF" align="center">
			<p style="font-family: helvetica, arial, sans-serif; font-size: 0.76em; line-height:1em; color:#2d4345;">
				<a href="https://www.addevent.com/event/eZ14894320+yahoo" title="Yahoo" target="_blank" style="display:inline;">
					Yahoo! Calendar 
				</a>
			</p>
		</td>
	</tr>
</table>