How to create an email signature with adaptive width

Problem:

You want to create an email signature based on a table, but you want the width of the table to adjust automatically to fit the signature contents.

Solution:

Generally, it’s a good idea to use a table with a fixed width. This way you make sure that your signature looks identical on different email apps or devices. The standard width of a signature is usually around 600px, but it’s recommended to use even half of that (around 300px) if you want the signature to look good on mobile devices.

That said, if you create a signature template that’s too narrow, some elements may not fit within the table or column width. For example, text can be wrapped to another line. This is especially common when using placeholders in signature templates. For example, when users’ have their second name included in the First name property or when they have a long job title, as shown in Fig. 1.

Fig. 1. Text wraps because the column width is too narrow.

To create an email signature with adaptive width, consider using one of the following methods:

• Remove the width CSS properties from the HTML table elements – this works with all email clients, but in some scenarios the table or column width can expand indefinitely. Use with caution.
• Use the max-width CSS property instead of width in the HTML table elements – with this method, you can still limit the width of your signature to a fixed value (e.g. no wider than 500px). However, not all email clients support the max-width property.

Follow the steps below to find out how to make these changes to your signature template in CodeTwo Email Signatures 365:

1. In the signature management app, open your signature template for editing.
2. In the editor, click HTML source to open the HTML source code view.
3. Use the Find text feature (press Ctrl+F) to find all instances of the width CSS property (Fig. 2.).

Fig. 2. You can quickly find all occurrences of the width property by using the Find text option.

4. Remove the width properties from the HTML table elements or replace them with max-width, as shown in the examples below:

• Example 1: Removing the width properties
  Remove the width CSS properties found in the <table> and <td> elements. In the example shown below, you need to delete everything that's highlighted in red:

  <table style="width: 310px;" cellspacing="0" cellpadding="0" border="0">
  [...]
  <td colspan="1" style="width: 270px; font-family: Arial; text-align: left;">
  

  so that the source HTML code of your table looks like this:

  <table cellspacing="0" cellpadding="0" border="0">
  [...]
  <td colspan="1" style="font-family: Arial; text-align: left;">
  

  Warning

  Don't change or delete all the width properties you find in the source HTML code. Some of these properties might be used e.g. to define the width of the graphics added to your signature template (when placed inside the <img> tag). See also the troubleshooting section for additional information. 

• Example 2: Using max-width instead of width 
  Change the width CSS properties found in the <table> and <td> elements to max-width. For example, if this is the source HTML code of your signature:

  <table style="width: 310px;" cellspacing="0" cellpadding="0" border="0">
  [...]
  <td colspan="1" style="width: 270px; font-family: Arial; text-align: left;">

  you need to change it so that it looks like this:

  <table style="max-width: 310px;" cellspacing="0" cellpadding="0" border="0">
  [...]
  <td colspan="1" style="max-width: 270px; font-family: Arial; text-align: left;">

  The source code of your template should now look as shown in Fig. 3.

Fig. 3. The source code view of a signature after replacing the width property with max-width.

5. Once done, click Apply & Close in the HTML source code view window.
6. Use the Signature preview feature to check if your signature's width adjusts automatically according to your settings. As shown in Fig. 4., sender's name and job title doesn’t wrap to the next line any longer.

Fig. 4. The signature now auto adjusts to its contents.

7. Click Apply & Close in the editor to save your changes.

Troubleshooting

The solution described in this article may not work as expected with some signature layouts. In the example shown in Fig. 5., after removing the width properties from the table and all table cells, additional white space has been added to the left column. This is because there is no minimum width specified for the column now, so the width is calculated based on the contents of other rows and columns. This is the expected behavior of HTML elements and is often the case with columns or cells that contain images only.

Fig. 5. An additional white space is added after removing all width properties from the signature's source code.

To fix this, consider using fixed width for cells (<td> elements) that contain images, as shown in Fig. 6.

Fig. 6. A fixed width property is used for a <td> element that contains an image only.