I can just imagine your cringing face right now! Tables arenвЂ™t meant to construct a layout, right? Well thatвЂ™s completely trueвЂ¦except for email signatures. The accumulated bloat can also increase the time it takes for server migrations and in general it can make life more difficult for your / your customerвЂ™s IT department. Any larger, and you will be taking up valuable space in not only your mail server (sent items), but also your recipients mail server (their inbox). An email signature should be under 30Kb in size. So, before using any images in your email signature, make sure you compress them by using a tool like TinyPNG. Images have a huge role to play in large email signatures. Check the size of the email signature (in KB) If you use a font that is not a web safe font, ensure you include a fallback font, just in case your primary font is not installed on the recipientsвЂ™ device. Web safe fonts are: Arial, Arial Black, Calibri, Comic Sans, Gadget, Helvetica, Palatino, Tahoma, Verdana, Trebuchet, Courier New, Lucida, Times New Roman, and Georgia. Web safe fonts are basically fonts which are available by default (or pre-installed) on most operating systems. Take a look at the comprehensive list of CSS support for email clients here. The reason? A lot of email clients donвЂ™t support (or are buggy) with background colors (such as Outlook 2007-2016). DonвЂ™t use background colorsДЄlthough background colors work perfectly fine in normal web design applications, they are a no-go zone for email signatures. Here are some of the most important things to keep in mind when coding your signature. Remember how I was saying you need to go back to the old days of CRT screens? Well, hope you have your Netscape Navigator open, ready for some coding. However, these are the most common type of fields used: name, position, company, phone numbers, logo, profile pic, website, address, and social icons. The fields you use are ultimately up to you (or your customer) so there is no set answer here. Design with spacing in mindД®mail clients are known for adding random spaces between tables and other elements, so make sure the signature will still look fine if a bit of spacing gets added here and there (weвЂ™ll come back to this later). Adobe has a great tool for checking complimentary colors. Using colors which work in harmony always makes the signature look more beautiful. It also adds some personalization to the email.

People remember faces and logos more than names. Will it look too big and intrusive at the end of emails? Does it take up the whole screen when displayed on a phone? 4. Once in a while, take a step back and check the size of the signature.

No one wants to know your favourite quote at the end of your email signature, or your pet camelвЂ™s birthday. A good tool to use is Adobe Photoshop or Sketch.

If youвЂ™ve done web design for a while, youвЂ™ll know exactly what I mean. Use a good photo editing tool to design the actual signatureДonвЂ™t try and do it on the fly thinking it will work out вЂ“ it never does. There are a few things to consider when designing an email signature which will make your life easier in the long run. When creating email signatures, you really have to take yourself back to the days of eating pizzaвЂ™s in front of CRT screens while вЂњsurfingвЂќ Netscape Navigator, and then you might have a chance of getting it right. However, email clients havenвЂ™t changed much at all in terms of the way they render HTML вЂ“ and this is what makes email signatures frustrating. Whilst HTML and CSS have progressively changed over the years, web browsers have adapted to these changes. Hearing the words вЂњplease create this email signature for meвЂќ is enough to make most web designers shake with fear and profusely sweat beads, whilst thinking вЂњOh no, not this againвЂ¦вЂќ.

How to create email signature