Email Design Best Practices
Learn Email Design Best Practices.
Layout
- Single Column: a single column design is best practice for most emails and is much easier to optimize for mobile devices.
- Hierarchy: the reader should be able to scan your email quickly using a logical hierarchy with large headlines and images focusing the attention on what they should check out first and where they should go from there. .
- Dimensions: keep the maximum width of your email between 600px - 800px.
- Images & Text: stick to a 60:40 0r 70:30 image to text ratio.
- Size: keep your email size under 100 kb unless you’re including GIFs.
Text
- Fonts: use email friendly fonts in minimum size 12-14 fonts such as Arial, Georgia and Times New Roman. Stick to one font throughout your creative.
- Headings & Subheadings: this will help to divide your email into sections and makes it easier for the consumer to scan it quickly.
- Color: avoid using red or white in your creative. Red text often triggers spam while white can lead to hidden text.
- Length: keep your emails under 500 characters
- Consistency: try not to stray too far from the content and design that your audience already associates with your brand, logo and/or social media channels.
Images
- Dimensions: to keep your image crisp on high-resolution displays, be sure to make it 2x the size of your email (i.e. if your email width is 600px, your image should be 1200px) and use the image attributes and CSS to keep the image the width you want.
- Alt Text: add in helpful alt text in case your image doesn’t load or breaks during the sending process. This way, consumers can still read your text even if your image doesn’t load.
- Complement the Email: your image should add to the email and messaging and not be the messaging. A way to test this is to view your email with images turned off and make sure that your message is still clear.
- Stock Images: if using stock imagery, make sure the images are on brand and genuine. A better alternative is to create specific imagery for your email campaign in lieu of using stock photography. If you absolutely must use stock photos, source them from paid sites reputable free sites.
Video & GIFs
- Autoplay: many email providers such as Gmail, Outlook and Thunderbird don’t support autoplay videos inside an email.
- Embedding: over half of email providers support HTML5 which allows you to embed the video in your email creative. Alternatively, many ESPs enable you to have a static image with a play button than links to the hosted versions of the video.
- Thumbnail: when including a video or GIF, add a video thumbnail with a play button or a GIF teaser of the video to generate more clicks.
- Video Alternative: animated GIFs are a great alternative to video if you add moving content to your emails.
- GIF Size: to keep your GIF file size as small as possible, only animate what you need to animate. Keep it short and don’t use every color in the book.
