email电子邮件入门


备注

HTML电子邮件是使用HTML和CSS的子集来使用颜色,图形,表格列和链接来格式化网页之类的电子邮件。


有用的链接:

编码所有电子邮件客户端的电子邮件

使用的编码方法:Hybrid / Spongy

div不能在电子邮件中使用,这一直是一个神话。有一些电子邮件客户端(不像outlook)可以正确地渲染div。下面的示例将说明如何编码可以在Gmail应用程序(尚未推出更新),三星设备和其他不读取媒体查询的电子邮件客户端上运行的电子邮件。

介绍Outlook条件语句

Outlook条件语句在呈现电子邮件或显示特定内容(如Outlook的后退)时非常有用。

<!--[if (gte mso 9)|(IE)]>
<![endif]-->
 

上面的代码读取大于microsoft outlook 9或IE

Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15
 

列出的条件语句的版本。

启动混合电子邮件模板

每个步骤的解释方式都应该让具有基本HTML知识的任何人都能轻松理解。

首先,我们从一个包装表开始,它将跨越屏幕和一类容器。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[CONTENT GOES HERE]</td>
    </tr>
  </tbody>
</table>
 

之后,我们为不读取最大宽度但读取标题中的CSS的电子邮件客户端添加媒体查询。媒体查询将以所有屏幕为目标,并以700像素宽度显示容器。

@media only screen and (max-width : 700px) {
.container{width:700px;}
}
 

接下来,我们添加一个outlook条件语句,使表(带有类容器)的宽度保持在700像素。

<!--[if (gte mso 9)|(IE)]>
    <table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="left" valign="top" width="700">
    <![endif]-->
    
        <table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
              <tbody>
                <tr>
                  <td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
                </tr>
              </tbody>
        </table>

    <!--[if (gte mso 9)|(IE)]>
            </td>
        </tr>
    </table>
<![endif]-->
 

上面的代码现在应该在outlook中保存700px宽的模板。

现在为列。下面的代码将在模板上创建两个相等的列,宽度为350px。

<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[COLUMN CONTENT HERE]</td>
    </tr>
  </tbody>
</table>
</div>
                                  
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->

<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[COLUMN CONTENT HERE]</td>
    </tr>
  </tbody>
</table>
</div>

 <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->
 

在此之后,限制只是你的想象力或设计师。设计完成后,重要的是参与线框架阶段,因此一旦设计处于编码阶段就没有意外。

注意:

  • 视网膜图像需要在元素级别设置的图像而不是其样式<img src =“”width =“”...
  • 您仍然可以选择进行内联CSS,或者只有所有客户端都支持CSS时才能选择CSS。

电子邮件客户端和渲染引擎

电子邮件客户端使用不同的呈现引擎呈现HTML电子邮件:

  • Apple Mail,Outlook for Mac,Android Mail和iOS Mail使用WebKit
  • Outlook 2000/02/03使用Internet Explorer 6
  • Outlook 2007/10/13使用Microsoft Word
  • Web客户端使用浏览器的相应引擎(例如,Safari使用WebKit,Chrome使用Blink)

有些客户还会在自己的风格上添加自己的风格,例如Gmail将所有<td> 字体设置为font-family: arial,sans-serif; ,这可能会影响电子邮件的呈现方式。

在2016年之前,所有Gmail产品都删除了<link> 标记, <style> 标记内的任何CSS以及任何其他未内联的CSS。 2016年底,Gmail开始支持其大多数产品中的<style> 标签和媒体查询。 以下是截至2016年11月23日的更新

在此处输入图像描述

HTML和纯文本

HTML电子邮件是使用HTML和CSS的子集来使用颜色,图形,表格列和链接来格式化网页之类的电子邮件。

发送电子邮件时,发送纯文本和HTML非常重要。您可以通过将电子邮件作为多部分MIME发送来完成此操作。大多数电子邮件服务提供商都有自动为您构建MIME的工具。有些会根据您的HTML版本生成纯文本版本,还有第三方工具

纯文本电子邮件的示例:

# EMAIL TITLE GOES HERE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.

Learn more: http://www.website.com/landing-page-1

---

## Subheader goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.

Learn more: http://www.website.com/landing-page-2

---

Footer and Sender information

Unsubscribe here: http://www.website.com/unsubscribe
 

在此处输入图像描述

请注意,随着最近Apple Watch的推出,一个新的MIME部分浮出水面: text/watch-html 。此内容仅显示在Apple Watch(以及支持此MIME类型的任何其他客户端)中。

基础知识(表格和内联CSS)


布局表

HTML电子邮件文件的结构类似于网页的结构:

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
        <title>Hello!</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>This is a simple paragraph.</p>
    </body>
</html>
 

但是,基于<div> 的CSS布局在电子邮件中不起作用,就像在Web上一样。主要的电子邮件客户端既不支持浮点数和弹性框等内容,也不会以不同方式对其进行修改。 <div> 在不同的客户端,特别是Outlook中也有定位和盒子模型问题。有一些 技术可以仅使用<div> 来编写电子邮件,但是坚持使用表格进行布局会更安全。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello!</title>
    </head>
    <body>
        <table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation”>
            <tr>
                <td width="200">
                    <h1>Hello World!</h1>
                </td>
                <td width="400">
                    <p>This is a simple paragraph.</p>
                </td>
            </tr>
        </table>
    </body>
</html>
 

内联CSS

应用内联样式使其优先于更远的样式(例如webmail客户端样式),并且还可以解决从头部或外部CSS文件中去除CSS的电子邮件客户端。内联CSS是确保在每个电子邮件客户端中保持一致显示的最佳方式。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello!</title>
    </head>
    <body style="background: #000000;">
        <table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation” style="margin: auto; background: #ffffff;">
            <tr>
                <td width="200" style="padding: 20px; background-color: #eeeeee;">
                    <h1 style="font-weight: bold; color: #444444; font-family: Georgia, serif;">Hello World!</h1>
                </td>
                <td width="400" style="padding: 20px;">
                    <p style="color: #444444; font-family: arial, sans-serif; margin: 0;">This is a simple paragraph.</p>
                </td>
            </tr>
        </table>
    </body>
</html>
 

你有几个内联CSS选项:

  • 随时随地编写CSS
  • 在编辑器中使用本地代码
  • 使用像这样的基于Web的CSS内联器
  • 像这样使用程序化的CSS内联器
  • 使用像这样的构建过程或模板语言
  • 让您的电子邮件服务提供商为您处理内联(如果他们支持)