HTML and images in your Gmail message that you can use as a signature

Placed in: Home

HTML and images in your Gmail message

Google's mailing service (Gmail) has a build in rich text formatter. The options of this text formatter are restricted. You can't add tables or images to your email.

In this article I'll explain how you can add such images, tables etc. to your Gmail message. This way, you can give more attention to your email, making it better to read or to promote something. You simply have to add HTML to your email.

To get this effect, you'll only need any kind of WYSIWYG HTML editor. Examples of this can be Dreamwaever or Frontpage. Also online editors will work, like DevEdit, Google Pages or any other you can find. In this example, I'll be using online-html-editor.org.

Before we start, I recommend you to read A Guide to CSS Support in Email. As you can see, Gmail doesn't support a lot of CSS. So, if you want to make sure that this will work, exclude as much CSS as possible, making only use of HTML. Don't use "spacing", "margin" etc.

First, make your email as you want it to look like. Now add your image to the editor by pressing the Image button. A new window will appear with several options. In the Source: field, enter the URL of your image. If you don't have a webhost on your own, you can use ImageShack to upload your images for free. Additionally, you can add a Title. Let the rest be as it is, only change the Border Style to "No Border" if you're going to use the image as an URL. Now press Insert to insert the image to your message.
Now you can make a link from your image. Select the image (or text if you want to link it to another page) and press Hyperlink. This will also open up a new window where you can set some values. Set the Source to the page you want to link to. Set the Target to Blank. This will cause to open the URL in a new windows. You can also change the Title of the link. Press Insert if you want to embed the URL to your message.
When you're all done with your email, select it all (Ctrl+A). Now Copy you message (Ctrl+C). Go to Gmail and compose a new message. Make sure you have Rich Formatting set to On. Now Paste (Ctrl+V) your message in the message box of Gmail. Now you should have your image in your Gmail with a URL to your website. You can check if your URL is working by holding "Ctrl" and clicking on the link.

There you have it, your own image in a Gmail message. Experiment on your own on what options are possible.

I want HTML in my signature

Even if your message can contain HTML, the standard signature doesn't allow rich formatting, therefore you can't "Copy-Paste" your HTML code there. Also, it's a lot of work copy-pasting your HTML signature in every email that you send.

There is a little workaround for this one, you'll just need Firefox as your browser and install the Better Gmail Add-on. This add-on has a lot of features, making it a really cool plugin.

When installed, go to Extra... > Better Gmail in Firefox. Go to the tab Compose and set Signature Settings: Float/HTML/No dashes on. Now press Ok to save the changes.

Go to your favorite WYSIWYG editor and create your signature. I made one with a link to the RSS Feed of my website. Depending on your editor, you'll need to get the plain HTML code. On online-html-editor.org, you'll need to go to Save file now and open the downloaded file with Notepad. Select all the code between <body> and </body> and Copy (Ctrl+C) it. Make sure no style / span attributes are in your code.
Now go to Settings on your Gmail page. Select the tab General and scroll down to Signature. Set the radio button from "No signature" to the radio button before the empty text field. If you have Better Gmail correctly installed, you should have the three checkboxes. Make sure you have the checkbox before Allow HTML in Signature set to On. Now paste (Ctrl+V) your code from the previous step in the signature text box. Scroll down and press Save changes to save. When now creating a new email, you should have a nice looking signature with HTML format.

Enjoy this knowledge. Cheer up your Gmail messages and promote your site or anything else more effective this way. Take a look at a complete list of HTML tags to make even cooler messages. Also take note of the possibility that the receiver of the message doesn't find the images / colors nice or cool, but finds it rather annoying. Don't overdue it.