When designing an email creative, it can be a headache with more than 50 different email clients that your subscribers could be using, not to mention their multiple ways of viewing emails. This makes ensuring that your email renders the way you’ve intended nearly impossible. We don’t have all of the answers, but below are several tips that are sure to help any email designer get close to perfection: Overall design Keep email width under 650 pixels. This is a general rule as the preview pane for many email clients doesn’t get much wider than that. Design above the fold. It’s okay for an email to scroll. It’s not okay for a recipient to need to scroll. Place key elements at the top, above the fold. By top, the first 300 pixels are a good safe bet. The key aspects of the email include logo, call-to-action, navigation, primary subject matter, etc. (See Anatomy of an Email webinar for more details.) Keep it short. Don’t overload your email with content. Use the email as a tool to drive recipients to your website or landing page. Some people prefer to read large amounts of text in a web browser as opposed to their inbox. Give them a taste – a teaser – followed by a “Read More†type call-to-action. This will also give you a sense of what your readers are looking for when they follow through to your website and the content. Keep it simple. Don’t try and design a complex HTML masterpiece and expect everyone to see it the way you hope they will. The more difficult your email is to code, the more difficult it will be to see across the many email clients. HTML Do’s and Don’ts (Mostly Don’ts) Hand-coded (simple) emails are best. Many simple HTML editors often insert a ton of extra code that makes most email clients choke and cause your email to display poorly. Avoid the “Save as Webpage†feature of Microsoft Word. Dreamweaver is usually okay, but having a working knowledge of HTML allows you to check for code that shouldn’t be there. Kompozer is a free alternative to Dreamweaver and is available for PC and Mac platforms. Use tables. In the email world, designing with tables is one of the foolproof ways to ensure your email will render correctly across all email browsers. Avoid Javascript and/or other dynamic scripts. Even if a spam filter happens to let your email through untouched, most email clients will not allow these scripts to function. No need to get fancy; just avoid them. Avoid excessive Cascading Style Sheets (CSS). Many email clients strip out CSS or over-write it. The use of CSS is acceptable in email, but there are many strict guidelines you need to follow. Simple attributes like text style, color, and sizing are usually okay and acceptable across the majority of email clients. When you start defining spacing, margin, and other positional elements with CSS you will run into problems. Always use inline styles. Do not attach style sheets or define all of your attributes in the <head> section on your HTML. For an in-depth look at what works and what doesn’t in regards to CSS, email, and the various browsers, visit The Email Standards Project. Avoid nested tables. A lot of times they are unavoidable, but we recommend using them sparingly. Some email clients, Lotus Notes and Netscape Messenger in particular, may not render them correctly. Avoid complex colspans and rowspans. Some email clients will choke on these and they can make content revisions a nightmare for the next edition. Use them sparingly. No body attributes. Most applications strip out everything that’s not in between the body tags. So if you want to make a background green, do it with a stretch table background. Don’t embed images. Host images on your website or let your email service provider host them for you. Then make sure your image paths point to the full URL: (i.e. http://www.yourwebsite.com/yourimage.jpg). Avoid 1×1 pixel spacers. Some spammers use them and they may get your email flagged. Images Don't be this guy... Don’t use images for important content such as headlines, links, or calls-to-action. Or if you do, make sure there is an HTML backup. Chances are images may be turned off making the key elements of your email useless. Use alt text for your images. Also, don’t hesitate to use the alt text to say something compelling about the subject matter like “see this motorcycle in action.†Use image widths & heights. Defining these attributes help to maintain the basic structure of your email when images are turned off. Optimize image sizes. Make sure your image file sizes are as small as you can get them without losing their visual integrity. Large images should be cut up into smaller, more downloadable sizes. This helps to reduce download times. Avoid background images. This one is pretty simple. Many email clients will not render background images at all. Text Content Include an even balance of images and text. If an email campaign is sent as one image and the user has images turned off, they won’t see your message at all. It also increases the risk of being marked as spam. Avoid gimmicky words. Phrases like “Act Now†or “Special Clearance†or even “Click here†sometimes trigger spam filters. If you need to use them, try putting them in a graphic. Avoid invisible text. This is another trick spammers use and is often a red flag for spam filters. Make it compelling. A no-brainer, but often overlooked. The more compelling your text is the greater the likelihood that your recipient will be less likely to hit the delete button, and more likely to click your call-to-action. source: whatcounts :santaclaus:
