Five HTML E-mail Design Tips, Part 2
HTML e-mail designers face a number of challenges when it comes to renderability across multiple e-mail programs. But there are a number of tips you can follow to avoid rendering issues in the major e-mail programs.
In Part 2 of this two-part series, we explain how designing for the preview pane and testing e-mail messages can avoid rendering issues in e-mail programs.
(To view Part 1, in which Matt and Brent discuss how sticking to basic HTML and following best practices for images and content can help avoid rendering issues in e-mail programs, click here.)
4. Design for the preview pane. Remember that most of your recipients will first read your message in the preview pane, or the window in an e-mail program that lets the user preview an e-mail message without actually clicking or opening the message, so design accordingly.
Branding, important messaging and calls-to-action should be visible above the fold, or within the top 300 pixels, so recipients don’t have to scroll to see the offer.
Keep e-mails to a maximum width of 600 pixels and a maximum size of 40k. This width might seem small, but considering that the overwhelming majority of your recipients will use the preview pane to determine whether or not to open your message, you should size it so it can be read without scrolling horizontally.
5. Test the message. Most formatting issues can be fixed before the message is deployed, so it is imperative that you run a number of tests prior to deploying the message.
Set up e-mail addresses at the major ISPs and e-mail a test version of the message to yourself. Or, use a third party to perform these tests for you. This will expose a large percentage of the issues in advance.