HTML Email Design Best Practices

Posted in email-marketing

Too many email designs end up in the junk pile. Don’t let your email newsletter get thrown into the junk box.

As a follow-up to our slideshare on HTML email design, here are more tips for HTML email designers looking to optimize their email marketing campaigns. Below is a helpful checklist of items for email marketing designers and developers. This list will help you avoid the junk box and spam filters with best practices for good email design.

Tables For Layout

If your email HTML contains a lot of CSS layout, in-line CSS, divs, spans, etc. try converting as much of the design to plain old HTML tables. Using tables exclusively will help display your design correctly and improve the total delivered emails to the in box. Watch out for spaces and weird characters in your emails. Any additional space or character could cause design headaches. You can nest your HTML tables but beware of too many nested tables. One wrong character or error can take lots of time to debug. Generally, your email layout should never exceed 600 pixels wide. If this is the first time you’re building a template, make sure you test your email layout on a tool like Litmus.

Image Size

If your email is full of images and slices totaling more than 300-500 KB, try to reduce your total by using more HTML formatting. Crunching down images will improve your chances of getting past spam filters. Using Photoshop, generate GIFs at 64 colors or JPEGs at 50-60 quality will help reduce your image size. To get your image file size down without distorting the quality, try compression tools like Tinypng or Optimizilla which also has fancy bulk uploading features.

Copy Check

Does your email contain phrases or misspellings or other text characters that may flag it as spam? Many email marketing platforms will perform a spam check as part of their delivery service. Use these tools to your advantage. MailChimp, ConstantContact, and others all have their email testing tools. These tools are not 100% foolproof, but should give you a head start on where to fix.

If your marketing team sends you copy, don’t just copy/paste blindly into your email template. Keep an eye out for ALL CAPS, exclamation points, red text or any other tactics commonly used by spammers to get people’s attention. Most of these tactics are very outdated but still used. Don’t let these simple mistakes get your emails dashed to the junk pile.

Image ALT Text

Does your email contain descriptive ALT text for things like image headers and buttons? These are the main call-to-action on an email. Don’t forget to optimize your email for a good user experience. Image headings can take up a large section of your email. This is prime space for descriptive ALT text for when images fail to load or load slowly. Keep in mind that some corporate email servers prevent images from displaying, flag emails with images, or have strict rules about images or any email attachments. Having a well optimized text version of your email as well as an optimized HTML version is key to getting opened.

Additional Resources

Interested in learning more about email design? Check out these excellent online resources.

2017 SMB Email Survey
Really good email design checklist

photo credit: Charles Henry (assets) Eight Car Pile Up (license)