Many firms that rely on marketing have a similar scenario:  The marketing staff has created various marketing pieces that work great as print pieces, but when they want to do some customized e-mail marketing, the effort boils down to sending attached PDF documents or using template based subscription services.

Also, if you’ve already gone through this and are having a problem with the annoying white spaces between images in Gmail, this post will help!

What Will I Learn From This Series?

In this tutorial, you will learn how to take a PDF document (or Photoshop image) and use it to create and send HTML based emails.  You will also develop a skill set that will enable you to better design marketing pieces especially for HTML marketing.  Concepts include exporting to images, slicing images for web, optimizing images for use on the web, cleaning up HTML code, working with a webserver, and inserting HTML code into an e-mail.

What Tools Do I Need?

In this series, I am using the following tools:

• Adobe Acrobat (for exporting a PDF to an image)
• Adobe Photoshop (for slicing and optimizing the images)
• Adobe Dreamweaver (for cleaning up HTML and uploading to a webserver)
• Microsoft Outlook (for emailing the HTML pieces)
• Apple Mail (for those who use Macs)
• A Webserver like Bluehost (to host your images and HTML file)

There are many other tools, some of which are Open Source, that can be used to accomplish the same thing without the significant software investment.  The concepts are basically the same as with the tools in this series.  Get the concepts down and the specific tool doesn’t matter quite as much!

An Introduction to HTML Email

Step 1: Exporting the PDF as an Image

In our example, we’re using a PDF that was already created.  We’re simply going to turn this document into a graphic that we can then import into Photoshop and get it ready for HTML use.

To export a PDF, you will need to use Acrobat (or some other converter application capable of turning a PDF into a graphic).  Simply select File> Export> Image and choose your preferred image format.  I’m going with JPEG.

In this case, our document is 2 pages, so we end up with 2 graphics.

Step 2: Slicing the Image in Photoshop

In an ideal world, we will have designed our HTML marketing e-mail layouts in Photoshop specifically for e-mail.  However, in the real world, often we have something that’s been given to us to convert into HTML.  And the way we do that is to take what we have and use Photoshop to slice it up so that it’s more usable for the web.  That sounds complicated!  why are we doing that?  Well, there are a couple of reasons for this…

In this example, we could have just use the whole flier graphic as a one big graphic HTML layout.  But what if we want to link different parts of this layout to different websites (which we will do in this example)?  Or what if we wanted to get rid of some of the graphical text and add some dynamic text of our own?  Or what if we want to optimize certain graphics for faster loading in a web browser while leaving some of the other ones alone?

Well, the slice tool in Photoshop is really pretty easy to learn and it gives you a ton of additional flexibility when you are laying out your HTML piece.  Here’s how you do it:

Using Dreamweaver to Clean and Prepare HTML for Use

We’re almost done!  But before we take the HTML and stick it on an email and send to the world, we need to make sure it’s going to look the way we want it.  If you’re really good with HTML, you may not need this step, but for most of us marketers, having a visual editor and an integrated way to interact with our files and our webserver is a really helpful thing.

Time to Really Pay Attention to Detail…

The important thing about this step (besides getting familiar with Dreaweaver which can be overwhelming at first) is to really pay attention to the detail of how the graphics are laid out and how the table which Photoshop built (via the HTML code) is laid out.  Otherwise, when you send out your e-mail, things may not line up quite right or there may be spaces and gaps where you don’t want them, particularly on a flyer like the one we’re working on.

From the video, here’s what’s happened so far in basic terms:

1. We’ve sliced up the graphics in Photoshop.
2. Photoshop has generated the HTML code that we will eventually (with some modifications) insert into our email.  This code has simply created a table and inserted the graphics into various cells.
3. Photoshop has also optimized the various graphics that will make up our email (using the slices) and put them in an images folder.
4. Using Dreamweaver, we’ve used the design mode to look at the layout and identified some spacers and unused rows and columns in the HTML table & removed them.
5. We’ve also removed some table formatting that came over from Photoshop, specifically the fixed table widths & heights.
6. Using Dreamweaver’s LiveView, we’ve taken a look at how the email will look as a web page.
7. Finally we’ve then uploaded the clean HTML file as well as all the associated graphics to the webserver.

In this session, I primarily used the design view in the Dreamweaver layout.  Each of these views are useful as you look at the code and the design, however when dealing with the table, I prefer to work in the design view.

Our first step is to remove unused graphics or spacers from the table.  They were there because there were areas of white space around the graphics that I sliced and were automatically inserted in the HTML code.

Then I deleted the rows or the columns in the table that held these spacers.  This is because they would create areas of white space in our HTML email.  To do this I put my cursor in the affected cell and using either right click or the Modify file menu, I deleted the rows and columns.

Note: Since this was a pretty straightforward and simple table, I was able to delete rows and columns without messing things up too much.  Take care how you slice up your graphics in Photoshop so that the table is manageable once you get in and start cleaning it up!

The Power of Undo

You will also notice in the video that when I deleted the bottom row, the formatting totally messed up.  Not a big deal, because first I can always undo the last few actions, but I also knew that there was probably some other formatting that I could clean up… the pre-set Table Widths & Heights and Cell Padding.  This is a common issue, but can surprise you when you start cleaning up or if you keep seeing white spaces and can be frustrating if you forget to remove or reset that stuff.

We used the Properties tab at the bottom to remove these and we could have also found the same functions from the Modify>Table file menu at the top.

Checking Links

We also checked our links using the same properties tab (which changed when we clicked on a graphic item.  In our example, we actually set the links in Photoshop, however we could have just as easily done it here and we can always add some more.  Notice that the graphic is in the Src field, the link is in hte Link field & the Target field tells us how to handle the link (_blank means open in a new window).

Once we’ve cleaned our code, removed the white spaces, padding, unused graphics and other stuff we don’t want, we can use the Live View tool to see how the HTML renders on the web.  This is helpful, but keep in mind that every browser is different and it’s always a good idea to test out your e-mail using different e-mail clients and web mail tools to make sure that whoever gets your marketing piece has a good experience!

Using the Site Manager

One of Dreamweavers nice integrations is the Site Manager.  This functionality allows you to manage your local files on your computer, but also to connect to your webserver and interact with the files there, all from the same interface.

It’s certainly possible to use your own FTP client to transfer the files from wherever you have them saved to your webserver, but when you are doing some last minute refining and tweaking, it’s pretty convenient to be able to click a button and upload your newly changed files.

Here’s a quick look at the Manage Sites setup:

Note: I’ve recently created a new video on using the site manager in Dreamweaver for CC2015.  The functionality is essentially the same, but the layout is different.  You can view that video here.

The Final Step – Outlook Users

Once you have your HTML created, the final step is to embed it into an e-mail.  Sounds simple right?  Well yes, but there’s a little trick to it… the “Insert As Text” that’s easy to miss if you’re not looking for it.

If you’re a Mac Mail user, here’s a more recent version of this step including Outlook and Mac Mail.

Look!  There it is…

There it is on my iPhone.  Remember, people are going to be looking at your e-mail on all kinds of devices and using all kinds of interfaces, so when planning your e-mail marketing campaign, don’t forget to test it on several different e-mail systems to make sure it looks the way you want it to.

Update to this Post

Due to the numerous questions about combining text and graphics in an HTML email, I’ve created a new post on the topic!  I will also soon be creating a new post with info on how to avoid the annoying spaces that show up when sending an HTML email to Gmail accounts!  Enjoy.