To be successful, email designs must constantly evolve to meet the shifting needs and behaviors of consumers and adjust to email platform changes.
Best practices are always changing, so Responsys has assembled the following list of 2011 design and coding recommendations to help ensure that your HTML emails optimize the user experience and response, perform well on mobile devices, render properly in the widest array of email clients, and achieve higher inbox deliverability rates.
Click through for seven email optimization best practices from Responsys.
Because of the prevalence of image blocking and growing use of mobile devices to read emails, Responsys highly recommends including preheader text. Preheader text should be HTML text that appears at the top of the email above the header/logo. Ideally, preheader should be no longer than two lines.
- Include a preheader message that summarizes the main call-to-action of the email or builds on the subject line. The preheader message should link or include a link to the same landing page as the main call-to-action.
- Include a “view with images” link so subscribers can view a Web-hosted version of the email.
- Depending on the percentage of your subscriber base that reads your emails on a mobile device, also consider including a “view on mobile” link so subscribers can view a simplified, largely text version of your email.
- With the exception of emails in your welcome series and other onboarding situations, Responsys does not recommend including “add to address book” requests in preheader text.
The header area of your email immediately follows the preheader.
- Place your logo on the left side of your header. It’s important for branding and for recognition of your emails.
- Reponsys highly recommends including a navigation bar that features the top five to six links in your website navigation bar. The nav bar should be positioned directly under or to the right of your logo. Consider periodically changing the links included in your nav bar and their order to maximize relevancy throughout the year.
- Use HTML text for your navigation bar links, if possible.
Most email users read their email in preview panes, which limits the amount of the email that can be seen. Although the size of preview panes varies, Responsys considers the first 300 pixels of an email relevant when designing for preview pane optimization. This is critical real estate because subscribers often look at what’s in this space before deciding to engage further with an email.
- Be mindful of the height of your preheader, header and navigation bar, if you use one. While all of those elements are important, they allow less of your body copy to appear in the preview pane.
- Include your headline and primary call-to-action in the preview pane, if possible.
- If your emails are long and you include a table of contents, place at least a portion of it in the preview pane.
The body copy follows the header and navigation bar and contains your primary message, as well as any submessages.
- Responsys recommends a single column format because it is easier to scan. If you use a sidebar, place it on the right-hand side of your design.
- Use headlines that stand out and communicate your message clearly.
- Use bullets to convey benefits, product features, and other important info quickly.
- Avoid blocks of text that are more than five lines long.
- Ensure readability by avoiding font sizes under 9-point, extensive reverse type (white text on a black background) and running text across images with significant color variations.
- Use HTML text when possible.
- Responsys recommends using buttons for primary calls-to-action and text links for secondary calls-to-action.
- Product grids should be no more than four units wide, with two or three being ideal in most cases.
Recovery modules are optional content blocks that appear at the bottom of your body copy. They consist of lots of links to different product categories, clearance items, articles, or whatever makes sense for your business. If a subscriber has scrolled down through your email and hasn’t found anything of interest, think of the recovery module as your last ditch attempt to spark the subscriber’s interest.
Forward-to-a-friend (FTAF) functionality allows subscribers to forward your email along to friends and family members. Share-with-your-network (SWYN) functionality lets subscribers share your email — or portions of it — with their friends and family members on Facebook, Twitter and other social networks. And community links direct subscribers to your Facebook page, Twitter stream and other social media pages.
- The optimal placement of FTAF, SWYN and community links varies across brands, so Responsys recommends testing it.
- Consider using FTAF and SWYN links as secondary calls-to-action within the body copy, particularly when you have really compelling offers or content. Using URL-based status updates for Twitter while also using link sharing on Facebook (allowing the landing page meta data to fill in the appropriate title, caption, and thumbnail for the status post) helps customers to share only the content they want to share instead of an entire email.
- Leverage the brand equity of Facebook, Twitter and other social networks’ icons and buttons by using them in your SWYN and community calls-to-action.
- Differentiate SWYN and community links. Preface SWYN links with “Share on:” and community links with “Join us:” or something similar. Consider placing your FTAF and SWYN links next to each other, since they’re both used for sharing email content.
- Consider grouping your community links with your mobile app, SMS subscription, blog, and RSS subscription links.
The footer is the HTML text that appears after the body copy.
- Include disclaimers for promotions or special offers promoted in the email.
- Include an unsubscribe link. Use a subhead, bold text or a different color to make this link easy to find to prevent spam complaints. If you have included an “unsubscribe” link in your preheader or header, Responsys recommends also having one in the footer as that’s where email users have been trained to look for it.
- Include other administrative links such as those to update preferences, change email address, and subscribe (for those who receive the email as a forward). These links should appear before the “unsubscribe” link to prevent folks who would like to change their email address from unsubscribing and then re-subscribing, for instance.
- For your links to unsubscribe, update preferences and take care of other administrative needs, avoid using “click here” or similar language as the call-to-action. Use descriptive link language.
- Consider placing an “add to address book” call-to-action in the footer.
- Include your mailing address (street address or P.O. Box).
