- How to create an HTML email signature
- How to create an HTML email signature for your personal correspondence
- 1. HTML email signature in Gmail
- How to create HTML email signature for your Gmail account:
- 2. HTML email signature in Outlook.com
- How to create a professional signature in your Outlook account:
- 3. HTML email signature in Apple Mail
- How to create an HTML email signature in Apple Mail:
- 4. HTML email signature in Yahoo
- How to create a custom HTML signature in Yahoo Mail:
- Email signature generator tools
- How to create an email signature for newsletter emails with Stripo
- Way 1. Using Stripo’s prebuilt Modules
- Way 2. Using professional email signature templates
- Way 3. Building a professional email signature from scratch using Stripo as an email signature generator
- Save your entire email signature for further use
- Wrapping up
- How to code an awesome HTML email signature
- Keep it simple:
- Use Tables:
- Style Inlining:
- Just use Pixels:
- Spacing is Problematic:
- Line Heights must be included!
- Images Need Widths:
- Background Images Are Tricky:
- Limit of 10,000 characters:
- Media Queries May Not Work
- Looking for a new way to create and share email signatures?
How to create an HTML email signature
A professionally made HTML email signature helps to promote a personal and company brand, gather listeners for webinars, sell products, consult, keep the brand identity, and much more. For example, 82% of digital marketers use email signatures for brand awareness campaigns. In order to boost your email campaigns, we decided to put together a special guide on adding an HTML email signature to your personal emails in Gmail, Outlook, Apple Mail, and Yahoo, as well as teach you how to add email signatures to your newsletters using Stripo.
How to create an HTML email signature for your personal correspondence
1. HTML email signature in Gmail
Now, let’s start with adding an HTML email signature in Gmail. We’ll go through all the needed steps to show you the simple process of adding a signature design.
How to create HTML email signature for your Gmail account:
- go to settings;
- then click the “settings” again;
- at the bottom page, you will see “Signature”;
- insert image;
- choose the “small” size;
- upload images of the social media icons;
- add links to them;
I tested my Gmail signature: I sent out messages to different email clients and opened them on various desktop and mobile devices. It worked!
Now your email signatures will be creative and beautiful!
You may also create HTML signatures for your personal or personal correspondence with an external email signature designer.
2. HTML email signature in Outlook.com
Now it is time to talk about the process of adding an Outlook signature to your email.
How to create a professional signature in your Outlook account:
- then go to the «Mail» tab;
- open the «Compose and reply» tab;
- in a new window, search for the «Email signature» section;
- enter necessary text;
- to add social media, upload their icons as regular images;
- if you want to automatically include this signature in your Outlook email, be sure to click both checkboxes as shown below;
- choose «HTML» as message format, or else Outlook.com will only include the textual part of your Outlook signatures with no icons and links;
- click «Save.»
Please be advised that you can add a number of custom signatures to this email client. If you do, you will need to select a signature when sending your personal email.
3. HTML email signature in Apple Mail
You can add only textual elements to your email signature in the Apple email provider. And, of course, you can add a link to it. Now, let’s see how you can do it.
How to create an HTML email signature in Apple Mail:
- click “ Mail ” in the top left corner;
- then “ Preferences ” ;
- enter the “ Signatures ” tab;
- if you want to add a link to your email signature in Apple Mail, please highlight a necessary piece of text;
- right-click on it and paste your link.
Please be advised that you can add a number of signatures to this email client. If you do, you will need to select signature when sending your personal email.
If necessary, you can edit the HTML signature before sending an email.
4. HTML email signature in Yahoo
Currently, you cannot add photos and images to your email signature in the Yahoo email client. Consequently, no social media icons are allowed to be used either.
However, you can add a link to your own signature in Yahoo Mail.
How to create a custom HTML signature in Yahoo Mail:
- click the “ Settings ” menu icon;
- enter the “ Writing ” email tab;
- toggle the “ Signature ” button;
- enter your custom signature text;
You can add as many social media links to your custom email signature as possible.
(Source: Email from the Point)
Besides that, you can edit your HTML signature at any time.
Email signature generator tools
In addition to the standard methods we told you about above, you can use the HTML email signature generator tools to quickly create an HTML signature for your email. At the moment, there are quite a few different popular tools on the market:
- Rocketseed (paid);
- Signature.email (free);
- Hubspot Email Signature Generator (free);
- MailSignatures (paid);
- WiseStamp (paid);
- MySignature (free and paid);
- Newoldstamp (paid);
- Gimmio (paid);
- Designhill (free);
- Signature Maker (paid);
- Signatu.re (paid);
- Email Signature Rescue (paid).
They will easily help you create an email signature template you can use later in the email platform of your choice.
How to create an email signature for newsletter emails with Stripo
So, we told you about the ways to add had signatures to your personal emails. However, what if you need a signature for a global email list. And not ordinary, which everyone has, but custom. In this section, we will show how to create an HTML email signature, aka footer, for HTML newsletter emails with the Stripo email design platform.
There are three easy ways to do that:
Way 1. Using Stripo’s prebuilt Modules
Stripo has prepared many ready-to-use Email Signature Modules.
Choose any, easily customize it, and your signature is ready.
Way 2. Using professional email signature templates
For your convenience, we’ve built a number of paid and free email signature templates with various email signature examples.
Choose a necessary email signature format, use it in your HTML emails or use it for inspiration and create a new signature from scratch.
Way 3. Building a professional email signature from scratch using Stripo as an email signature generator
If none of the HTML email signature templates we built meets your requirements, you can create one from scratch.
Most importantly, it’s not time-consuming at all, and you don’t need to know CSS code or have any other technical skills in order to create a signature using Stripo.
We’ll show to build a signature similar to the one given below.
To build this email signature design with contact details, you need to:
- drag the “ Image ” block;
- upload your image of a necessary shape;
- into the second container, you add the “ Image ” block for the photo of your handwritten signature;
- below, you pull in a “ Text ” block to enter your name. Be sure to set necessary styles in the toolbar;
- to add a phone number and site name with icons to your email signature template, you need to drag a “ Menu ” block and set the «Icons and Links» menu type;
- to add links to social media accounts, pull the «Social» block in your template;
- design it according to your needs;
- add a link to your social profile;
- to add the horizontal divider, click the left container with your photo;
- enable «Border» in the side settings panel;
- set necessary border style for the «Left» side of this container.
You can also add your company logo if you like.
Save your entire email signature for further use
Be sure to save this Module to your personal Modules library to use across future email campaigns.
You’ll just have to pull this email signature into your template and slightly edit design elements if necessary.
Your browser does not support HTML5 video tag.
Wrapping up
As you can see, creating email signatures is quite a simple process, and you don’t need to know cascade style sheets and have technical knowledge. However, adding an email signature is important to maintain the brand identity, promoting your company, services, or you as a person. And with Stripo, creating and adding a signature has never been easier.
How to code an awesome HTML email signature
Coding an html email signature is not too hard, but if you have only been writing HTML for the past few years, it’s going to be a little strange. Why? Because coding an HTML email signature feels like coding a website back when some of us old guys starting making websites in like 1998. Inline styles, tables, and conditional tags were all the rage. It seems simple enough, but achieving perfect email client support can be a maddening and almost impossible task.
The biggest issue is that different email clients render HTML in wildly different ways. Some newer ones use a perfectly modern rendering engine akin to modern browsers like Chrome and Firefox. Others use really basic HTML rendering, viewing HTML code more like Microsoft Word than Microsoft Internet Explorer.
That said, here are some basic tips to get you started on your way:
Keep it simple:
A good rule of thumb is that the more simple your signature is, the more likely it is that it will work across the board of email clients. Don’t try to get too fancy or you will end up frustrated.
Use Tables:
Style Inlining:
The styles within your email signature should not be in a .css file or in a tag. Instead, the majority of the styles should be inline, placed on each tag like this:
.
Just use Pixels:
On today’s web we have many different options to choose from. But keep things simple in an email signature and just use pixels for everything. You’ll thank yourself later.
Spacing is Problematic:
Line Heights must be included!
We recommend setting line heights for all text and wherever you do that include the property mso-line-height-alt:exactly as well. This makes sure that Outlook will do what you expect it too.
Images Need Widths:
It is important that all images have a pixel width. Go ahead and include the width in both the style tag and the width tag, but don’t include px in the width tag or it may be ignored.
Background Images Are Tricky:
There are some tutorials online to making them work, but generally we haven’t had good luck in email signatures.
Limit of 10,000 characters:
Remember that some email clients (like Gmail) won’t let you have too long of an email signature.
Media Queries May Not Work
Some of the newer email clients can read media queries in an email. The main problem here is how the email signature gets into the email client. If it involves any kind of copying and pasting process, then don’t rely on media queries at all as they will probably be lost. Since mobile is really important for email, consider keeping your signature less wide for mobile devices, say 300-400 pixels.
Remember that where you are pasting the email signature is just as important as what email clients the signature will get viewed on. When you paste an HTML email signature into Apple Mail, it treats it as “Rich Text”, which removes certain inlined styles that may be important for Outlook. There’s not a lot to be done about this, so be wary of how the signature will be used by the people you are making it for.
Using a service like Litmus.com or EmailOnAcid.com is also extremely helpful. You can install the signature into your email client and send them an email. This email will then get screenshots taken of it across many different email clients. Some of them you have probably never heard of. This is great for learning about all of the different versions of Outlook and how each of them treat HTML signatures differently. These services are invaluable but expensive.
Hopefully this is a helpful first step as you begin to make your HTML email signature. If you are interested, we offer a free email signature designer that you can use to create really custom looking stuff. If you’d prefer not to take the coding approach you should try it out.
Looking for a new way to create and share email signatures?
Signature.email is a powerful visual email signature generator made to simplify email signatures for your whole team. Try it free!