On another topic altogether, this post is about how to create an HTML email. The reason you may want to use HTML is because you want to include pictures in your email. You also might want more advanced formatting and layouts. Perhaps it is a marketing email where you want to show pictures of products you are selling or screenshots of the program you wrote.

We have an example of an HTML email with the code for laying it out in another post at this site. Check out CSS Layouts for HTML Email.

Requirements

Before you begin you will need to gather your email content (pictures, text, layout and formatting). You will need some knowledge of HTML also. The next post on HTML Content gets you started on this.

YouTube Videos

There are many YouTube videos on how to set up your email. Here are a couple of examples.

How to Create HTML Email: Combining Text and Graphics – Part 1

Slicing images in Photoshop, cleaning the HTML code in Dreamweaver, uploading images to the Internet and using the code to send an email or post a web page.

How to create an HTML template in Gmail.

Drew Hannush discusses Gmail settings, adding content to your email, saving as new canned response, using your canned response in a new email.

Here is another YouTube video. How to Create a HTML Email in Gmail. We have a post here that describes how to f=do this. The post is called HTML Email in Gmail.

Gmail

These GMail instructions assume that you have already created your HTML content that has any necessary links to graphics and has no CSS code. To write an HTML email in Gmail you first need to log in and click Compose to create a new email. In the upper right corner of the screen, the middle icon has two arrows on it. Click it to work in full screen. In the body of the email under the Subject section insert a series of placeholder text such as a dozen asterisks. Highlight the text. Right- click the text. In the pop-up that appears, click Inspect Element. A window of code opens up. In the already-highlighted section, right-click and select Edit as HTML. Find your placeholder text. Open up the editor you used to contain your HTML content. This content should have no CSS code. If it does remove it and replace it with HTML code. Copy all of your HTML code, including the body tags. You need to now go back and paste your HTML code to replace those placeholders. Click at the bottom on the div tag just to move away from your current location “save” it. Your email should now look like you intended. Close the Inspect Element window at the bottom. Address your email and send it.

It didn’t work! It didn’t save our HTML code. I ended up sending the placeholders only.

Basic HTML View of Gmail

The solution is to use Basic HTML view. See Basic HTML version of Gmail.

Gmail Templates – Canned Responses

The better idea is to create a template in HTML. Think of it as your email letterhead. First you need to enable canned responses in Gmail. In Gmail, in the upper right corner there is a gear icon with a down arrow beside it. Click it. Click Settings. Click Labs. Find the Canned Responses. Click Enable. Go to the bottom and click Save Changes at the bottom of the screen.

Still doesn’t work! Here is a How-To Geek website that might have some answers. There is a section on Gmail aliases.

wpbeginner.com’s 7 Best

So you need an Email Marketing Service. wpbeginner.com on their website has published a list of the seven best email marketing services. MailChimp is on the list. We have some posts that discuss MailChimp.