Email Design and Graphics Guide

The goal in email design is to design the message so that it renders correctly and consistently across all platforms no matter what email client (software) the reader is using and it can be viewed quickly. Email messages must be mobile friendly today, since the percentage of messages read on such devices continues to increase reaching almost 50% in 2013. Think multi-screen when developing your email design strategy. As a marketer, your primary concern is having your email content delivered and read. You want them to read your information, so they should be optimized for mobile. The next step is to make sure that your mobile email to landing page/website provides a good mobile experience.

There are basically three design approaches that you can follow to design your email for multi-screen viewing:

1. The "screen-agnostic" / scalable format approach, which is a compromise between mobile and desktop large screen design.
2. The two-version approach, which is where you create two versions, one for mobile and the other for desktop large screens.
3. The responsive design, which involves more coding and uses CSS3 "@media" query tags in your emails to present different versions based on the device screen size and other variables.

Probably the best approach is the "screen-agnostic" approach when designing your message so that it is platform, screen resolution and size agnostic, so that whatever platform and email client the reader is using the message will be easily viewable and readable. It's certainly the least costly creative approach. It's also good practice to render the message in a text, as well as HTML version.

Each design approach has its advantages and disadvantages. To get more information on email marketing design, you can visit websites of email marketing and marketing automation service providers such as Silverpop, Marketo, Eloqua, SmartFocus and HubSpot.

Click to download Email Marketing Checklist

Things to remember:

• Design the email for quick viewing.
• Use basic HTML and keep it simple.
• Use pre-header text to emphasize the offer (good for viewing on hand-held devices before images are enabled).
• Stick to fewer than 3 typefaces.
• Keep the main message and call-to-action above the fold.
• Keep your email 500-650 pixel wide.
• Put your logo in the upper left-hand side of the email.
• Use auto-responders for Opt-Ins.
• Closely tie the email to a landing page.
• Include link to privacy policy in message footer.
• Conduct the 5-second test (if they can't tell what your call-to-action is in 5 seconds or less, you lose.)