News.

The Ultimate Guide to Designing and Developing HTML Email Signatures.

Email signatures are a crucial part of any professional email communication. However, designing and developing an HTML email signature can be challenging due to the variances in technology and email clients. Each email client does things a little differently, which can make it confusing to create a signature that works seamlessly across all platforms.

This comprehensive guide will answer all your frequently asked questions when it comes to designing and developing HTML email signatures. At WGNR, we’ll cover everything from the best width size to use, what resolution or dpi your image should be saved at, what file type to use, font size recommendations, and even how HTML tables work.

Key Considerations in HTML Email Signature Design.

What is the Best Width Size for an Email Signature?

The standard width for developing any kind of HTML email was 600px, but it’s not as simple as it used to be for a few reasons: 

 

Big Monitors: Today’s desktops come in many sizes, and people don’t keep their windows full screen anymore. They can expand and shrink their windows at will. This means you have no idea how much room will actually be left to view your email.

 

Mobile: According to Litmus, 42% of email opens are now on a mobile device. These devices are typically held in portrait mode and tend to render emails at around 400 pixels, but the actual width can vary greatly. Many mobile email clients will scale email signatures down to their screen size.

Because of this, we recommend using an email signature width of up to 600 pixels but preferably something below 320 pixels wide.

What Resolution or DPI Should My Image Be Saved at for an Email Signature?

If you work with an agency and you have materials that need to be printed, the agency might outsource them to a printing partner. They would, in turn, mark up that service between 10% and 20% to cover their role in vetting, organizing, and managing the vendor.

What Size Should a Banner Be in an Email Signature?

For banners, we recommend displaying them at or below 600px but possibly sized a little larger for quality, maybe around 900px. Remember that once you get to mobile, the banner will be scaled down to fit within the window it is given, so it may not be necessary to save it out at double the resolution.

laptop,on,table,with,loading,bar,load,waiting,on,digital

What File Size Can an Image Be in an Email Signature?

We recommend keeping your image file sizes below 30kb with a total signature file size below 150kb. Having to download a huge image file every time you view someone’s email can be annoying, slows down their email client, and restricts them from doing what they need to do.

What Image File Type Should I Use in an Email Signature?

New web image file types like SVGs and WebPs are not going to work in most email clients, so don’t even bother trying to use them! Instead, choose wisely between JPGs, GIFs, and possibly PNGs.

 

  • JPGs are the standard image file type to use on the web and in email signatures. They are good for photos and often compress to be relatively small in file size. Just watch out for your compression settings because at times, you can notice a degradation of quality. If you are saving out a logo, you may want to try out another image type.
  • GIFs are the long-forgotten image file type of the web. These types of images are great candidates for logos because logos have a set number of colors, usually 1-4. A GIF logo vs. a JPG logo may be smaller in file size and higher quality.
  • PNGs may not be supported in older email clients like Lotus Notes 6.5 and 7.0 as well as Outlook versions prior to 2007. That said, you may be willing to sacrifice support on those older email clients because of your audience and if dark mode support is important to you, PNG’s may be a nice way to solve that problem with their beautiful transparency. Watch your image size with these!”

What font size should I use in an email signature?

We would recommend 11px – 13px font size for an email signature. 

 

An email signature is meant to be a sign off, a conclusion to an email conversation, so it should balance being practical and readable without being annoying and overbearing. Many people use a default size of 12px – 14px on their email client depending on their preferences. Staying right around that size or even a tiny bit smaller can be a good thing.

Is there a limit to how many characters an email signature can be?

Yes, some email clients limit a signature by number of characters or even by file size. I recommend keeping it under 5,000 characters if possible. 

 

Gmail will limit your email signature to 10,000 characters, this includes the html characters as well! The easiest way to stay under these limitations is to not include long paragraphs of legal disclaimers within your email signature which can end up being thousands of characters long.

 

Other email clients that have even shorter limits include Outlook.com, Office 365, and AOL Mail.

  • GMail: Limit of 10,000 Characters
  • Yahoo.com: Limit of 10,000 Characters
  • Outlook.com: Limit of 5,000 Characters

Would you like to work with us?

Let’s discuss your current goals and objectives and discover how to best support your needs.

All SEO work plans include.

  • Website auditing
  • Title tag optimization
  • Meta tags optimization
  • Heading tags optimization
  • Content optimization
  • SEO friendly URL setup
  • Image optimization
  • Fixing front-end and hosting server errors
  • Custom 404 error page setup and optimization
  • Management of temporary and permanent redirection
  • Fix broken internal and outbound links
  • Find and fix HTTP links on HTTPS pages
  • Creation, optimization, and registrations of sitemap.xml
  • Creation and optimization of robots.txt and Googlebot crawls
  • Google Search Console setup configuration, and management
  • Google analytics setup and management
  • Fix HTTPS status issues
  • Mobile site optimization (if applicable)
  • Find and fix orphaned webpages
  • Backlink analysis and disavow entries (one-time in first month)
  • Monthly SEO progress report