

E-mail clients tend to be very picky about which CSS properties they support. The style tag is not supported in Gmail, and support for CSS selectors is spotty. The CSS float property is not supported in Gmail or Outlook, making CSS layouts impractical. One major obstacle in designing HTML e-mail templates is that there are literally dozens of different e-mail clients out there (most if not all can’t handle CSS and HTML like our internet browsers can) so you have to keep your design and codes as simple and straight forward as possible. Step 1.3: Writing the HTML Codesīefore we begin, here are some basic but important notes to keep in mind as you design your signature. NOTE: For Outlook 2011, keep your design width under 320 pixels to prevent having to manually adjust the width of your signature each time you compose new email. To see the HTML codes, find “View Source” in your browser menu. For this demonstration, we’ll use first/last name, title, email, company name and logo and some links. Step 1.2: Signature Informationĭecide what sort of information you want to display on your signature. View Sample Signatures that I have created for my clients. Rule of thumb, better to limit the width of your signature design so that it would look great on the computer as well as on mobile phones. Today, most modern mobile devices have a default width of 640 pixels. If your recipients view emails on their mobile phones often than you should keep the width of your HTML signature under 320 pixels wide to be safe. If most of your recipients view emails on a computer, there is more flexibility on how big or small you decide to make your signature block. So it is important to consider how and where the recipients view their emails. In today’s world, we often send and receive emails across a number of different platforms: desktop computers, laptops, tablets and smart phones. €¢â€¢â€¢ SECTION 1: HTML SIGNATURE CREATION ••• Step 1.1: Design Consideration If you don’t have one, try using Dropbox to host your images for free.Ī HTML editor (Coda, Adobe Dreamweaver CS6 for Mac, BBEdit) to write up your codes.
:max_bytes(150000):strip_icc()/10689516_849154308438637_7441446593458499686_n-5b3247c8c9e77c001ad967be.png)

If you already have the HTML codes written up for your email signature, go straight to Section 2 for instructions on how to get it installed. In Section 1, we will go over how to write up the HTML codes for the signature with remote images and links.

Installing a HTML email signature in Mozilla Thunderbird is easy but creating a complex signature with remote images and links is hard.
