HTML邮件在Yahoo,Hotmail和Gmail中看起来与众不同

时间:2012-09-05 08:01:07

标签: html css

我正在发送HTML电子邮件,但我的电子邮件在不同的电子邮件客户端上看起来有所不同,例如 Yahoo Hotmail Gmail 。我使用<style>标签对移动设备使用媒体查询,然后使用该样式表使用Yahoo和Hotmail。

5 个答案:

答案 0 :(得分:1)

电子邮件客户端都以不同方式处理CSS - 它们支持不同的属性,有时显然不允许某些属性。它比网页浏览器的样式要难得多。

以下是一些用于创建电子邮件设计的资源:

Guide to using CSS in HTML emails

Table of CSS support in different email clients(来自@ donald123的回答)

HTML email template builder(来自@ cassi.lup的回答)

Guide to optimising CSS in emails for mobile devices

Mailchimps email templates(来自@ cassi.lup的回答)

答案 1 :(得分:1)

请记住,HTML电子邮件的CSS必须简单,并非所有客户都了解所有css样式: - (

例如,使用表格进行布局在html电子邮件中是一个很好的ID ...

尝试在google中搜索最好的html电子邮件脚本编写方式。您可以在这里找到关于主要客户对CSS样式的理解的简短概述

understanding of css styles in major clients can you find here

答案 2 :(得分:1)

您有两个选择:

  1. 从格式正确的模板开始,然后从那里开始设计。 这个问题非常有用的资源是this service。但请记住,你在CSS技巧方面非常有限。
  2. 根据图片构建html格式的电子邮件。然后,您肯定会在所有浏览器上保持一致性,因为您使用的设计元素将被类似地解释。
  3. 另一个有用的资源:http://mailchimp.com/resources/html-email-templates/

答案 3 :(得分:0)

您可以通过此site

更好地了解电子邮件样式

答案 4 :(得分:0)

personaly我总是创建一个没有doctype的html fiel。 然后只需打开和关闭html,head和body的标签。 然后只使用表格,只使用内联样式表。 另外,不要忘记删除表格边框,细胞填充和边距,因为在我的经验中,它们可能是一个巨大的痛苦。

要填充空间使用表格单元格而不使用填充或边距,因为某些电子邮件客户端会忽略这些内容。

最重要的是!不要使用背景。 尽量不要使用许多图像。 将它们用于页眉,页脚或例如产品图片。

希望对语法有帮助和抱歉;)