Categories
CSS General Responsive Design

How to Compose HTML Email Newsletters

HTML email newsletters has become a regular lexicon among email marketers and webmasters. Here’s a step by step guide on creating one;

HTML email newsletters are not new; they go far back to the late 1990s with the coming of Internet Mail (later Microsoft Outlook). The idea of sending HTML emails was to design emails in an aesthetically pleasing format. HTML email came almost three decades after Ray Tomlinson sent the first email in 1971. 

HTML Email Newsletters

The idea behind HTML email newsletters was simple; using custom fonts, graphics, format, and color to change how emails were perceived. Email newsletters went from the bland and text nature to a visually appealing one. A development that marked the beginning of the field of email marketing, affording digital marketers the ability to develop brand awareness via emails. More importantly, email marketers are able to utilize HTML email newsletters to create an engaging call to action (CTA). 

As a web developer, writing HTML email newsletters is one task that can be dropped in your laps at any time. It could be a marketing, transactional, or life-cycle email, and you are expected to adopt HTML in handling this task. How do you then deal with this task? 

Think of this as a fun and practical task, one that cannot be approached from the usual angle of coding a web page. An HTML email must display correctly on all devices, browsers, and operating systems. It does not matter whether you are dealing with Mac, Windows XP, or a Phablet screen. 

There are two mediums to comping an HTML email newsletter, you either use a pre-existing template or write from scratch. Whichever you choose to adopt, be guided by these fundamentals; 

  • HTML tables are the best medium for taking control of the email environment and layout. Yes, CSS layout is utilized for websites but does not work for HTML emails. 
  • CSS is not irrelevant in coding HTML email newsletters; inline CSS is your best option for background elements. 

With this in mind, let’s create an HTML email newsletter in 6 practical steps; 

Step 1: Gather Images You’ll Be Using for the HTML Email Newsletter

This is the step where you do the preparations. Important characteristics of HTML email newsletters are images and icons. Look through your .psd files of the images to be used. This could be your brand logo, serving as the header of the email. Other images could be the social network icons. 

Step 2: Start a New HTML File

As a newbie or expert, it’ll be best to try out Adobe Dreamweaver in composing your HTML email newsletter. In using Adobe Dreamweaver or anything closer, you’ll start with codes similar to this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

 
Let’s say you are building your HTML email from scratch with notepad or any other text editor, you’ll copy, paste and save this in a .txt file. Coming after the <body> tag, you’ll throw in the following:

<!-- -->
<table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ebebeb">
<tbody>
<tr>
<td align="center" valign="top"></td>
</tr>
</tbody>
</table>

Step 3: Craft Your Header

If you want your HTML email newsletter to be effective, you need to work around the size of the preview pane. On average, it’s around 600px. Don’t forget to color your table both on the right and left borders with a width not less than 2px.

Step 4: Work On Your Main Content and Embed Images

Just as you’ve created a table in the previous step, structure your table accordingly. Take into account images and descriptions for entries. This is the point where you add your selected images into the email newsletter. This is to prevent the email from using an external web server for the display and download of the images.

You may want to give breathing room for the content by adding a cell padding of “25” (pixels).

Something similar to this will be the HTML for this cell:

<table style=”border-left: 2px solid #e6e6e6; border-right: 2px solid #e6e6e6;” cellspacing=”0″ cellpadding=”25″ width=”605″> <td width=”596″ align=”center” style=”background-color: #ffffff; border-top: 0px solid #000000; text-align: left; height: 50px;”><p style=”margin-bottom: 10px; font-size: 22px; font-weight: bold; color: #494a48; font-family: arial; line-height: 110%;”>content for the page:</p></td>

Step 5: Don’t Forget Your Social Media Share Icons

An important aspect of HTML email newsletter is social media sharing icons. One way to utilize email marketing to its fullest potential is by promoting your social media channels. After letting your subscribers know you exist via email marketing, social media marketing could help keep you in their view and prepare you for remarketing.

The code to include social media icons should look like this:

<td bgcolor="d0d0d0"><table width="604" cellpadding="5" cellspacing="0"> <tr> <td width="288" bgcolor="#ffffff"><img src="img/socialnetworks.jpg" /><br /> <td width="294" bgcolor="#ffffff" align="right"> <img src="img/share.jpg" />
<tr>

Step 6: Contact Information and Unsubscribe Button

Try to include your contact information so that your customers can get in touch with you if they want to. Using the same method, you can include your contact information.

More so, you should always provide the opportunity for your subscribers to opt-out of your email list by unsubscribing.

This is how your code will look like:

<td style="background-color: #ffffff; border-top: 0px solid #000000; text-align: left; height: 50px;" align="center">
<span style="font-size: 10px; color: #575757; line-height: 120%; font-family: arial; text-decoration: none;">
<a href="mailto:info@webmasternow.com">
Contact Us?</a><br>
Visit us on the web at <a href="https://webmasternow.com">webmasternow.com</a></span></td>

<td style="background-color: #ffffff; border-top: 0px solid #000000; text-align: right; height: 50px;" align="center">