How To Create An HTML Newsletter

OK So you've decided it's time to send an HTML newsletter to your email list but you're not quite sure where to start? No Problem, we've all been there. I tried and tested many times before I created my first successful html newsletter.

Creating an HTML Newsletter is very similar to creating a webpage, with some minor twists on the old rules.

Now if you already know how to create a webpage then you won't have any problems. But if you're not sure, then you can always use a WYSIWYG - What You See Is What You Get HTML editors such as Microsoft Frontpage or Adobe Dreamweaver. Or you can skip all those steps and just download a newsletter template, and add your text.

The only real difference between a newsletter and a regular webpage is how it's designed and how its sent.

Let's Get Started.

1) Remove everything before the open (body) tag, and everything after the close (/body) tag. Then get rid of the body tags themselves. There should be (html) tag, (head) tag, (title) tag, (metatags), and no css stylesheets. The only remaining html code will be what you originally found BETWEEN your open (body) (/body) and close body tags - Tables, images, text, links etx.

2) No more javascripts - Email providers don't allow javascript in their email and they will disable it. So if you have any javascript within your newsletter then get rid of it.

3) No Flash, No DHTML, No Web Forms - Most if not all of time they will not work so your newsletter will be better off if you don't include them.

4) No more ads - Actually you can have ads, but just not the popular Google Adsense Ads. Google's Adsense uses javascript and javascript won't work in the newsletter. You can however find link exchanges, or other advertisers that use plain links for their ads, and include those in your newsletter. These ads, banners, and text links will work just fine.

5) No More CSS - Often designers will use CSS for a webpage's layout, but in the case of an html newsletter it would be better to use tables, instead of writing lines and lines of inline css code. You can set padding, background color, and lots of other table properties, just as you can with CSS. Remember keep it simple.

6) If you must use CSS then get inline - Since you can't import style sheets to style and format your html content you will need to use inline CSS which includes all of the css properties in line. EX: style="background: white; color: black;"

7) Images - When adding images on a webpage we would normally use urls such as image1.jpg, but with a newsletter you'll have to enter the complete or the absolute url.

Tip: Make sure to set your images' border to 0 so that it will show up seamlessly inside your newsletter.

8) The first link in the email should be a link to the online version of your html newsletter. Even if you have option for html or text newsletter, it's a good idea to include a link to your online version at the top of the newsletter.

9) Include an unsubscribe / remove me link at the end of your email, and text for compliance with canspam laws. If you don't have an unsubscribe button then your newsletter could be seen as spam and you don't want your subscribers thinking they have no way to unsubscribe. If you have more then one newsletter then include a link such as Manage my subscription or a link that takes them directly to their online account. Placing this link will allow your users access to their account and allow them to manage their subscriptions. Who knows maybe they'll subscribe to more newsletters.

10) Test, test, and retest on major email providers (Hotmail, Yahoo, Gmail). You may notice that with that the new MSN Windows Live Mail Beta the text in your newsletters will be centered. Don't rely on defaults to left align your text, use the left align button on your editor to align them when needed.

During my previous newsletter tests some of the special characters in my newsletter rendered oddly in Yahoo, so make sure to find the character codes for those special characters, and then paste them directly into your html.

For ex: this ' apostrophe will turn into ' This will allow the text to display properly. For more character codes scroll all the way down or google "Special Character Codes"

11) Before you send your email make sure to set the email's content-type as HTML, so that it can display as an Html newsletter, or it will just show up as plain HTML code.

12) Get Online - Before you get started make sure to upload those pictures and your original HTML newsletter to your hosting account so that your subscribers can visit your newsletter online. That's it. Happy HTML emailing!