html & email template

最新推荐文章于 2025-05-01 12:58:20 发布

转载最新推荐文章于 2025-05-01 12:58:20 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xgqfrms/p/9877194.html

文章标签：

#javascript #测试 #嵌入式 #ViewUI

本文详细介绍HTML邮件设计与开发的最佳实践，包括邮件宽度、设计简洁性、图像处理、跨平台字体选择、避免使用Flash或JavaScript等。同时，文章还提供了开发过程中的建议，如使用表格元素进行布局、简化CSS样式、内联所有CSS、使用绝对链接以及考虑移动设备的适配。

html & email template

inline style
build tools

https://templates.mailchimp.com/getting-started/html-email-basics/

HTML Email Basics

This reference assumes you’re a front-end web designer with an intermediate working knowledge of HTML and CSS. You’re comfortable coding in and using HTML tables for structure, and working in coding standards that were state-of-the-art in 1999. Feel free to crank up a little TLC or Goo Goo Dolls to get into the spirit of things.

Best Practices: Design

There are a few things to keep in mind when designing HTML email campaigns.

Emails should be 600-800 pixels maximum width. This will make them behave better within the preview-pane size provided by many clients.
Design for simplicity. Use grid-based layers and avoid complicated elements that require HTML floats or positioning.
Assume images will be initially blocked by email clients, or that certain images—background images, for example—will completely fail to load.
Don’t design an email that’s essentially one large, sliced-up image. While these kinds of emails look pretty, they perform poorly.
Use basic, cross-platform fonts such as Arial, Verdana, Georgia, and Times New Roman.
Avoid elements that require Flash or JavaScript. If you need motion in an email, a .gif is your best bet.
Don’t forget about the mobile experience! Is your email readable at arm’s length on a small screen? Will the images slow its load time on a mobile device? Are your links easy to press with a thumb?

Best Practices: Development

Much like with design, there are best practices to follow when coding HTML email.

Code all structure using the table element. For more complicated layouts, you should nest tables to build complex structures.
Use element attributes (such as cellpadding, valign, and width) to set table dimensions. This forces a box-model structure.
Keep your CSS simple. Avoid compound style declarations (IE: “font:#000 12px Arial, Helvetica, sans-serif;”), shorthand code (IE: #000 instead of #000000), CSS layout properties (IE: slot, position, clear, visibility, etc.), complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements)
Inline all CSS before sending. (Mailchimp will do this for you automatically.)
Use only absolute links for images, and host those images on a reliable server. (Mailchimp provides free image hosting.)
Don’t bother with JavaScript or Flash—those technologies are largely unsupported by email clients.
Account for mobile-friendliness, if possible. Use media queries to increase text sizes on small screens, provide thumb-sized (~46x46px) hit areas for links. Make an email responsive if the design allows for it.
Test, test, test. Create email accounts across various services, and send emails to yourself. Do this in conjunction with services such as Litmus.

https://litmus.com/