Location of code when sending HTML Email

Question

I'm trying to figure out where to put some code in an email. You know how you can get newsletters with styling and images, etc? I wanted to send some out but I cant figure out where to put the code. Do you add the images as attachments? Do you put the code in the body? or should you upload the .html file as well?

Answer 1

Sending out HTML emails eigh?

There can be a lot of problems you will quickly encounter, mostly revolving around each email client having their own different way of handling things. The aim here is to keep your email as small, simple, and unbroken as possible.

• The message:

Each language has it's own requirements, you need to check with the language you are using to see what is easier, to do it inline as part of the mailing script, or to have it inserted through a HTML file, etc. So for more details here, post the language you're using.

• Layout:

This is where message simplicity comes in. The best layouts are usually the most simple ones, especially considering not all email clients are 100% HTML standards compliant. You won't know how big your client's viewing window for the email will be nor can you force it to any size or pop it out. Remember that it's goal is to be a message, not a webpage. Usually simple flexible/elastic tables will do the trick just fine if you have anything more advanced than simple paragraphs.

• Images:

Link everything statically (statically means http:\\www. ....mypicture.png as opposed to dynamic linking which looks like this \images\mypicture.png) hosted from your server. The reason for this is so that you will have no broken links, your email will be smaller in size (as opposed to attatching). The downside is that some clients may ask about showing pictures. The cold hard truth is that this cannot be avoided no matter which method you use (See for more details).

• Links:

Again, link everything statically. Local/dynamic link's won't work and your recipients will be mighty unhappy.

• CSS

Either have your CSS classes at the top, or everything in-line (< ... style="..." />). You don't want to attach a CSS file, it's messy and unconventional.

• Scripts

Inline or at the top of your file, for the same reason as above.

• Additional Documents

If you want to include PDF's or DOCX's, etc, the best and most common methodology is just like images, to host on your server and simply include a static link in your email to them. It keeps file size down and you don't have to worry about what each and every email browser/reader is going to do.

Answer 2

Build the page as a normal HTML page. Use TABLES (yes, TABLES) for your layout. You can use inline CSS, but you cannot use a stylesheet. All images must be fully-qualified (http://yoursite.com/images/). Don't make it wider than about 650 pixels. No JavaScript.

• View your newsletter HTML in a browser
• Do a select-all, and copy
• Paste it into a new message and send it to yourself
• See what you end up with
• Try other mail clients

Various mail clients will mess with your markup and your styles. What works on Gmail will look like poop on Outlook etc. It will be an exercise in frustration. Test, test, test.

Assume all images will NOT BE SHOWN when the user originally views the email.

Here's a good guide to what works and what doesn't:

http://www.campaignmonitor.com/css/

My advice: keep it simple - a logo and some text and a link to the real newsletter. Making email newsletters is a fine art, and frankly, people prefer to read them in a browser where they behave like a web page.