How to create an HTML email using only your Mac

An HTML email is the cornerstone of a solid marketing campaign. A great design can generate leads and increase sales. Creating them, though, can be fraught with pitfalls, but they can be easily avoided. These emails can be created using Apple mac-based applications for free, a very exciting prospect for businesses just starting out.

I’m assuming the following with this tip:

• You’re creating your html email without the use of a 3rd party service such as MailChimp, ConstantContact, CampaignMonitor or other such service.
• You’re writing your own html code and storing your own images accessible via web server
• You are on a Mac (OS X 10.4+) and have Safari 3+ installed and are using Mail and have all your email marketing addresses stored in AddressBook

Please search the web if you are creating an email sent on a pc or through Outlook/Entourage. These have different requirements that I will not be covering in this post, though I will discuss how to make sure your email is readable by mail clients on a PC.

Steps to build your html email:

1. Create a static html page with hard-coded image links. Relative links will break when you send your email so you need to host your images on the web somewhere that’s accessible. Eg. url/images/myemailimage.jpg. The optimal width for the content area is about 600px. Any wider and your email will start to break in more and more email applications.
2. Make sure you build your html email using tables (ack!) as you should NOT link to a css file – all your styles should be inline, which means you are using style tags in your code for simple styling and all your font and link colors are in your html file like so:
   

   a { color: #ef7224; text-decoration: none }
   a:hover { text-decoration: underline }

   Style each paragraph of text individually and remember to close all your tags. One missed close style tag can disrupt your entire email.

3. The containing table should be 100% sized so it can fit in any email client window. If this is coded to a specific size it will break if someone’s using an iPhone, for example, or a smaller window.
4. Once your html is built, hopefully you’ve been testing it on different browsers – Firefox 3+ and Safari 3+ on your local machine. If you have a PC emulator installed like VMWare, Parallels or Bootcamp installed, then you can use MultipleIE to test your email in IE6, 7, and 8. You can also use NetRenderer to view your pages in IE 5.5 and up. Just remember NetRenderer does not render javascript.
5. Next, send a test email using Safari/File/Mail Contents of this Page. Make sure you send it to your users who are on PCs and have them open in in all their apps, a good list is here which I will quote:
   

   * Microsoft Outlook 2003
   * Microsoft Outlook 2007 (uses a completely different rendering engine than ’03)
   * Apple Mail.app
   * AOL (desktop and web apps)
   * Microsoft Outlook Web Access
   * GMail (quirky about images; use good alt attributes!)
   * Yahoo! Mail

6. Assuming your testing goes well, you can then repeat step 5 and Bcc all your Address Book members on your email list. Put your own name/email in the To field so all recipients know it’s from you, and you decrease the likelihood of getting your email caught in spam filters.
7. Host your html email on a web server (your own website, preferrably where your images are stored) and provide a link, “click here if you can’t see this email”.
8. Make sure your domain sever has a TXT record for SPF; this identifies emails coming from your domain as non-spam.

Note:

If you email blast people you don’t know (for your business for example) you must abide by each country’s email marketing laws – and in the United States each state has its own rules. A good “unsubscribe” policy and link will go a long way to complying but do your due diligence. New Zealand’s email marketing law is similar.

Do you send html emails this way? Let me know. And if you do it a different way, I’d love to hear it! Happy emailing.

Tweet