News! SmartSender.io becomes Wooxy. Read a post from the CEO Arrow
Back to blog
Hayk Hayrapetyan avatar
Hayk Hayrapetyan
October 10, 2018
48-Design-Requirements-for-Email-Templates

Design Requirements for Email Templates. What do ESP want?

“A designer knows he has achieved perfection not when there is nothing else to add, but when there is nothing else to take away.”- Antoine de Saint-Exupéry

In perfect world your email would look the same no matter in what mailbox your opening it: Gmail, Yahoo, Outlook or Hotmail. In reality, however, your specific email template may display entirely differently in each of those email clients.

Furthermore, email service providers themselves often change their parameters and rules, and what you’re reading today may be entirely outdated next year. Wooxy.com email specialists have collected below some design tips and tricks that haven’t been changing for years now.

Golden Rule: Specific email service providers will overwrite your html and style commands with their own. You may avoid tones of tears and grief if you simply accept that your email may not display using your exact desired methods in certain email clients. You will lose in the battle for your specific branded design elements!

  1. Decide which ESP (Email Service Providers) are the most important for your email marketing. Always test your specific templates for each provider (providers) and make compromising changes before sending. In some cases you should even segment your list by email service providers. It will allow you to decide on e.g. subject line length or number of images in the body.
  2. Assign Width in Each Table Cell. Most email clients respond well to tables built with html to format your email. Using tables much more preferable, because Gmail and certain versions of Outlook don’t support html commands like float, margin, and padding. Wooxy Drag & Drop template builder provides preassigned table boxes, which work the best for the most Big ESP.
  3. Using CSS in an html Email Template is NOT the Best Idea. CSS is a reliable and efficient tool for designing web pages, an html email template isn’t a web page. Such email clients as Gmail will overwrite your CSS with their own formatting.
  4. Avoid Light Fonts on Dark Backgrounds. A dark-colored background with a light font may work great on landing pages and web pages. However, some ESP may display your html email template as a white background with white text or a dark background with black text. With email templates, it’s always safer to err on the side of “somewhat more boring” but most likely to display correctly across all email clients.
  5. No Spacer Images. It’s common to design a web page using spacer images. Whereas in most email clients images do not load, you may be creating either a broken display or a display that appears to users as a high number of unloaded images.
  6. Image Dimensions: Always assign height and width dimensions to your image. If the image doesn’t load then at least your email format and layout will hold.
  7. Don’t Use a Background Image! 
    Unfortunately the vast majority of email clients don’t load images; therefore it’s in your best interest not to design around including them.
Hayk Hayrapetyan avatar
Hayk Hayrapetyan

Hayk Hayrapetyan, the founder and CEO of Wooxy, shares his insights and expertise on a variety of topics. With a wealth of experience and a clear vision, Hayk provides valuable guidance on marketing strategies, operating a successful bootstrapped startup, team management, and product management.

Categories