Email Design 101
Email Design 101
- Emails should be designed in Photoshop at 72 dpi using RGB color mode. This allows for easy imaging slicing and web output.
- The ideal width for an email is 600px wide, to ensure that your emails don’t get cut off on the sides. Unless the email is responsive, width should be no wider than 800px.
- Use Universal Web Fonts in the body text of the email. If you would like to use a unique font, such as a Google font, make sure a second option is selected (Mailchimp provides an excellent outline for compatible typography).
- Background images are not compatible with most email clients so try not to layer your images. If you are going to input a background image, keep in mind that a solid color will have to be selected to appear when the background image does not render. (Complete CSS support guidelines can be found on Campaign Monitor’s website)
- Text will render best if coded directly in the email, rather than saved as an image and rendered in the email. To avoid having text embed in the image, do not place text over any background elements such as images, or across design elements, such as over a previous section of text.
- Design with no images in mind. Make sure that if the recipient blocks images in their inbox, you still are getting your message across in a compelling way, to encourage them to hit the “display images” button, or still retain the ‘take away’ of your email.
A Note on Mobile Design
If you want your email to be mobile friendly, there are a few things you should know.
- Your email will be viewable on a very limited number of devises (check out Litmus’ complete list of compatible devises) if using media queries.
- Mobile and responsive emails can be built using two different methods of coding. A html email developer will often select one or the other depending upon the design. If the design uses basic elements without stringent design elements, columns, or ridge tables, a Fluid method can be used to build the email. While more simple in overall appearance, the Fluid coding method is universally compatible with mail applications.
- Design your email mobile-first, and modify to work in a larger format.
- Keep your design clean, simple, and straightforward for optimal user experience.
- Unless overridden, mobile text will default to 13px in size on mobile phones. To save time in the coding process and improve visibility of your text overall, use 13px as your minimum text size.
- Use a trusted email client such as Mailchimp, Constant Contact, or Campaign Monitor to deliver your emails. These platforms help you stay compliant with SPAM laws, improve deliverability rates, and have MIME capabilities, which means that you can send both an HTML version of your email and a text version that is conditionally sent only if the recipient prefers simple text emails. They also help you organize your contacts, automatically track email engagement, archive campaigns, and a slew of other benefits!
- Even the best built emails run into trouble with individual inbox preferences. Include a back up option to view the email in their browser.
Before you go…
Here are a few quick tips for email marketing campaign success.
- Track your engagement (opens and # of clicks is a good place to start).
- Make your Call to Action prominent and clear.
Email Marketing 2.0
While not for beginners, these next level tactics will take your email marketing to the next level.
- Segment your recipients to tailor your email’s content to your audience.
- Use merge tags to personalize your emails.
- Add animation and video to your email with the guidance of a professional. Animated gifs and dynamic content can go a long way in increasing engagement.
- Use a marketing automation software and a marketing agency who can help you set up strategic campaigns (such as Three Summers Creative) to maximize your marketing efforts, track your campaign success, nurture your leads, and measure growth!