Design Tips

1.    Use Photoshop 
We recommend creating the artwork that will be used for your templates in Photoshop in RGB color mode at 72 DPI. Your design should be a maximum width of 650 pixels. Use layers to hold various elements, and ensure that all text is selectable. When preparing a print piece, you package the files and provide them to the printer to produce. But when designing for email, you will provide this artwork file to a programmer who will then code the design for digital use.

2.    Use “email safe” fonts
Only a small subset of fonts are designated to be “email safe”. This is because since 1998 the vast majority of computers (both PC and Mac) have shared a small common set of installed fonts. Content created using these fonts is guaranteed to appear correctly on virtually every email client and device. But if we create templates that call for other fonts, the content will not appear consistently across all devices. Compared to the vast array of fonts that can be used on the web, this set may appear limiting, but using these fonts will help ensure your design appears as intended. 

3.    Consider the audience – and the gatekeeper
Even with preview panes, the “fold” is still relevant in emails, so you will want to pay special attention to the first 300-500 pixels at the top of the design, most importantly the upper left where recipients generally look first. Also keep in mind that many recipients will view your emails with images disabled, so the design will still need to communicate the key information that can be used to entice the recipient to interact with the email even without images or photos. Junk and spam filters do not like emails composed of a single image, so always include at least some actual text within the design (some stylized text that will need to be uploaded as an image is okay, as long as there is also some body text that can be coded into the design as actual text).

4.    Accept that email rendering will not be precise
When preparing a print piece, you can almost guarantee how the resulting artwork will appear. However unfortunately when designing emails, this is not possible. The HTML code used to create emails renders differently on different operating systems, different devices, and in different email clients. This means elements will shift around for different recipients, and the amount of space that any given element of text takes up will vary due to differences in line height and font size rendering. When aligning images and text, due to the fact that emails are coded using tables it is generally easier to aim for horizontal alignment and accept that vertically things may shift slightly.

5.    Keep it simple 
Get to the point quickly – it should be immediately clear to recipients what you want them to do, why they should do it, and what they will get out of it. Calls to action should be descriptive, with positive action verbs like View, Visit, Download, Get, Learn, etc. Pick a primary call to action and use it in a couple of places.

6.    Less is more 
With the tendency of recipients to skim or even skip large paragraphs of text, large chunks of text are often not the most effective way to reach your audience. Use bullets, break long copy into paragraphs of 1-2 sentences each, and use action-oriented subheadings. Since your email is only a single click from the web, we always recommend using email as a teaser with the main objective of getting the recipient’s attention to click through to your website or landing page where they can learn more (and you can offer them more). Complicated layouts and structures do not work well in email because it is often difficult or impossible to have the design render consistently. A simple single column or 2-column layout will work best, or even combining 2-column sections with full-width sections can create an effective and dynamic layout.

7.    Increasing importance of mobile
As more and more recipients view their emails on mobile devices, responsive design continues to be important. Keep in mind these mobile-friendly guidelines: 

  • Simple layouts
    • Single columns 500-600 pixels wide work best
    • 2-column layouts can also work, but content will be converted to a single column in the mobile layout
  • Think thumbs – go big!
    • Use large, easy to read text. Body text should be a minimum of 12pt font with headings starting at 16pt (based on our new editor's font sizes). Do not include any text smaller than 10pt.
    • Allow buttons to have a target area of at least 44 pixels square
    • Use full-width graphics
  • Mobile friendly layouts
    • Use contrasting colors to ensure readability
    • Place links and buttons on the left side or centered
    • Maintain a good amount of clear space between links and buttons so they can be easily tapped