5 Steps to Create HTML Email

Jeff Macharyas
3 min readJun 10, 2016

--

Sending an invitation to a bunch of people via email? Maybe a short marketing message? Perhaps an announcement to family with a couple of pictures?

You could send plain text.

You can send an email with an attachment (that may or may not make it or get opened).

Or, you can send an HTML Email! Woo hoo! That’s the ticket!

Is it hard? Nahhhhhh…..

You do need a few things that many people may not have. However, there are people out there in the dark corners of the world who do possess such awesome powers and the equipment and know-how to create a fabulous HTML Email. Yes, I’m talking about people like me.

But, if you wanna give it a go, here’s how I did it and you can too.

The Tools I Used

MacbookPro laptop

Google Chrome Browser

Adobe Dreamweaver CC

Adobe Photoshop CC

Fetch

1 — Open a default HTML Email template in Dreamweaver

Dreamweaver HTML Email Template

2 — Create the HTML email in Dreamweaver

A few things I did:

I removed as much of the unneeded elements and code as I could. There were way too many image placeholders and a bunch of commented-out instructions. There were a few empty table row and table cells, too. This is kinda advanced HTML, but if you fiddle with it enough, it’s not that hard.

HTML Email Created in Adobe Dreamweaver

HTML Email Created in Adobe Dreamweaver

My email had two images. I received them as JPGs, so I opened them in Photoshop, sized them down and exported them out as .PNG files.

3 — Upload

I then uploaded these images to a server that hosts the website this is associate with.

To do this, I used an FTP Client. I used Fetch. There are many others, such as FileZilla, etc. I made a new folder to contain these and this is where the HTML file goes too. Keeping the images and HTML in the same folder allows you to use a shorter “img src” (the code that tells the page where the images are — no need for extraneous paths).

FTP assets to server

FTP assets to server

4 — Open in Browser

Then, I used my web browser (Google Chrome) and opened the “webpage” I created. I hit Command-A (Control-A on Windows or Linux) to select everything on the page, then went to my email, Google Chrome.

Command-A the entire webpage

Command-A the entire webpage

I created a subject line, removed my signature block and pasted the contents of the webpage right into the message window. I then sent it to myself, just to make sure it really worked. It did.

Paste Webpage into Email

Paste Webpage into Email

5 — Easy to Modify

Pretty simple if you have the right tools. There is a lot of modification that can be done, but keep it simple so that your recipients don’t have to navigate through a whole bunch of stuff to get to your message. Thanks for reading. Hope this helps.

Originally published at Jeff Macharyas.

--

--

Jeff Macharyas
Jeff Macharyas

Written by Jeff Macharyas

Director of Communications at the Everson Museum of Art in Syracuse, NY