To ensure that you are adhering to some best practices with your email template designs, please review the following best practices.
Mobile Optimization and Accommodating for Various Viewing Environments
- With mobile on the rise, be sure to test and retest your emails in many email clients and viewing environments. Alternatively, you can use an email testing software like emailonacid.com or litmus.com.
- Microsoft Outlook can exhibit some abnormalities in template rendering, so testing is the key, especially if you have a lot of business email addresses in your customer list. Outlook has many variants and utilizes many different fixes for each case.
- Yahoo.com leans left. To solve this set the table alignment at the top td element like so:
Image Sizing and Formatting
- Regarding Hero Image sizes, the best practice is to use a 1200-pixel wide JPEG (retina ready) at 50% compression. The heights can very as long as the pixel dimension is divisible by 2 or when it is scaled down it could leave a undesired white line at the bottom of the hero. Minimum width on any hero image should be 600 pixels wide.
- Regarding non-uniform product image sizes, uniform aspect ratios are extremely important to think through when designing a template that will house dynamic content. A very short image next to a tall product image can wreak havoc on layouts unless adequate room is accounted for ahead of time.
- When setting width and height on images in an email template, it is best practice to only set the width of product images. Occasionally a product image with a different aspect ratio could case squashing or stretching if both the width and heights are set.
- In some email clients a linked image could show with a blue border, which indicates the image is linked. Be sure to specify border=”0” inside the image tag to prevent the blue border from rendering in these clients.
- Occasionally when products are brought into a template, there’s a chance that a long product title may be near a shorter title. It is a best practice to allow for adequate spacing for these scenarios.
- Outlook can be problematic when it comes to nesting tables. Nesting a table within a table a handful of times will cause issues and should be avoided. Also, make sure all rows and table cells are accounted for — any missing td elements will render as a blank space.
- Although it doesn’t seem like we would still need to add "http://" to URLs these days, there are certain email clients that could cause the full link to show and potentially break the template's formatting if "http://" is not included. Be sure to always use "http://" or "https://" in all links.
- As email evolves, "web-safe fonts" become more prominent. While a lot of newer email clients allow for using these fonts, many still do not. Remember to utilize a valid font stack that will include an email-safe font for the older clients that don’t accept web-safe fonts. This will ensure wide compatibility. Currently, the standard web-safe fonts are:
- Serifs: Georgia, Palatino Linotype, Times New Roman
- Sans-Serifs: Arial, Arial Black, Comic Sans, Impact, Lucida Sans Unicode, Tahoma, Trebuchet MS, Verdana
- Monospace: Courier New, Lucida Console