CSS, HTML & Email (Apple Mail & Gmail)

This past week, I’ve had a freelance project where I had to create email signatures for a company. In it’s most basic form, this isn’t a big deal, and neither what I was aiming for. There were a couple things to keep in mind:

• the signatures had to be uniform other than user data
• signatures have to work in both Apple’s Mail client and Gmail
• need to incorporate links to social media sites, company website, and make the phone number a link to open in browser/smart phone.
• create a general user readme file as a guide how to update their signatures.

I’ve included the “how to” parts below, but first, let’s talk about the code. The funny thing here is that, it’s all just HTML and CSS. Apple mail, albeit difficult, actually reads the signature better than Gmail. Gmail doesn’t seem to be as kind about CSS stylings, and I found I actually had to simplify what I originally worked out and wanted.

What I wanted to create was something to the effect of this:

• name
• title
• phone
• company image as a link
• social media icons as links
• legal disclaimer

This is ultimately what I came up with and wanted to push out there. Problems arise momentarily.

When I started building it out, I originally had the inline styling.

And while this worked, the obvious problem of keeping things DRY wasn’t happening. So I figure, why not throw most of these styles into a class? I mean, the code looked way better.

Problems started to arise when trying to make the hover tag from this container class work as inline styling.

And that’s how I got the image to change from colors to black & white. It’s basically two images, overlaid upon each other, with set opacity and transitions.

Hold up! Why do you even need to worry about that?!

Well, Gmail doesn’t seem to be the biggest fan of reading certain tags. Read more about which tags are ok, and which aren’t. So I had to scrap the whole idea of having a functional AND cool email signature, and just stick with functional. Yeah, I could make it a gif, import that as the img src, but it’s not as fun when the user can control it via :hover. Sigh…

Before I realized this though, I thought maybe Gmail just wasn’t reading the CSS classes, so I tried it all inline and found that it’s only a select few tags that are left out of the party.

As I was writing this, what I should have created was a single page that took in the users info like name and contact info. From there, it should return both the body portion of the HTML (for Apple Mail) and the viewable page (for Gmail) so the use could copy/paste. This way, any new user can generate their own code needed for their email signatures. That’ll be part two!

HOW TO ADD HTML TO YOU EMAIL SIGNATURE-Gmail

Login your Gmail account. Double check you’re login into the yourname@puresouldpresents.com account.

Once logged in, go to Gmail.

Within the Gmail page, go to Settings under the gear wheel:

Click on the “See all settings” button:

In Settings>General:

Scroll down until you get to

Click the “+ Create new” button to add a signature:

Give it a name:

Open the included HTML file in any browser, and select everything on the page:

Copy and paste that into the text area of the signature you just created.

SUPER IMPORTANT:

Scroll down and click the “Save Changes” button. If you skip this step, everything will be for not and somewhere in the distance, a puppy is crying.

Everything should be good to go!

HOW TO ADD HTML TO YOU EMAIL SIGNATURE — Apple Mail

Open Mail

Go to Mail>Application Preferences (or CMD + comma )(cmd,)

Go to the Signatures option:

Create a new signature in the Mail application by clicking the plus button:

Select the newly created signature:

Once this is done, we’re actually going to close the preferences window and quit the application.

Super important the application is completely closed, but the next steps involve locking a file so that Mail doesn’t overwrite it.

Don’t be scared about these next steps either!

Go to this file path:

/Users/YourUserName/Library/Mail/V7/MailData/Signatures

if you press cmd+shift+G, Mac will open a shortcut to get to folders directly. You can also click your way there.

Depending on what version of MacOS and mail you have the “V7” might be a different number.

Once in that folder, we’re looking for the signature we just created. You can find this by looking at the Date Created field. It should be the newest file ending with “.mailsignature”.

Now that you’ve got that file, we’re going to open it with TextEdit.

It should look something like this:

Don’t panic, and remember, nothing we do here can’t be undone. 😊

From the this email, copy the HTML code at the bottom of this document and paste it over (overwrite) the highlighted part “<body …” to the end.

Once you’ve pasted the new HTML code in the file, you’ll need to change a couple fields:

• Your_Full_Name
• Your_Title_Goes_Here
• href=”tel:Your_Phone_Number_Goes_Here”
• Your_Phone_Number_Goes_Here

If you just do a find, it makes digging through all the lines of code faster.

When those fields are done, save and closer the file.

Select the file you just edited, and press cmd+i or right click and select Get Info:

In the newly opened window, you need to make sure the file is “Locked” by selecting the Locked check box:

You’ll know it’s locked once you see the file change to include a pad locking icon.

This must be done because Mail is a dirty little punk who likes to go in and change things despite us knowing better.

Finally, when this is all done, reopen Mail, and find that signature and write all the emails.

NOTE: It will look like it’s not working sometimes. This is because the images are pulling from online, and don’t actually live within the HTML. Send a test email to me, a friend or anyone and see if it’s received properly.

If all the step were done correctly, it should be working.