Tips that will make your email signature design work great

Our design team are frequently asked to assist regarding design challenges/requirements:

I've created our company email signature, but it doesn't preview correct on my iPhone.

We don't have a design enforced yet, but we want our new company email signature to look great in all recipient inboxes - Regardless of which email client they use (desktop/web/mobile).

Does this sound familiar? 

  • Graphic designers have an eye for what looks great. 
  • But knowing what looks great and knowing what works great in email signatures are two different things.

We help you steer them away from common email-design mistakes.

Re-calibrate expectations

It just seems intuitive that creating a great company email signature would be simple.  

It's usually no more than contact information, a logo, and a few links. 

This shouldn't pose any problems? Not true

Virtually everyone has received a beautifully designed email signature - an email signature that worked perfectly in their inbox.

Jumping to the (erroneous) conclusion that what they see is what everyone sees. 

This “perfect” email signature now sets the standard for the email signature they want for the company.

We want our email signature always functioning flawlessly. Not possible.

In reality, creating a great working email signature is far more challenging than creating great working webpage because email clients don't follow any standards. Thus, you need to know (or test) what works and what doesn't work. You cannot expect that because it works great in one inbox, that it also works like that for everyone else (desktop/web/mobile).

Your webpages also don't function flawless and look the same on different web and mobile browsers. 

Don't set a higher expectation to your new email signature than you do to your webpages. 

Design for small screens (smartphones)

If your campaign analytics show that the majority of email recipients are opening and reading your company emails on their smartphones and tablets, then your email signature and marketing campaigns must follow the below requirement:

  • Max. 320px design width.  

TIP: Add a one row/one column table and set table width to 320px. Then you can easily compare with your email signature design.

Upload the email signature to Xink and you save time and the design will work great

When you upload your existing email signature - Then it works in the same way when you start updating for employees. 

Alternatively, use the built-in designer in Xink.

If you must use CSS, then use in-line CSS

In the Web world, designers rely on CSS to specify colors, fonts and other aspects of the layout. But it doesn't work the same way for email clients, and your designer might not have a clue. Designers typically create an external CSS file with all the layout information, and then they link to it in the header area of the HTML code.  

Since major email clients (incl. Outlook) don't honor CSS in the way that web designers are accustomed to, they must code all fonts, colors and other details in-line. In other words, they must specify formatting instructions throughout the email, table cell by table cell, paragraph by paragraph.

While this seems inefficient, it’s the only way of ensuring that your design will work.

Use JPG or PNG image format

We recommend .jpg format as there are instances where .png images get degraded in certain circumstances when they come back from others.

Attachment free 100% of the time cannot be achieved

No one wants their email signature to result in attachments. 

Unless you’re willing to skip the inclusion of your logo and other graphics, you cannot avoid attachments all the time.

The top of the email is not for pretty images

Your designer might want to put your company logo or something eye-catching in the top of your email. Bad idea.  

This section of your email might be all that readers see in the "preview pane". You don't have a whole lot of room or a whole lot of time to convince readers to open your message or scroll down. Put your logo and images beneath the primary message area.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.