Do me a favor and check your email inbox now. I’d bet at least some of the emails aren’t typical plain text emails; Instead, they’re nicely formatted messages that look more like a webpage than just a few words.
These are HTML (HyperText Markup Language) emails, usually designed to inform or entice you, with fancy graphics, photos, animations and of course some text. As nice as that sounds, Apple Mail wasn’t designed to let you compose HTML emails; Instead, the so-called RTF or “Rich Text Format” is used.
Reading: How to create an html email on mac
In today’s tutorial, I’ll show you several ways to design an HTML email, and then let you in on the secret of how to send those emails from the Mac Mail app.
Creating your HTML email
Let me repeat a point from that first paragraph – there is no way to send an email in HTML Format in Mail, which means you need to use some way to style your email and generate the HTML file and all associated Cascading Style Sheets (CSS). For those experienced in coding HTML, you can just open your favorite text editor and style the page entirely with text. Most readers of this post will wish for an easier way to accomplish this task.
If you send email to thousands of people on a regular basis, you don’t want to use Mail for that since your email account most likely does being placed on spam blacklists! Instead, services like MailChimp or Constant Contact offer a way to design and send bulk emails. They’re also usually quite expensive, but if you send thousands of emails a day or week, these services are worth the cost.
Mac HTML Editors
We want to create an HTML file that can be opened in Safari on a Mac; When this goal is met, the same file can be sent from Mail. There are a number of web and email design apps for Mac and I’ll list a few here, but since not all email is read on a desktop device these days, you’ll want to make sure the one you’re using App capable of doing this is so-called “Responsive Design”. That means it can create web pages that look good no matter what device you’re using to view them – a Mac, an iPhone, or an iPad. It’s also useful if you can use a drag-and-drop (WYSIWYG) editor that lets you easily drop elements like text, images, and buttons onto a blank page or template, or export an HTML file. Here are some well-reviewed Mac web design apps:
- Sparkle (Mac App Store): A WYSIWYG design tool that’s quite expensive ($89.99 for Sparkle Pro), but responsive HTML can create and export a file.
- EverWeb: At $79.95 just for the software, Everweb is expensive, but offers good support, responsive HTML, and the ability to publish to a folder. EverWeb will look very familiar to those who have used Apple’s iWeb app.
- Wolf – Responsive Web Designer (Mac App Store): $59.99, offers responsive design and is very popular with users.
See also: How can I set up a small website for a local group?
If you’re a designer, chances are you already have a subscription to Adobe Creative Cloud, and the company’s Dreamweaver app is well suited to the task of designing responsive emails.
Regardless of the app used to create the HTML file, you will most likely get an exported file that contains the file in addition to a folder that contains the images used in the email design . On your Mac, you can double-click this HTML file to open it in Safari and you’ll see exactly what you’re about to send, images and all. However, if you tried to send that email at this point, your recipients would see well-crafted text and buttons, but no images since they are on your Mac!
You must host these images Files somewhere to ensure Mail can retrieve them from a server and then display them in the email. If you’re already running a website, it’s a relatively easy task to simply create a hosting folder, place your email images in that folder, and then change the image links in your email HTML to that they point to https://mywebsite.com /images/myphoto.jpg instead of the local /images/myphoto.jpg file. If you don’t have a place to host your photos, there are many website hosting services that charge a monthly fee for a domain name and hosting. You then upload your files to the host via FTP and then modify these image links in your email HTML. Thinking about hosting those files on a cloud service like Dropbox or iCloud? None of these services work for this purpose.
Remember, you can use your own Mac as a server, either with macOS Server (be sure to read our series on macOS Server) or MAMP. It will take a while to get everything set up, but if you plan to occasionally send HTML emails to friends or business prospects, this can be an inexpensive source for hosting image files.
Online Email Editors
This looks like an expensive proposition, especially if you’re just designing a custom invite and sending it to a few friends would like. However, for small businesses or even the occasional personal HTML email, if you have a host for those images, you’re on your way. You’ve probably noticed that Mac HTML editors don’t come cheap. So what’s a good way to design an HTML email without that extra cost? Use an online HTML email editor.
Bee is specially designed to create responsive HTML emails. What’s really nice is that you don’t need an account or pay a penny for the occasional one-time HTML email; Just go to the Bee website, select Bee Free and start designing by dragging and dropping elements (see screenshot below):
Once you’ve created your masterpiece, click the Save button in the top right corner of the Bee editor and you have the choice to download (free) or save (requires an account). Download it to your Mac and you’ll receive a folder containing the HTML file and an “Images” folder containing the images in your email. Upload the images to your host, edit the HTML file to point to those files, and then test your HTML file by opening it in Safari. Broken image links – meaning the link in your HTML file doesn’t properly point to the image files – can ruin your whole day (see image below):
See also: How To Create a Free Website with Google Sites [2023]
Fix the broken link and check the file then again in Safari.
Other free online services for creating HTML emails are:
- Topol.io
- Stripo.email
- Mosaico .io
Each service provides a way to design HTML emails through a simple WYSIWYG editor and then download the finished HTML file. Whichever service you choose, be sure to check your file in Safari. When everything looks how you want it, it’s time to try the remarkably simple trick to send the email in Apple Mail.
Sending the HTML email Mail in Apple Mail
After this lengthy process, you would think that sending the HTML email in Apple Mail would be difficult as well. Wrong!
With your HTML email open in Safari, choose Edit > Select All from the menu bar or press Command-A. This command unloads the entire HTML email on the screen out, after that you need to copy the email using Edit > Copy or Command – C.
Navigate to Apple Mail and create a blank email, then click on the place where you would normally start typing your message. Instead, paste the HTML email you copied from Safari into this area using Edit > Paste or Command – V (see screenshot below):
This method works independently how you created the HTML file. Just make sure you have your images hosted somewhere, select the entire “web page” you’ve designed, copy and paste it into Apple Mail. The beauty is that by hosting these images on a server, the formatted email containing the photos is actually quite small – the example above is 323KB in size, even though the images used in it are well over 2MB each.
See also: How to Make a Dynamic Website and Attract an Audience
.
