- A place online to store files (I'm using my website, but if you don't have one, you can use a file hosting service like Google Drive.)
- Images you'd like to use (more on that later)
- An HTML editor (you can use a computer program like TextEdit or Adobe Dreamweaver, or an online service like Online HTML Editor. I'm using Dreamweaver, but it really doesn't matter.)
- If you don't understand HTML (or can't ever remember what you learned like moi), use your Googleducating skills to brush up.
I'll start with the end result first, then we'll work our way up to it - Here's my email signature in all its glory:
Gorgeous right? Pats self on back =)
So first, I sat down with a pen + paper & sketched out what I wanted. I knew I wanted to include my headshot, logo, brand colors, and social media links, and I also knew I wanted it to be small - 300 pixels wide by roughly 150 pixels tall. You definitely don't want a huge, obnoxious signature, especially when replying to the same person multiple times! Once I narrowed down how I wanted everything arranged, I figured out what should be an image & what could be coded with HTML:
The headshot & logo could easily be combined into one image - that way I don't have to worry about spacing or making sure they're aligned properly. The social media links would each need to be a different image so that you can click on each one to be taken to my various social media accounts. The grey bar didn't need to be an image - a simple HTML code can create that.
Next, I went ahead and created the headshot + logo image, and exported it as a .PNG file that was a bit bigger than what the actual size of the signature would be. Remember when I said that the signature would be 300 pixels wide? I made the logo + headshot image 500 pixels wide. Next - social media icons, which is really easy! I went to IconsDB.com, and typed in the color I wanted the icons to be. I have a specific HTML code for the navy color I use, but you can also click the eyedropper & pick whatever color you want. Once you pick a color, search for whichever icon you need - Twitter, Facebook, Instagram, etc. There's a couple different options you can choose from - I picked circular ones & downloaded the 64 x64 pixel .PNG versions. Upload all the images to your file storage service, and let's put it all together!
I chose HTML tables to keep everything neatly organized. My table has 1 column & 2 rows, but you can make whatever configuration works for you. The headshot + logo image is in the top cell, and the social media icons are in the bottom cell (which also has a light grey background color added). Here's a side-by-side view of my HTML code (left), and the resulting signature (right).
A couple of quick points - in the HTML, I resized the images so they appear smaller than they actually are. For example, the logo + headshot image is actually 500 pixels wide, but I used HTML to show it as 300 pixels (red text):
I did the same with the social media icons to make them display as 24 pixels wide (remember that we downloaded them at 64 pixels wide):
When you're happy with how it looks, it's time to get it into Gmail & your phone. First, select all + copy the visual version of the signature, not the code:
In Gmail, go into your settings:
Then scroll down to the signature section & paste into the white box:
I like to add a couple spaces above the signature to separate it from the body of the email, but you don't have to.
Now we'll do basically the same process to put the signature on your phone. First, compose an new email in Gmail (the signature will automatically be added), and send it to yourself. Next, select the entire signature, and hit copy.
In the Settings app, go to Mail, Contacts, Calendars > Signature. Make sure "Per Account" is selected if you have other email accounts that you won't use this signature for. For example, I have a different signature I use when sending emails from my work email address. Find the box associated with the email account this signature is for, and paste into the box. I added a small blurb about the fact that I'm typing on my iPhone & may accidentally include spelling errors, but again, you don't have to.
Now, when you go back to your Mail app & start a new message, your signature will automatically be included. Sweet!
How'd you do? Don't forget to shoot me an email with your brand new signature, I want to see =)
<table style="color: #000000; font-family: Times; font-size: medium;" border="0" width="301" cellspacing="7" cellpadding="0"> <tbody> <tr> <td><a href="http://www.LaurenMechelle.com" target="_blank"><img src="http://www.laurenmechelle.com/wp-content/uploads/2014/04/emailsig040814.png" alt="" width="300" height="66" border="0" /></a></td> </tr> <tr> <td valign="center" bgcolor="#E7E7E7" width="301"> <div align="right"><a style="font-family: Times;" href="http://twitter.com/laurenmechelle" target="_blank"><img src="http://www.laurenmechelle.com/wp-content/uploads/2014/04/LMTW.png" alt="Twitter" width="24" height="24" longdesc="http://twitter.com/laurenmechelle" /></a><a style="font-family: Times;" href="http://facebook.com/laurenmechelleonline" target="_blank"><img src="http://www.laurenmechelle.com/wp-content/uploads/2014/04/LMFB.png" alt="Facebook" width="24" height="24" longdesc="http://facebook.com/laurenmechelleonline" /></a><a style="font-family: Times;" href="http://instagram.com/laurenmechelle" target="_blank"><img src="http://www.laurenmechelle.com/wp-content/uploads/2014/04/LMIG.png" alt="Instagram" width="24" height="24" longdesc="http://instagram.com/laurenmechelle" /></a><a style="font-family: Times;" href="http://youtube.com/laurenmechelle" target="_blank"><img src="http://www.laurenmechelle.com/wp-content/uploads/2014/04/LMYT.png" alt="Youtube" width="24" height="24" longdesc="http://youtube.com/laurenmechelle" /></a></div></td> </tr> </tbody> </table>