Creating Slick Email Signatures Using HTML & CSS
--
Emails can be pretty boring so I like to add my own bit of flair when I can. I do this by customizing my email signature with a unique design using HTML and CSS.
Here’s what my email signature looks like:
I don’t put too much information in the signature so I don’t cause a sensory overload to the email recipient. I just included some links people may want to click to learn more about me and what i’m up to. If they want to get in touch with me, well they can reply to the email!
The alignment of the elements in the signature is done using HTML tables. I didn’t use flexbox since I wasn’t sure how well it would show up on all devices. HTML tables, although a bit cumbersome to work with, seem to render fairly consistently across many devices and is well supported.
Also, all the images in the signature need to be hosted somewhere like Google Drive. This is because the HTML image elements require a source URL and those images need to be pulled from some online server in order for the emails to render correctly.
All the CSS needs to be applied inline within the HTML elements. For some reason, emails don’t render correctly when you try targeting HTML element classes/ids using CSS.
The entire code for my email signature can be viewed at the embedded pen shown below.
Here is an explanation of some of the key features used in the email signature.
General Alignment
In order to get the image to appear on the left side, have the text on the right side, and have everything nicely justified and vertically alligned, I had to structure everything inside of an HTML table. The table layout is a bit confusing to work with since there is actually a table nested within a table to achieve the desired alignment. Here is what the skeleton of the HTML table looks like (brace yourself):
Headshot Image
The image element is nested inside of a table cell element <td> and it is vertically centered in the table using valign="middle" for the attribute and value of the table cell element. I’ve also added the vertical-align: middle attribute and value on the image element itself for good measure.
The source for the image is contained within my own personal Google Drive where the image has sharing settings that allow anyone to view the image. As a note, I had to change the sharing link provided by Google to include uc?id= at the beginning of the GET request in the URL. This allows for a direct download from Google Drive and makes sure the image appears correctly in the email signature.
In order to achieve the rounded image effect, i’ve added border-radius: 100% as the CSS on the image element.
Social Icons and Links
The social media icons used in the signature are all made up of an image element wrapped with an anchor element containing the link to appropriate social media page. The width and height are both specified attributes on the image elements (25 pixels is a good width/height to use IMO). The source attribute contains a link to an icon file on my own Google Drive, just like the headshot image. Remember to include uc?id= in your source URL when linking to an image on Google Drive.
The social icons are all structure as list items inside of an unordered list to help with accessibility (thanks Scott Vinkle for this suggestion). The CSS applied on the ul removes bullet points and extra space surrounding the entire unordered list. The display: inline-block on the list element allows each icon to be display side-by-side.
Adding the HTML Signature to your Email
If you’re using Gmail, you will have to copy the rendered HTML signature into Gmail. To do this, first open your HTML file in a browser.
Once you’ve opened the HTML file, you can highlight the signature with your cursor, copy, and then paste it into your Gmail signature (found under “Settings” -> “General”).
Personally, I don’t use Gmail in my browser, but rather, I use a desktop email client called Airmail. Airmail makes it easier to add the HTML signature since you can copy and paste the actual code into the Airmail settings.
If properly designed, your signature should look good on both desktop and mobile.
And that’s all there is to it! It is quite a bit more involved than a regular email signature, but it adds a bit of flair to your emails and it shows people that you care about the fine details.
