Tutorials, Downloads, Political rans and more
Visit my blog for more information.


View Latest news here.

In this tutorial I’m going to cover everything that you need to know in order to create an HTML news letter that won’t break or get screwed up in any email client. After “Learning the hard way” over the years I generated a mental list of steps that help me set up HTML mailers.

0. Things you need to have before starting this tutorial

  • Common Sense
  • HTML and CSS knowlage
  • Understanding of the internet and email
  • 1. Fullfilling the Mailer

    The first thing that you need to know is how you are going to send the emails out. Use websites like “http://www.campaigner.com/” or “http://search.constantcontact.com/index.jsp“. These kinds of websites will allow you to upload / store contact lists, and view statistics after the mailer was sent out. These are very important features to have so much sure that the Mailer service provider has those features.

    The stats that you need are:

  • Hard Bounces - Emails that don’t exist and didn’t receive the email.
  • Soft Bounces - Emails that were unavailable due to mail box being full or software reasons for not getting it.
  • Unsubscribes - People who don’t want your emails anymore
  • Opens - people who opened the email and didn’t just “junk it”
  • Clicks - People who clicked on a link in your newsletter - hooray
  • 2. The Contact List

    The contact list should be an CSV file with 3 columns “firstname”, “lastname” and “email”. The list can be any length really - however some providers charge you depending on how many people are on the list. Keep that in mind.

    3. Setting up your Mailer

    In your provider’s login system you want to get everything ready by uploading the contact list and sending test emails to people from the software - after you verify that everything is all set - then we can start developing the mailer.

    4. Creating the Mailer in HTML

    When writing the HTML mailers you need to remember that you are not making a website.

    Don’t use

  • - CSS
  • - Divs
  • - Background images
  • - internal images
  • Use

  • - Tables
  • - Inline Styles
  • - images that have an absolute path (example “http://mysite/images/name.jpg”)
  • - ALT tags on all images
  • 5. Text in the mailer

    When styling text stick everything in <p> or <span> and style it like this:

  • <p style=”font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15px; font-weight:bold; color:#000000;”> Some text </p>Make sure that you set a font size - and a line height- Different email clients just make up line heights and make it really hard to read the newsletter.6. Images in the Mailer

    Always

  • - Use ALT tags
  • - set a width and height
  • - use an absolute path
  • Images should be set up like this:

  • <img src=”http://mywebsite.com/images/text_image2.jpg” alt=”Text Image” width=”200″ height=”30″>
  • If you are having trouble aligning an image - trying using a table to force alignment or you can add padding to the image. using “padding-left” in the style on the img tag would push the images left.

  • <img style=”padding-left:20px” src=”http://myserv.com/images/name.jpg”>
  • 7. Test - and when your done testing - test some more

    You should test your news letter on as many email systems as possible:

  • - Mac Entourage
  • - windows outlook
  • - hotmail
  • - gmail
  • - AOL mail
  • Different Email systems view emails differently, but if you force every possible variable in the “style” on every tag you have a good chance of remaining consistent.

    8. Final Product

    Once all the madness is over, everything works - and the unsuspecting client list is ready to be blasted with emails you have to follow the steps in your Online Mailer providers website. normally is goes like this:

  • 1. Pick your contact list
  • 2. Who do you want the replies to goto
  • 3. Pick a subject line
  • 4. Pick a “from” name and email
  • 5. paste html
  • 6. choose a date/time to send newsletter
  • 7. finish
  • It could vary depending on your Mailer provider. Send it out, cross your fingers and hope for the best.

    9. What to expect.

    Well your news letter when out and your just sitting back and waiting for the response. Well here is the rule of thumb.

    1% of the people you sent the news letter to will open it and really read it, and 1% of those people will be your client.

    So - 10,000 contacts = 100 opens = 1 client

    This is not an exact formula - but it should bring you down to reality. Now your effort has not been in vein! Use your website to always get new subscribers - and write interesting things in your newsletters. Also Send them out monthly. This will increase the success rate of your mailers.

    10. Conclusion

    In conclusion - HTML mailers are a pain in the ass but they are a necessary internet marketing tool that should not be overlooked. The people that open your mailers may not always buy - but they will get familiar with your branding and what you have to offer - so when they are finally looking for a service that you provide - you will be always fresh in their mind.