Writing HTML for an email signature is more complicated than writing it for the web. This is because Web HTML only needs to be optimised for browsers. By looking at your web analytics you can easily define which browsers your visitors use the most and optimize your code accordingly.


Extracting the same kind of data for your email is way more complex. Tracking gets complicated as the user can open the email in a browser, mobile or desktop app. This also adds complexity to the correct optimisation of your code. Therefore, the best practice here is to go for the safest possible option, which often might not be the most aesthetically pleasing in terms of the code and the way it is created.


Some things to watch out for: 

  •  We recommend using <table> tag for layout
    • In older types of email clients (or those that were built on top of them) such as MS Outlook, this tag creates heavier  code. However, avoiding the risk that the signature won't be displayed properly to a key stakeholder is definitely worth it.
  • Do not use new CSS attributes (e.g. CSS grid)
    • CSS is evolving faster than web browsers and email clients are able to implement it (see the previous point). This is why you should only use older, more established attributes that will work for all clients.
    • If you want to check whether an attribute is safe to use, the caniemail.com site is a great source.
      • Remember though, that the only way to gain 100% certainty is by testing the code in other ways (ideally directly on the device, see below). The site might not always be completely up-to-date, which is understandable. 
  • Your <style> block will be removed by recipients' email client
    • Many email clients (including Gmail) remove style blocks so that you are disabled from changing the email styles from the mail. This also means you are practically unable to use style blocks, only inline styles. Instead of:
      <style>
.companyColor { color: blue }
</style>

<span class="companyColor>Company name</span>

      simply use:

      <span style="color: blue;">Company name</span>
  • Using links, especially with CUSTOM_ATTRIBUTE, need proper settings:
    • For email address link which should be wrapped as in itself (mailto: is present because when you click on it, an email client recognise it as an email address) while keeping the color (black in this case), you need to write it this way:

    • <a href="mailto:{{ PERSONAL_EMAIL }}" style="color: black;">{{ PERSONAL_EMAIL }}</a>
  • External resources (mostly images)
    • There might be issues with them. Especially with images as some clients disable image loading. Others might be disabling images or CSS styles from a different domain than the recipients. 
    • It's better to use inline styles and avoid using external sources as much as possible (e.g. for CSS, copy the code directly into the mail. For images you have to accept the risk that they may not load in a fraction of mails. You might want to use alt description if it is a serious issue).
    • They must be publicly available.
    • Bear in mind that base64 images do not work most of the time.
  • Good artists copy, but the best steal
    • One of the best practices is to look at how services that specialize in HTML for email (e.g. MailChimp or our signature templates) write their code, and copy it as much as possible.
    • One way of doing this is to create a signature in MailChimp (or any other email newsletter service) using their templates and then simply copy the HTML code to My Services Signature Management tool.
    • Use our templates and HTML tags we published on Github. You can also use template framework MJML (online editor is available).
  •  Test it in real email clients
    • Even the best attribute checker won't fully replace sending a few emails to yourself. 
    • It is Ideal if you know which client your recipients use
    • Try as many combinations as possible (ask people who have different types of devices to help you)
      • Mobile vs. Desktop
      • OS - iOS, Android, macOS, Windows, Linux, ChromeOS
      • Browser vs. native app
      • Also keep an eye on threads - the first email may be ok, but within the email thread the signature may fall apart, or it may deform the thread itself (it often happens with wide signatures)


How to add custom attributes in My Services Signature Management tool

In addition to the most common variables in email signatures, such as the user's name, photo, personal email or others, you can also add custom attributes. We call them CUSTOM_ATTRIBUTE. These will allow you to customize signatures based on custom attributes that are created directly in Google Workspace Admin Console by people in the organization who have sufficient privileges (Admin or Superadmin).


For example - suppose that a SignaturePartners attribute is created with the P1_Link and P2_Link attributes (created by the organization). Each account will have different values for these attributes.

To add this variable to My Services Signature Management tool, the formatted variable CUSTOM_ATTRIBUTE must be used. Like any formatted variable, it must be wrapped in two compound brackets - {{ CUSTOM_ATTRIBUTE }}. 


This way the tool will understand that it is not text, but a variable that is formatted according to the Google Workspace data. 


However, to get a specific variable (e.g. P1_Link), you still need to add a path consisting of the name (SignaturePartners) and the name of the key in it (P1_Link). Insert these two values in square brackets and quotes next to each other in this order. 

The resulting variable will look like this: {{CUSTOM_ATTRIBUTE['SignaturePartners']['P1_Link'] }}


Some common issues you might encounter:

  • Incorrect/incomplete path name. It cannot be just {{ CUSTOM_ATTRIBUTE }} or {{ CUSTOM_ATTRIBUTE['P1_Link'] }}
  • Spaces and diacritics in custom attributes may cause confusion, check whether they are written the same way in our signature tool as they are in Google Admin.
  • Incorrect quotes - sometimes smart quotes i.e '' won't work. You should use straight quotes i.e.'', or you can try double quotes "" 
    • {{ CUSTOM_ATTRIBUTE['SignaturePartners']['P1_Link'] }} may not produce the desired result