HTML Email Template

Straightforward, minimalist template for HTML emails

Based in Base Template

Installation

Coding HTML emails is complicated, especially when it comes to making them look good in Outlook. When it comes down to creating beautiful, responsive emails, Outlook will usually take those templates we worked so hard on and render them with broken links, missing pictures, and a misaligned layout.

Here you are a HTML template. It works quite well, however if they are sent from Outlook sometimes unwanted spaces are inserted, especially in the GMail client

The best way to create a HTML signature is building the element in a decent HTML editor, then copy the preview of the signature (copy the rendered HTML in the browser, not the code!)and paste it in a new signature in the Mail Client.
For instance, in Outlook that can be achieved in Preferences -> Signature.

Tips

• Use the HTML no breaking space symbol (   ) between words to avoid wrapping in small devices (white-space:nowrap usually does not work in most email clients).
  Example: Commercial Director

• Use the HTML no breaking space symbol (   ) to fill empty spaces. Do not use blank gifs

• If you find problems in iOS Mail App, with the font color on <span> or <p> tags use <a> link tags

• Use minified HTML to build the signatures (minifier tool)

• Use <span> tags instead of <p> tags to avoid unwanted spaces (this usually happens if the email is sent from Outlook),

  • i.e.:

  Instead of 
  
  <p style="margin: 0;font-family:Arial,Helvetica,sans-serif;mso-line-height-rule:exactly;line-height:16px;font-size:14px;font-weight:bold;color:#4f5444;">Enter Projects Asia</p>
  <p style="margin: 0;font-family:Arial,Helvetica,sans-serif;mso-line-height-rule:exactly;line-height:18px;font-size:14px;color:#4f5444;">49/15 Boat Avenue, Cherngtalay</p>
  <p style="margin: 0;font-family:Arial,Helvetica,sans-serif;mso-line-height-rule:exactly;line-height:18px;font-size:14px;color:#4f5444;">Thalang, Phuket 83110, Thailand</p>
  
  use
  
  <p style="margin: 0;font-family:Arial,Helvetica,sans-serif;mso-line-height-rule:exactly;line-height:16px;font-size:14px;">
      <span style="font-family:Arial,Helvetica,sans-serif;mso-line-height-rule:exactly;line-height:16px;font-size:14px;font-weight:bold;color:#4f5444;">Enter Projects Asia</span>
      <span style="margin: 0;font-family:Arial,Helvetica,sans-serif;mso-line-height-rule:exactly;line-height:18px;font-size:14px;color:#4f5444;">49/15 Boat Avenue, Cherngtalay</span>
      <span style="margin: 0;font-family:Arial,Helvetica,sans-serif;mso-line-height-rule:exactly;line-height:18px;font-size:14px;color:#4f5444;">Thalang, Phuket 83110, Thailand</span>
  </p>
  

External Tools

• Email checker
• Email signature generator
• HTML Email Signatures and Spam Filters
• Spamhaus: Spam domain checker
• Barracuda: Spam domain checker

Read more:

Extra space added to HTML e-mail when sent from Outlook to Gmail

Outlook Rendering Issues: 5 Tips to Ensure Your Emails Display Properly

Outlook Email Signature adding extra space when sent to Gmail iOS

Does anyone know where the signature file is stored on a Mac using Outlook 2016?

License

MIT

Versioning

We use SemVer for versioning.

Changelog

0.1.1
Update README with Outlook tips
  
0.1.0
First version