Now that my amazing new logo by Karly A. is complete, it was time to create an awesome new email signature. It’s actually really crazy how important email signatures truly are. I feel like if I see an awesome email signature I tend to take that person more seriously and perceive them in a more professional manner.
Here’s the kicker though, writing HTML for an email signature is like taking a time machine back to 1995 when writing HTML in tables with inline styling was the only way to go. The code for my email signature is actually somewhat disappointing. You can blame this is on Microsoft and their stupid products. Outlook’s software and online email application are really picky about how they render HTML. Therefore, we have to KISS (keep it simple, stupid).
So here are a few tips for you when creating your email signature (these could also apply to an email template too):
- KISS (previously listed above, Keep it simple, stupid.)
- Inline CSS – You can not attach a stylesheet well so inline CSS is necessary.
- Be Fanatically Detailed – Each mail program is going to render their own default CSS. For example, Gmail puts a margin left on all line items, if you do not want that margin left you will need to override. Outlook has MANY of these issues, so be as descriptive in your inline CSS as possible with font styles, spacing, etc.
- Images – Use more images versus depending on CSS or libraries. I wanted to add Font Awesome icons and realized that not all email programs would recognize that I added the external stylesheet for the Font Awesome library; therefore, I had to turn my icons into images.
- Test, Test, Test & TEST – Double check what your code looks like in as many scenarios as possible; phone vs desktop, Gmail vs Outlook. You never know what your end user is going to actually see and as stated above, no signature is better than a bad signature.
Wanna see the finished product?