<html>
还是<body>
开始的?有没有标准可供参考?我可以使用诸如border-radius、背景渐变等样式进行设计,这些属性对于不支持它们的浏览器(如IE)有自然的回退机制。对于IE,我使用PIE.htc插件,但我想知道是否这样做已经越界了。
<html>
还是<body>
开始的?有没有标准可供参考?<html>
标签中,因为这似乎可以使电子邮件在许多电子邮件过滤器中更加“有效”。最近我在一本杂志上读到了这样的话:“像1996年那样编写代码”。
尝试编写优雅高效的代码似乎不能保证在多个邮件客户端中测试时始终返回一致的结果。在测试时,请确保让您的测试人员转发消息,因为有时候精美的代码会在转发时出现问题。
虽然我不喜欢使用表格来显示内容,但是它们在邮件客户端中的呈现效果要比浮动或多列DIV更加一致(特别是如果新闻通讯等被原始接收者转发给其他人时)。
另请参阅:http://www.netmag.co.uk/zine/discover-culture/create-the-perfect-newsletter
哈喽,1996年!!
我可能可以谈一下电子邮件编码的注意事项,但如果你考虑了几个基本原则,你就会比大多数人知道得更多。
gmail(以及MS Outlook)是最难编码的两个电子邮件客户端,但是可以开发具有高设计水平的响应式电子邮件,这样在各种客户端上都可以很好地显示。在Gmail上,它只会显示您的桌面布局而没有响应性。
当您开始编写电子邮件时,应尽量少或不使用CSS。采用“桌面优先”的方法,将其编码为简单的形式,就像您希望在600像素宽度下查看时那样。我不在乎人们是否说它在电子邮件中起作用,如果有更过时的方法能够实现相同的功能,则更过时的方法总是与电子邮件客户端更兼容。
请忘记通常使用的css和html。你应该尝试将标签限制为仅限xhtml1.0有效的标签。实际上,您可以使用有限的标签调色板进行很多布局,只是需要想到更加迂回的方式。
举个非常简单的例子:
与其使用填充、边距或透明图像间隔符来实现CTA按钮内的垂直间距,您可以使用一个嵌套一层表格、xhtml有效属性标签和零CSS,在填充的色彩按钮中实现垂直居中的标签和彩色文本。
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#00cc66" width="200">
<tr>
<td><table border="0" cellpadding="6" cellspacing="0"><tr><td></td></tr></table></td>
</tr>
<tr>
<td align="center"><font color="#ffffff"><b>Click Here</b></font></td>
</tr>
<tr>
<td><table border="0" cellpadding="6" cellspacing="0"><tr><td></td></tr></table></td>
</tr>
</table>
编写不带 CSS 样式的电子邮件,并使其看起来好看。
此时,您的字母表应该只包括以下内容:
html、body、table、tbody、tr、td、span、a、b、nobr、src、alt、target、cellpadding、cellspacing、border、align、bgcolor、color、height以及这些标签中的字母数字内容。
您可能会想使用 valign、style、background、class 等……不要这样做,至少现在不要
如果您想实现最高的跨客户端兼容性,请接受一些客户端将以这种方式查看它,因此您需要尽可能地使其干净和整洁。
.mobile {display:none;}
@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
*[class="desktop"]{display:none !important;}
*[class="mobile"]{display:block !important;width:auto !important;max-height:none !important;overflow:visible !important;float:none !important;}
使用这4行代码,您几乎可以完成所有响应式结构。
**注意:使用桌面类需要额外的努力。
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr style="mso-display:none;">
<td align="center" class="mobile" style="width:0;max-height:0;overflow:hidden;float:left;mso-display:none;">
<a href="" target="_blank">
<img class="banner" alt="o" src="logo-wide.gif" border="0" width="0">
</a>
</td>
</tr>
</table>
如果您需要一个示例或模板,请使用我在编写2年并每周发送2+封电子邮件的过程中创建的模板。我可以几乎保证它将是您能找到的最跨客户端/设备兼容的营销电子邮件示例。随意复制、修改,任何您喜欢的方式。
我需要使用内联CSS吗?
是的,
我可以在HTML中包含样式表吗?
可以,因为大多数网络邮件解析器只解析BODY的内容,所以需要HEAD和BODY标签。
HTML应该以<html>
还是<body>
开头?
HTML以DOCTYPE声明开头。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
这是我最喜欢的,因为你可以利用FONT元素。(在A元素中有用于样式稳定链接颜色)
就电子邮件客户端而言,电子邮件中的HTML从<body>
开始。所有样式都必须内联完成,不幸的是,电子邮件客户端的行为与浏览器不同。这里有一些很好的信息可在此处找到:
<html>
标签包装我的HTML电子邮件。” - Ender