Designing Quality Emails

An email marketing campaign’s success hinges not only in the quality of the email content, but also on the quality of the design and email layout. There are several key factors to consider when designing for emails, but the primary point to remember is that designing for email is not the same as designing for a web page. Email clients have unfortunately remained relatively stagnant while web pages have moved forward with their coding standards so certain HTML and CSS markups are not supported by many email service providers. Keep in mind, the growing demographic of mobile users have pushed for the need for responsive email layouts as well.

However, don’t let this deter you from moving forward! This guide will help address some of the issues that come up when designing for email.

The three main factors to consider when getting started on your designs are:

1. Simple is best. While complex, visually appealing designs are eye-catching, they are difficult to translate correctly throughout all the email clients without running into many coding issues. A complex design will also be problematic for mobile devices.
2. Code like the ‘90s.  Email service providers have limited scripting support when it comes to HTML and CSS. In turn, you’ll need to rely heavily on old-school coding styles, meaning the use of tables and inline CSS.
3. Troubleshoot. Always test your emails. Run them through troubleshooting tools like the ones provided in Email on Acid and Litmus, which allow you to preview how a design will look in most of the popular email clients.

The Design:

• Simplicity is key when designing quality emails. While the aesthetic of the email is important, the content should be the priority. With that in mind, it is ideal to have a clean, branded design without taking away from the content.
• Overall email structure should be 600px wide—this will ensure that the email will load properly in various email clients in a vertical layout.
  
  
  • Use full body background colors instead of background images, which are often not supported.
  • Avoid image-heavy email designs.
    
    
    • Too many images and not enough text content can get your email flagged as spam.
    • Many users have image-blocking, preventing them from viewing your designs. DO NOT rely on images to convey the most important information.
    • Images should be optimized with the smallest file size without decreasing the quality to avoid long load times.
    • Use JPGs or GIFs for image file type. Avoid using PNGs since they’re not supported by some email service providers.
    • Animated images (GIFS) are not always supported.
    • Use ALT tags in images.
  • Embedded Videos and any Flash built asset will not be rendered by most email clients.
  • If the text is not within a graphic, use a font-family that is web-friendly. (Times New Roman, Arial, Georgia). See this guide from MailChimp for more on email-safe fonts.

The Structure
As mentioned in the design section above, keeping your email width at 600px will ensure that it will be viewed by most email clients.

• Structure your emails in a responsive layout. This also hinges on the design so it is important to create a design with mobile devices in mind.
• Some CSS is not supported by many email clients. Refer to this guide by Campaign Monitor when coding emails.
  
  
  • If you’re making your own email template, avoid using CSS classes and external stylesheets. Use INLINE CSS for this purpose.
    
    
    • Mailchimp and Campaign Monitor offer tools to bring your CSS inline.
  • Do not use CSS shortcuts.
•  Basic HTML tables are highly recommended when designing a multi-layout email; divs are not supported by certain email clients.
  
  
  • Note: Outlook applies one pixel of table-padding to all cells so you will want to apply your desired table-padding to all tables.

The Content

Personalize your subject line.

• Put the most important content, including calls to action, above the fold (the part of the email that is visible when initially opened).
• Keep content short and relevant.
• Add links to images to increase your email’s click-through rate.
• Text should be easily readable, at 14px and up, particularly for longer newsletter-style mailings.
• Add UTM tracking to links.
• Make it easy to subscribe/unsubscribe (have these links in the header or footer).
• Subscribe/Unsubscribe, Forward to a Friend, View as webpage, and social media links should be clearly visible in the header and/or footer.
• Abide by the CAN-SPAM Compliant.

Need help with your email marketing? Contact an Ajax Union representative today!