5 Steps to Create HTML Email
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
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
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
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
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
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.