Updated: March 26, 2020

How about a nice looking HTML email template that renders just fine in Outlook, Thunderbird, Gmail and all other major email client applications? Sounds pretty easy, but all email designers know how hard can it be to achieve a slick design yet still get the email to display fine across various email clients. It can be an impossible mission, if you aren’t experienced enough on designing HTML emails. But, here is a solution even for those that aren’t so familiar with the HTML email tricks.

Below we will describe a straight forward method to design a HTML email and achieve compatibility with all major email client applications. To start with, you need:
– Microsoft Office Outlook (any version starting with Outlook 2000);
– Adobe Photoshop (any CS version will do just fine).

How to create a great looking HTML email template with Photoshop

1. Let’s say you designed the graphical layout of your desired HTML email, so you have an image showing how the email is supposed to look like. Let’s assume you have the following design that you need to transform to a HTML email:

2. Open your email design image with Photoshop. You have to create areas that are going to separate HTML elements, using the slices tool:

Practically, you have to organize (split) your email layout in multiple zones (slices). Here are a few tips to create the best email slices:
– whenever possible, try to align your slices horizontally, like creating a table where all cells align to horizontal lines;
– each slice should contain one clear element (image or text). Your logo should form a single slice, your email title text should form another single slice, etc;
– avoid leaving image areas that are not part of any slice, even if they are blank (white) spaces. Make separate slices for them, too;
– try to split the email image into areas that hold single, solid colors. For example, if you have a grey area and a yellow area, make a slice for the grey area and another slice for the yellow area. This way you can later apply HTML background colors to these slices, instead of nesting colored images of those areas.

Below is the Photoshop design image after all slices were applied. As you can see, all email elements were separated into clear slices:

3. Now you need to specify the type of each slice: image slice or text slice (“no image” slice). Image slices are those areas that need to be preserved as images (like your logo or product box), while “no image” slices are those email areas that are going to hold various email texts.

In order to specify the slice type, right click over the selected slice and choose Edit Slice Options. Don’t create image slices for those areas that only contain a single, solid color. Instead, create a “no image” slice (with no text on it) and assign the desired color as the slice background color. For example, if your email is supposed to include a horizontal orange line, you should create a text (no image) slice from it and assign it an orange background color, like in the following screenshot:

For text (no image) slices, it is recommended to add some reference text in the Text Displayed box (see the above screenshot): these texts will later show in your HTML email template and they will help you easily identify where you should insert your text content to the final HTML email.

4. Once you are done configuring your email slices, click on the Photoshop File menu and choose “Save for Web“. The save options are critical to achieve a HTML email design that is compatible with the most popular email clients.

On the “Save for Web” preview window, click on the Save button and make the following selections:
– Format: “HTML and images”;
– Slices: “All slices”;
– Settings: choose “Other”, then choose “Custom” and “Slices” and configure the HTML options like in the following screenshot. For proper HTML emails, it is very important to generate the HTML output using HTML tables and not CSS styles:

Now you can open the saved HTML file with your web browser and see how the converted HTML email looks like.

For the final email, you will need to upload the image files to a web server, so they will be accessible by everyone, once the email is sent. Basically, you need to edit the HTML file with a text editor (Notepad or Wordpad would be just fine!) and replace the “img src” local path with an absolute URL (so instead of loading the images from relative URLs like /images/logo.png, you will need to load them from http://yourdomain.com/images/logo.png).

Then you can import the HTML file to Outlook. The easiest method would be to import the HTML email as an Outlook email template. If your slices were done right, the HTML email will render just fine with all major email client, like Outlook, Gmail or Thunderbird.

Here is how our sample HTML newsletter looks like, once it was imported to Outlook 2013:

If you designed an email newsletter, you can now use Easy Mail Merge to send mass personalized emails with your newsletter, directly from Outlook.

this entry has 2 Comments/ in Outlook Tips & Tricks, Outlook Tutorials /