[HOWTO] Create HTML Emails using Apple Mail

A recently came across this problem. The solution is simple once you know it, but it took some searching.


1. Create HTML page
Create the HTML page that will be used as the email in whatever way you want (ie. Dreamweaver, text editor, or even -- god forbid -- Front Page).


2. Prepare for maximum compatibility
Some tutorials I've read recommend using absolute links and image references in your HTML instead of relative (definition of absolute & relative links), but I tested with both absolute and relative and it didn't seem to matter. Still, it may be wise to keep it absolutely linked.

It is not recommended to use CSS, because not all email clients support it. Again, my experience with CSS emails has been positive, but if you use CSS, make sure you test it on a variety of email clients to make sure it looks the way it should.

Steer away from complex layouts with embedded tables, complex DIV structures, or frames.


3. Upload
Upload the html and images to your server.


4. Open in Safari
Open the page you uploaded in Safari, then choose File > Mail Contents of This Page (or press command+I)


5. Send email
Mail will load up and a new email will open that uses the HTML page. It may look a little strage (images don't align, background colour/image doesn't exist, but it should look correct once sent and recieved.
 
You can also copy a page you are viewing, say from safari, then paste it into the message body. I think it brings along some of the style stuff too.
 
Yes. The point can't be stressed enough that if you want to send a HTML-page, you *MUCH BETTER* send the link to it instead of it. Much less traffic, and if the recipient doesn't want to look at it, even more bandwidth is saved.
 
what I don't understand is why does apple mail read SOME html emails that I receive, while not seeing anything in others?
 
In Mountain Lion, the Mail Contents of This Page menu has been changed to Share / Email this Page. The resulting new outgoing message in Mail pretty much destroys any formatting you've done and will not display fully referenced images. If you send the message to yourself and then look at the source code, you'll see nearly a page of CSS which Apple has added to replace whatever styling you did originally. In addition, it prepends the message with the source URL in bright red. In short, this feature is now useless.
 
@kevin2s... sure, easy to create an HTML page. Not so easy to convert that page to an email that works at YahooGroups, Yahoo Mail, Gmail, Apple Mail, and AOL. The Mail Contents of This Page feature previously available in Safari worked perfectly for that. The new Share/Email this Page does not.
 
Back
Top