Designing for an email is still quite far off from designing for a browser. In fact, email reader standards are pretty historic in the sense that (a) it requires designers to degrade their modern coding practices and (b) there really are no true standards.
Fortunately, there are bodies in place that are working on standardizing the way emails are being rendered. But something tells me that we shouldn’t hold our breath (after all, we haven’t even fully standardized the experience within browsers yet). So in the mean time, here are some basic best practices to follow when designing for emails that will ensure your work displays as intended.
1. Go old school with your HTML
Scrap everything you’ve learned in recent years about tableless CSS structures and revert back to the HTML that your grandma grew up with (a little exagerated but it seems that long since we’ve used tables). Forget about positioning divs with CSS and rely on trusty table cells to lay out your content as many email readers will not render positioning instructions properly or at all. Be safe, be old school.
2. Use inline style tags
Most major email readers, whether they’re online, like Gmail and Hotmail, or desktop applications, like Outlook and Thunderbird, will ignore everything between the <head></head> tags, including your style definitions (whether you do it via <link> or <style></style> tags). This means you should style your HTML using inline styles. Be careful though - there are many CSS properties that will not render properly, like the aforementioned position property. A detailed report on how various major email readers performed against an Acid Test (which tests a handful of common CSS properties) can be found here.
3. Don’t rely on using background images
Using background images has become an essential tool on the designer’s belt. However, there is such an inconsistency between which browsers will actually display background images that it’s best to not rely on them. As an Outlook 2007 user, I know as a fact that no background images are displayed (this is true for Gmail as well). On the other hand, readers like AOL Webmail and Windows Live Mail (not Hotmail) will render background images correctly. Since it’s too difficult to predict what reader your audience is using, your use of background images should only be for enhancement and not as something your entire design depends on.
4. Consider your images blocked by default
For security purposes, many email readers will block images embedded in an email by default. The reader must opt-in on each email to display the images (though some may allow readers to set their preference). What this means is that you should rely on your images to communicate your message. Avoid replacing too much text with images and make sure your email design still gets the point across even when images are not displayed.
5. Use the ALT attribute for images
To avoid completely losing the message on an image when images are blocked, fill out the ALT attribute for each of your images. This ensures that the important content from the image (i.e. the text) is still passed along. This also helps in cases where the reader is using a text-only email client, as the image will be replaced by the ALT attribute.
6. Use absolute paths
This one’s a no-brainer but make sure to use absolute paths when referencing images. Relative paths (i.e. /images/my-image.jpg) will break as the email reader won’t know what the path is relative to. Your image paths should look like this instead: http://www.mywebsite.com/emails/images/my-image.jpg. This is so simple that it can often be accidentally overlooked so make sure to double check your image paths before you transition from draft to final.
7. Be considerate of file sizes
Loading up your email design with large images will slow down the download process on the reader’s end and may deter them from reading it all together. In some cases, exceptionally large emails may also be flagged for spam and viruses. To minimize these risks, optimize your images so that they have the smallest possible file size. This may require you to play around with JPG, GIF, and PNG formats to see which gives the highest image quality with the smallest file size. Where possible, use plain text to communicate your message.
8. Avoid rich media and forms
In a browser, using Flash, animated GIFs and forms add interactivity to the user experience. In an email, it bulks up the file size, raises security flags, or just doesn’t work. If there are interactive components attached to your email campaign, you are far better off linking the reader to a live site than to attempt to embed them into the email itself. It’s an extra step but at least you can be sure that your rich media and forms will work.
9. Design for smaller spaces
Just like designing for a web browser, you need to be considerate of screen resolutions and window sizes. In addition to this, email readers often have added sidebars and navigations on both sides of where your email content is displayed, further decreasing the amount of space you have to play with. Be safe and keep the width of your email design at least within 800px (we commonly use 750px).
If you’re running an email campaign and would like to learn more about best practices for email designs, speak to us. We’d love to help you.
译文:
九条设计电子邮件的最佳准则
设计电子邮件和设计网页并不是同一回事。事实上，制定电子邮件阅读机的标准是极具历史意义的。从某种角度看，因为它要求设计者降低编码练习的要求，并且并没有真正的标准。
幸运的是，有人在适当地从事电子邮件标准化的工作。但是某些事情告诫说我们不应该停滞不前（毕竟，我们目前还不能完全的将浏览者的练习标准化）。所以，在此期间，这里有一些基本的可遵循的最佳联系准则供你设计电子邮件，这些准则能确保你的工作达到你想要的标准。
1.重新学习HTML
抛弃一切你最近学的关于无根据的CSS结构的东西，重新回到你的祖母生长的HTML年代（有一点言过其实，但是自使用桌子以来已是很久了）。忘记有害的CSS辐射，依赖可信任的表格分格，并且划定你的要求，由于许多电子邮件读者一定不会正确的听从定位的建议。注意安全，成为老朋友。
2. 使用在线风格标签
许多主要的电子邮件读者，无论是否在线，像Gmail和Hotmail，或者桌面应用软件程序，像Outlook和Thunderbird，会忽略所有<head></head>标签之间的东西，包括你的风格定义（无论你使用时是否使用<link> 或者<style></style>标签）。这意味着你应该设计HTML使用在线风格。请注意：尽管许多CSS性质不会正确地恢复，像上述的定位性质。一则关于关于各种各样主要的电子邮件读者怎样违背援救测试（一个关于CSS性质评论的测试）的报告，可以在这里找到。
3. 别依赖使用背景图片
使用背景图片已经成为设计者必不缺少的工具之一了。然而，浏览器实际上展示了背景图片，这是最好的方式而不是依赖它们，所以，这很矛盾。作为Outlook 2007的使用者，我知道事实上并没有展示背景图片（Gmail就是这样）。另一方面，像AOL Webmail和Windowa Live Mail（不是Hotmail）的阅读机将会重新正确使用背景图片。由于预测读者使用的阅读机是一件困难的事情，所以您对背景图片的使用应该只是为了起到增强的作用，而不是您全部设计依赖的某些东西。
4. 注意被默认值阻挡的图片
出于安全考虑，许多电子邮件阅读机会通过设置默认值阻挡嵌入邮件中的图片。阅读机必须选择每一封邮件去展示图片（尽管有一些可能会允许阅读机选择它们的偏好）。这就意味着你应该依赖你的图片去和你的信息交流。避免用过多的图片替代正文，确保你的邮件布局在没有图片展示的情况下仍能说出论点。
5.为图片使用ALT属性
避免在图片阻挡的情况下完全丢失图片中的信息，为你的每张图片填写ALT的属性。这能确保图片的重要内容（比如正文）仍能保留下来。这也利于预防当图片将要被ALT属性替代时，阅读机正在使用电子邮件正文客户。
6. 使用准确的路径
这是一个没有大脑的人，但是可以确保参考图片时可以使用路径。当邮件阅读机不知道这个路径与什么联系时，相对应的路径（例如/images/my-image.jpg）也就不存在了。你的图片路径应该是这样而不是：http://www.mywebsite.com/emails/images/my-image.jpg。这很简单，以至于经常被偶然的忽略掉，所以请在定稿前再次确认你的图片路径。
7. 注意文件大小
在电子邮件里附注大量的图片会减慢阅读机结束的下载过程，并且阻止它们全部阅读。某些情况下，特别大量的电子邮件也可能意味着垃圾邮件和病毒。为了减少这些风险，优化你的图片，这样它们就可以尽可能的小。这也要求你可以胡弄JPG、GIF和PNG格式，看看哪一个是最高质量的图片同时又是最小的。哪里有可能，就在哪里使用纯文本与你的信息交流。
8. 避免丰富的媒体和表格
在浏览器里，使用Flash，富有生气的GIFs和表格增加了与使用者联系的相互作用。在电子邮件里，它会累积文件大小，增加安全标志，或者干脆不工作。假如你的邮件营里有互动的成分，你最好取消直播位置与阅读机的连接，这比把它们添加到邮件中要好得多。这是一个额外的步骤但是至少你可以确保你丰富的媒体和表格都起了作用。
9. 升级小空间
就像设计网页浏览器一样，你需要考虑到屏幕分辨率和窗口大小的问题。除此之外，电子邮件阅读机在邮件目录的两边经常有增加的侧边栏和阻拦框，大大减少了你可以利用的空间数量。注意安全，并且保持电子邮件布局的宽度，至少达到800px（我们一般使用750px）。
如果你正在建立电子邮件，并且想学习更多关于电子邮件设计的好建议的话，告诉我们。我们非常乐意帮助你。