About this article
In this article you will find tips and tricks and best practices for CSS styling in the Email signature manager.
Prerequisites
|
CSS styling
Outlook supports inline CSS styling of content. More information about inline CSS styling can be found here.
Here you can see an example of a simple e-mail signature and what its corresponding HTML and CSS look like:
<table>
<tr>
<td>
<table>
<tr>
<td>
<p style="font-family: 'Century Gothic', sans-serif; margin-bottom: 0; margin-top: 0;font-size: 16px; font-weight: bold; color: #000;">{{UserProfile.Name}}</p>
<p style="font-family: 'Century Gothic', sans-serif; margin-bottom: 0; margin-top: 0; font-size: 14px;">{{UserProfile.JobTitle}}</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p style="font-family: 'Century Gothic', sans-serif; margin-bottom: 0; margin-top: 0; font-size: 12px;"><span style="color: #000; font-weight: bold;">E: </span></p>
<p style="font-family: 'Century Gothic', sans-serif; margin-bottom: 0; margin-top: 0; font-size: 12px;"><span style=" font-weight: bold; color: #000;">M: </span></p>
<p style="font-family: 'Century Gothic', sans-serif; margin-bottom: 0; margin-top: 0; font-size: 12px;"><span style=" font-weight: bold; color: #000;">T: </span></p>
</td>
<td>
<p style="font-family: 'Century Gothic', sans-serif; margin-bottom: 0; margin-top: 0; font-size: 12px;"><a style="color: rgb(0, 0, 0); text-decoration: none;" href="mailto:{{UserProfile.Mail}}">{{UserProfile.Mail}}</a></p>
<p style="font-family: 'Century Gothic', sans-serif; margin-bottom: 0; margin-top: 0; font-size: 12px;"><a style="color: rgb(0, 0, 0); text-decoration: none;" href="tel:{{UserProfile.Mobile}}">{{UserProfile.Mobile}}</a></p>
<p style="font-family: 'Century Gothic', sans-serif; margin-bottom: 0; margin-top: 0; font-size: 12px;"><a style="color: rgb(0, 0, 0); text-decoration: none;" href="tel:{{UserProfile.Office.Phone}}">{{UserProfile.Office.Phone}}</a></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<img src="{{UserProfile.Office.Logo}}" width="170" height="50" />
</td>
</tr>
</table>
</td>
</tr>
</table>
The HTML editor in the signature manager will automatically format your HTML code for you. Thus, providing you an overview of the HTML with proper markup indentation.
CSS Styling - Tips and tricks
Use inline style for your Email signature. Here are some tips and tricks for your Email signature:
Keep your e-mail signature design simple
Try to create a design without too much information. By excluding excess information, you can make your signature more effective i.e. your recipient can find the information they need quickly.
Another common rule of thumb is to also keep your colors and fonts simple. By limiting your number of colors and only use one font type, you can create a cohesive signature that does not overwhelm or distract your recipients.
Use web-safe fonts
Although having a custom font is desirable, it is important to keep in mind that your recipient may not have the custom font on their own device. This situation would result in your e-mail signature design having a completely different font. Therefore we recommend you to use web-safe fonts instead of custom fonts.
Set "cellspacing" and "cellpadding" attribute values 1
Some e-mail clients will automatically add padding and spacing to e-mail signatures. There we recommend you to set the "cellspacing" and "cellpadding" attribute values to 1 when using tables. This improves consistency.
Add padding to <td> elements
Outlook Desktop Client will ignore padding on certain elements such as <a> and <p>. We, therefore, recommend only using padding on table elements such as <td>.
Avoid using rare HTML elements
HTML elements that might have styling pre-defined by mail clients or browsers, such as <strong>, <em>, <html>, <head> or <h1> (headings in general) should not be used. The desired styling might be overwritten by the default styles defined by the email client/browser.
|
Comments
0 comments
Article is closed for comments.