电子墨水标签_使用墨水构建响应电子邮件模板

电子墨水标签

Ink is a responsive HTML email framework by Zurb - the very awesome team that built Foundation. Ink tries to make it easy to build custom and responsive HTML emails that work on all devices.

Ink是Zurb的响应HTML电子邮件框架 ， Zurb是建立基金会的非常出色的团队。 Ink试图简化构建可在所有设备上运行的自定义和响应HTML电子邮件的过程。

This article will take you through the fundamentals of Zurb's Ink platform as well as covering some best practice email things. We'll also build a large boilerplate to copy and paste code from. Be sure to check out the demo links or GitHub.

本文将带您了解Zurb Ink平台的基础知识，并介绍一些最佳实践电子邮件内容。 我们还将构建一个大型样板，以从中复制和粘贴代码。 确保查看演示链接或GitHub。

关于电子邮件的可悲事实 (The sad truth about email)

If you've never had the pleasure of building a custom HTML email template before, let me try to explain what it's like.

如果以前从未有过构建自定义HTML电子邮件模板的乐趣 ，那么让我尝试解释一下它的含义。

Imagine you were tasked with building a website. This website needs to work in Internet Explorer 6, 7, and 8. On top of that, each version has 10 other versions like it, but they are not quite the same. All of them have their own special quirks and rules. On top of this, you don't have a nice Chrome Inspector or Firebug tool to debug with. Oh, and then you somehow have to figure how to make it responsive and use new cool tools.

想象一下，您被要求建立一个网站。 该网站需要在Internet Explorer 6、7和8中工作 。 最重要的是，每个版本都有10个其他类似的版本，但它们并不完全相同。 他们都有自己的特殊怪癖和规则。 最重要的是，您没有很好的Chrome Inspector或Firebug工具进行调试。 哦，然后您必须以某种方式弄清楚如何使其具有响应能力并使用新的出色工具。

It's like building a website for 50 different Internet Explorers, blindfolded.

就像为蒙上眼睛的50个不同的Internet Explorer建立网站一样。

A lot of good front-end developers will refuse to do it. In a lot of cases, it's assigned to junior devs to basically burn inexpensive hours on until the templates are hacked into completion. If you're that poor soul, take a deep breath and relax, Ink has already fought this battle for you. This article will take you through core concepts of using Ink to successfully build cross-device and responsive custom HTML email templates.

许多优秀的前端开发人员都会拒绝这样做。 在很多情况下，它被分配给初级开发人员，以基本上节省大量时间，直到模板被黑客入侵为止。 如果您是那个可怜的灵魂，请深呼吸并放松，Ink已经为您奋斗了。 本文将带您了解使用Ink成功构建跨设备和响应式自定义HTML电子邮件模板的核心概念。

步骤1：与您的设计师同步 (Step 1: Sync up with your designers)

This is an important step that's not really part of the Official Ink Documentation. With all the cool new features of CSS3, designers can get away with pushing the boundaries of the web. Unfortunately with HTML emails, that's not the case at all.

这是重要的一步，实际上不是官方油墨文档的一部分 。 借助CSS3的所有出色新功能，设计人员可以摆脱网络界限。 不幸的是，对于HTML电子邮件，根本不是这样。

容器尺寸 (Container size)

Zurb Ink has a fixed max-width of 580px for content. This size is optimal for all devices. This is done with "containers" (similar to Bootstrap and Foundation).

Zurb墨水的内容最大固定宽度为580px 。 此大小对于所有设备都是最佳的。 这是通过“容器”（类似于Bootstrap和Foundation）完成的。

For devices and screen sizes of 600px and below, the containers will fill 95% of the screen's width to prevent bleeding over a screen's edge.

对于尺寸为600px及以下的设备和设备，容器将填充屏幕宽度的95％，以防止在屏幕边缘溢出。

响应大小 (Responsive sizes)

Zurb Ink has only two media query break points - Desktop and Mobile. Mobile begins when the container is equal or less than 600px (when the container switches from a fixed width to a percentage width).

Zurb Ink只有两个媒体查询断点-桌面和移动。 当容器等于或小于600px （容器从固定宽度切换为百分比宽度时），移动开始。

If a designer is creating mobile templates as well, this doesn't mean they should build templates for 600px wide. They should be building for the minimum sizes first (mobile-first approach).

如果设计人员也正在创建移动模板，这并不意味着他们应该构建600px宽的模板。 他们应该首先建立最小尺寸（移动优先）。

This will help prevent things like this from happening:

这将有助于防止此类情况的发生：

I recommend having them build the mobile PSDs with a width of 320px to make sure they look best on iPhones and other small devices.

我建议让他们构建宽度为320px的移动PSD，以确保它们在iPhone和其他小型设备上的外观最佳。

自定义字体将永远无法使用 (Custom font's won't always work)

Using custom fonts will work real nice on a lot of new email devices, but, unfortunately, a lot of legacy email clients won't load these fonts. There's no work-around for this either.

使用自定义字体在许多新的电子邮件设备上都可以很好地工作，但是不幸的是，许多旧版电子邮件客户端不会加载这些字体。 也没有解决方法。

For typography, Ink uses this as their base:

对于排版，Ink以此为基础：

body, table.body, h1, h2, h3, h4, h5, h6, p, td {
        font-family: "Helvetica", "Arial", sans-serif; 
    }

You can use your own websafe fonts as a base, but it's important to note that not all web safe fonts will work either. MailChimp has an excellent design reference for typography.

您可以使用自己的Web安全字体作为基础，但需要注意的是，并不是所有的Web安全字体都可以使用。 MailChimp具有出色的版式设计参考 。

So in summary, you can use custom fonts, but expect a fallback to be used for a lot of devices. We'll cover how to add custom fonts later in this article.

因此，总而言之，您可以使用自定义字体，但是希望后备用于许多设备。 我们将在本文后面介绍如何添加自定义字体。

响应式网格的简单堆叠 (Simple stacking for the responsive grid)

When Ink's grid stacks while switching from desktop to mobile, it's going to do so in a normal floating order. In Bootstrap and Foundation, you can reverse that stacking order. Unfortunately, since Ink's grid system has no choice but to be built in tables, it's not really possible to do that without extra markup.

当Ink的网格堆叠从台式机切换到移动版时，它将以常规浮动顺序进行。 在Bootstrap和Foundation中，您可以颠倒该堆叠顺序。 不幸的是，由于Ink的网格系统别无选择，只能在表格中构建，因此如果没有额外的标记，这实际上是不可能的。

关键概念 (Key concepts)

Firstly, Ink's Official Documentation is amazing. It covers everything in detail and more. I highly recommend spending an hour and reading it through. We'll cover mostly everything in the docs and then some other helpful tips.

首先， Ink的官方文档令人惊叹。 它涵盖了所有细节以及更多内容。 我强烈建议您花一个小时并仔细阅读。 我们将涵盖文档中的几乎所有内容，然后介绍一些其他有用的技巧。

假设没有任何效果 (Assume nothing works)

Email clients aren't browsers. A lot of them only support the bare minimum of what's required for HTML and CSS. On top of likely being buggy or incomplete, for security and other reasons, they strip out a lot of things.

电子邮件客户端不是浏览器。 它们中的许多仅支持HTML和CSS所需的最低限度。 由于安全性和其他原因，除了可能出现故障或不完整之外，它们还会剔除很多东西。

So there's things you'll want to just completely avoid for maximum cross-client support (some more obvious than others):

因此，您需要完全避免某些事情，以获得最大的跨客户端支持（某些明显比其他明显）：

• JavaScript
  JavaScript
• Iframes
  iframe
• Non-inline styles
  非内联样式
• The <div> tag to manage layout
  <div>标签来管理布局
• Forms
  形式

内联一切 (Inline everything)

In order to get your styles to work on all clients, you'll need to inline your styles. This doesn't mean you have to do it during development, but before sending out the email you'll need to do this.

为了使样式适用于所有客户，您需要内联样式。 这并不意味着您必须在开发期间执行此操作，但是在发送电子邮件之前，您需要执行此操作。

Fortunately, nobody does this by hand. There are plenty of resources to do this for you. On top of this, email services like MailChimp, Campaign Monitor, Mandrill, etc. usually have a service to do this for you. If it doesn't, you can use this inliner by Zurb to automatically do it:

幸运的是，没有人手动完成此操作。 有很多资源可以为您执行此操作。 最重要的是，电子邮件服务（例如MailChimp，Campaign Monitor，Mandrill等）通常都具有为您执行此操作的服务。 如果没有，您可以使用Zurb的此内联自动执行此操作：

• Zurb Ink CSS Inliner
  Zurb墨水CSS衬垫

使用表格建立布局 (Use tables for building the layout)

Everyone hates this now-a-days, but it's a must for email clients. You should build your layouts with HTML Tables. This means a few things:

如今，每个人都讨厌这个，但是对于电子邮件客户端来说，这是必须的。 您应该使用HTML表格构建布局。 这意味着几件事：

• The <div> tag won't work and will likely be stripped out
  <div>标记无效，可能会被剥离
• Assume position: absolute; won't work
  假设position: absolute; 不会工作
• Doing display: block; on a table probably won't work
  正在display: block; 在桌子上可能无法正常工作
• Using display: inline-block; won't be consistent across clients
  使用display: inline-block; 在客户之间不会保持一致

If you follow Ink's grid systems detailed below, you shouldn't have to think about this all too much though.

如果您遵循下面详细介绍的Ink的网格系统，则无需过多考虑。

指定所有图像尺寸 (Specify all image sizes)

This is extremely important. You should specify all image sizes. For example:

这是非常重要的。 您应该指定所有图像尺寸。 例如：

<img src="http://placehold.it/400x400.gif/ff2f2f/&text=scotch.io" width="400" height="400">

Ink has a reset on all images to ensure that their max-width never exceeds 100% (aka responsive images). Outlook doesn't care though. If you don't specify a size on an image, Outlook will be a mangled mess of overflowed craziness.

墨水在所有图像上都进行了重置，以确保其最大宽度不超过100％（又名响应图像）。 Outlook不在乎。 如果您未在图像上指定大小，则Outlook将充满疯狂的混乱。

If you want to support Retina images, you can just add an image that is twice the size of the specified image.

如果要支持Retina图像，则可以添加一个比指定图像大两倍的图像。

Here's an example:

这是一个例子：

<img src="http://placehold.it/800x800.gif/ff2f2f/&text=scotch.io" width="400" height="400">

使用绝对网址 (Use absolute URLs)

For referencing anything (images, links, etc.), you should always use an absolute URL. This might be more obvious to some, but it's definitely worth noting.

要引用任何内容（图像，链接等），应始终使用绝对URL。 这对于某些人可能更明显，但绝对值得注意。

崇高的片段 (Sublime snippets)

If you're developing with Sublime, there's a nice Sublime Text 2 and 3 package for Zurb Ink snippets. There's a lot of markup involved for tables and the grid systems Ink provides. I highly recommend checking this out to help save you time.

如果您正在使用Sublime进行开发，那么有一个很好的Sublime Text 2和3软件包可用于Zurb Ink代码片段 。 Ink提供的表和网格系统涉及很多标记。 我强烈建议您检查一下以帮助您节省时间。

删除自动格式检测 (Remove automatic format detection)

I personally love that a lot of clients, especially on mobile, automatically convert dates, phone numbers, and emails to links; however, there's always that random use case where you might not want to have that happen. Here's how you can stop it:

我个人很喜欢很多客户（尤其是在移动设备上）自动将日期，电话号码和电子邮件转换为链接； 但是，总是有随机的用例，您可能不想发生这种情况。 您可以通过以下方法停止它：

<meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="email=no">

Outlook条件 (Outlook conditionals)

Just like how you would specify Internet Explorer HTML conditional tags, you can do that for Outlook. The only thing that is super weird, you need to match the year to a specific version.

就像您将如何指定Internet Explorer HTML条件标记一样，您可以为Outlook执行此操作。 唯一很奇怪的事情是，您需要将年份与特定版本匹配。

Here's some sample code snippets:

以下是一些示例代码片段：

<!--[if mso 12]>
        <style type="text/css">
            h1 { color: red; }
        </style>
    <![endif]-->

    <!--[if !mso]><!-- -->
        <h1>Not on Outlook</h1>
    <!--<![endif]-->

Here's a list matching Outlook version numbers to their year:

这是一个将Outlook版本号与其年份匹配的列表：

• Outlook 2000 (version 9)
  Outlook 2000（版本9）
• Outlook 2002 (version 10)
  Outlook 2002（版本10）
• Outlook 2003 (version 11)
  Outlook 2003（版本11）
• Outlook 2007 (version 12)
  Outlook 2007（版本12）
• Outlook 2010 (version 14)
  Outlook 2010（版本14）
• Outlook 2013 (version 15)
  Outlook 2013（版本15）

Finally, Outlook wraps the entire email in a div (even the <html> tag) called:

最后，Outlook将整个电子邮件包装在一个名为div（甚至是<html>标记）中：

.ExternalClass {

    }

You can use this "super parent" class to also make Outlook specific style changes.

您可以使用此“超级父级”类来进行Outlook特定样式的更改。

移动样式和媒体查询 (Mobile styles and media queries)

Mobile styles can be frustrating to implement. As a result of inlining CSS, you need to add the !important declaration to all CSS properties. This makes a lot of sense if you think about it.

实施移动样式可能会令人沮丧。 内联CSS的结果是，您需要在所有CSS属性中添加!important声明。 如果您考虑一下，这很有意义。

For example, say you have:

例如，假设您有：

@media only screen and (max-width: 600px) {
        p.blue-on-mobile {
            color: blue;
        }
    }

<p class=".blue-on-mobile" style="color: red;">I'm red, I swear!</p>

If you're on a device under 600px, the <p> tag will still be red. This is because @media rules can't be inline styles. So the inline styles take precedence over the normal CSS just like it would on a website. To override the inline styles, you must use the !important tag.

如果您使用的是600px的设备，则<p>标记仍为红色 。 这是因为@media规则不能是内联样式。 因此，就像在网站上一样，内联样式优先于普通CSS。 要覆盖内联样式，必须使用!important标记。

So this example, the <p> tag will now be blue on mobile:

因此，在此示例中， <p>标记现在在移动设备上为蓝色：

@media only screen and (max-width: 600px) {
        p.blue-on-mobile {
            color: blue !important;
        }
    }

<p class=".blue-on-mobile" style="color: red;">I'm red, I swear!</p>

油墨Craft.io (Ink's process)

Ink has five steps to follow to make sure you're heading in the right direction. Here they are summarized:

墨水要遵循五个步骤，以确保您朝着正确的方向前进。 这里总结一下：

1. Test in Outlook first (If it works in the Outlooks, it probably works everywhere else)
   首先在Outlook中进行测试（如果可以在Outlook中使用，则可能在其他任何地方都可以使用）
2. Add your responsive styles right above the closing </head> tag
   在结束</head>标记上方添加响应式样式
3. Bring your styles inline
   内联风格
4. Test your email with Litmus
   用Litmus测试您的电子邮件
5. Pray for hotness and send it out
   为热气祈祷并发送出去

测试与调试 (Testing and debugging)

Everyone will have their own method for this. I recommend building the emails in Chrome as you normally would with any other basic HTML page. This way you can visualize the desktop and mobile stuff as your building it out. You'll also be able to use the inspector to get things buttoned-up.

每个人对此都有自己的方法。 我建议您像通常使用其他任何基本HTML页面一样，在Chrome中构建电子邮件。 这样，您可以在构建桌面和移动设备时对其进行可视化处理。 您还可以使用检查器来确定事物。

To debug, you should definitely be using Litmus. I can't imagine taking an email project on without it. They have this testing service that will actually take a screenshot in every type of client possible. This is great for testing the Outlooks as well as mobile devices.

要进行调试，您绝对应该使用Litmus 。 我无法想象没有它就可以进行电子邮件项目。 他们拥有这项测试服务，实际上可以在每种类型的客户端中截取屏幕截图。 这对于测试Outlook和移动设备非常有用。

The screenshots are even shareable so you can get approval from your manager or the client in case there's any discrepancies.

屏幕截图甚至可以共享，因此如果有任何差异，您可以从经理或客户那里获得批准。

样板 (Boilerplate)

This is Ink's official starter kit for building HTML email templates:

这是Ink的官方入门工具包，用于构建HTML电子邮件模板：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="viewport" content="width=device-width"/>

            <!-- Framework: ink.css -->
            <style type="text/css">
                #outlook a{padding:0}body{width:100%!important;min-width:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.ExternalClass{width:100%}.ExternalClass,.ExternalClass div,.ExternalClass font,.ExternalClass p,.ExternalClass span,.ExternalClass td{line-height:100%}#backgroundTable{margin:0;padding:0;width:100%!important;line-height:100%!important}img{outline:0;text-decoration:none;-ms-interpolation-mode:bicubic;width:auto;max-width:100%;float:left;clear:both;display:block}center{width:100%;min-width:580px}a img{border:none}table{border-spacing:0;border-collapse:collapse}td{word-break:break-word;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;border-collapse:collapse!important}table,td,tr{padding:0;vertical-align:top;text-align:left}hr{color:#d9d9d9;background-color:#d9d9d9;height:1px;border:none}table.body{height:100%;width:100%}table.container{width:580px;margin:0 auto;text-align:inherit}table.row{padding:0;width:100%;position:relative}table.container table.row{display:block}td.wrapper{padding:10px 20px 0 0;position:relative}table.column,table.columns{margin:0 auto}table.column td,table.columns td{padding:0 0 10px}table.column td.sub-column,table.column td.sub-columns,table.columns td.sub-column,table.columns td.sub-columns{padding-right:10px}td.sub-column,td.sub-columns{min-width:0}table.container td.last,table.row td.last{padding-right:0}table.one{width:30px}table.two{width:80px}table.three{width:130px}table.four{width:180px}table.five{width:230px}table.six{width:280px}table.seven{width:330px}table.eight{width:380px}table.nine{width:430px}table.ten{width:480px}table.eleven{width:530px}table.twelve{width:580px}table.one center{min-width:30px}table.two center{min-width:80px}table.three center{min-width:130px}table.four center{min-width:180px}table.five center{min-width:230px}table.six center{min-width:280px}table.seven center{min-width:330px}table.eight center{min-width:380px}table.nine center{min-width:430px}table.ten center{min-width:480px}table.eleven center{min-width:530px}table.twelve center{min-width:580px}table.one .panel center{min-width:10px}table.two .panel center{min-width:60px}table.three .panel center{min-width:110px}table.four .panel center{min-width:160px}table.five .panel center{min-width:210px}table.six .panel center{min-width:260px}table.seven .panel center{min-width:310px}table.eight .panel center{min-width:360px}table.nine .panel center{min-width:410px}table.ten .panel center{min-width:460px}table.eleven .panel center{min-width:510px}table.twelve .panel center{min-width:560px}.body .column td.one,.body .columns td.one{width:8.333333%}.body .column td.two,.body .columns td.two{width:16.666666%}.body .column td.three,.body .columns td.three{width:25%}.body .column td.four,.body .columns td.four{width:33.333333%}.body .column td.five,.body .columns td.five{width:41.666666%}.body .column td.six,.body .columns td.six{width:50%}.body .column td.seven,.body .columns td.seven{width:58.333333%}.body .column td.eight,.body .columns td.eight{width:66.666666%}.body .column td.nine,.body .columns td.nine{width:75%}.body .column td.ten,.body .columns td.ten{width:83.333333%}.body .column td.eleven,.body .columns td.eleven{width:91.666666%}.body .column td.twelve,.body .columns td.twelve{width:100%}td.offset-by-one{padding-left:50px}td.offset-by-two{padding-left:100px}td.offset-by-three{padding-left:150px}td.offset-by-four{padding-left:200px}td.offset-by-five{padding-left:250px}td.offset-by-six{padding-left:300px}td.offset-by-seven{padding-left:350px}td.offset-by-eight{padding-left:400px}td.offset-by-nine{padding-left:450px}td.offset-by-ten{padding-left:500px}td.offset-by-eleven{padding-left:550px}td.expander{visibility:hidden;width:0;padding:0!important}table.column .text-pad,table.columns .text-pad{padding-left:10px;padding-right:10px}table.column .left-text-pad,table.column .text-pad-left,table.columns .left-text-pad,table.columns .text-pad-left{padding-left:10px}table.column .right-text-pad,table.column .text-pad-right,table.columns .right-text-pad,table.columns .text-pad-right{padding-right:10px}.block-grid{width:100%;max-width:580px}.block-grid td{display:inline-block;padding:10px}.two-up td{width:270px}.three-up td{width:173px}.four-up td{width:125px}.five-up td{width:96px}.six-up td{width:76px}.seven-up td{width:62px}.eight-up td{width:52px}h1.center,h2.center,h3.center,h4.center,h5.center,h6.center,p.center,table.center,td.center{text-align:center}span.center{display:block;width:100%;text-align:center}img.center{margin:0 auto;float:none}.hide-for-desktop,.show-for-small{display:none;width:0;mso-hide:all;overflow:hidden}.hide-for-desktop *,.show-for-small *{mso-hide:all}body,h1,h2,h3,h4,h5,h6,p,table.body,td{color:#222;font-family:Helvetica,Arial,sans-serif;font-weight:400;padding:0;margin:0;text-align:left;line-height:1.3}h1,h2,h3,h4,h5,h6{word-break:normal}h1{font-size:40px}h2{font-size:36px}h3{font-size:32px}h4{font-size:28px}h5{font-size:24px}h6{font-size:20px}body,p,table.body,td{font-size:14px;line-height:19px}p.lead,p.lede,p.leed{font-size:18px;line-height:21px}p{margin-bottom:10px}small{font-size:10px}a{color:#2ba6cb;text-decoration:none}a:active,a:hover{color:#2795b6!important}a:visited{color:#2ba6cb!important}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#2ba6cb}h1 a:active,h1 a:visited,h2 a:active,h2 a:visited,h3 a:active,h3 a:visited,h4 a:active,h4 a:visited,h5 a:active,h5 a:visited,h6 a:active,h6 a:visited{color:#2ba6cb!important}.panel{background:#f2f2f2;border:1px solid #d9d9d9;padding:10px!important}.sub-grid table{width:100%}.sub-grid td.sub-columns{padding-bottom:0}table.button,table.large-button,table.medium-button,table.small-button,table.tiny-button{width:100%;overflow:hidden}table.button td,table.large-button td,table.medium-button td,table.small-button td,table.tiny-button td{display:block;width:auto!important;text-align:center;background:#2ba6cb;border:1px solid #2284a1;color:#fff;padding:8px 0;line-height:initial!important}table.tiny-button td{padding:5px 0}table.small-button td{padding:8px 0}table.medium-button td{padding:12px 0}table.large-button td{padding:21px 0}table.button td a,table.large-button td a,table.medium-button td a,table.small-button td a,table.tiny-button td a{font-weight:700;text-decoration:none;font-family:Helvetica,Arial,sans-serif;color:#fff;font-size:16px;display:block;height:100%;width:100%}table.tiny-button td a{font-size:12px;font-weight:400}table.small-button td a{font-size:16px}table.medium-button td a{font-size:20px}table.large-button td a{font-size:24px}table.button:active td,table.button:hover td,table.button:visited td{background:#2795b6!important}table.button:active td a,table.button:hover td a,table.button:visited td a{color:#fff!important}table.button:hover td,table.large-button:hover td,table.medium-button:hover td,table.small-button:hover td,table.tiny-button:hover td{background:#2795b6!important}table.button td a:visited,table.button:active td a,table.button:hover td a,table.large-button td a:visited,table.large-button:active td a,table.large-button:hover td a,table.medium-button td a:visited,table.medium-button:active td a,table.medium-button:hover td a,table.small-button td a:visited,table.small-button:active td a,table.small-button:hover td a,table.tiny-button td a:visited,table.tiny-button:active td a,table.tiny-button:hover td a{color:#fff!important}table.secondary td{background:#e9e9e9;border-color:#d0d0d0;color:#555}table.secondary td a{color:#555}table.secondary:hover td{background:#d0d0d0!important;color:#555}table.secondary td a:visited,table.secondary:active td a,table.secondary:hover td a{color:#555!important}table.success td{background:#5da423;border-color:#457a1a}table.success:hover td{background:#457a1a!important}table.alert td{background:#c60f13;border-color:#970b0e}table.alert:hover td{background:#970b0e!important}table.radius td{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}table.round td{-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px}body.outlook p{display:inline!important}@media only screen and (max-width:600px){table[class=body] img{max-width:auto!important;max-height:auto!important}table[class=body] center{min-width:0!important}table[class=body] .container{width:95%!important}table[class=body] .row{width:100%!important;display:block!important}table[class=body] .wrapper{display:block!important;padding-right:0!important}table[class=body] .column,table[class=body] .columns{table-layout:fixed!important;float:none!important;width:100%!important;padding-right:0!important;padding-left:0!important;display:block!important}table[class=body] .wrapper.first .column,table[class=body] .wrapper.first .columns{display:table!important}table[class=body] table.column td,table[class=body] table.columns td{width:100%!important}table[class=body] .column td.one,table[class=body] .columns td.one{width:8.333333%!important}table[class=body] .column td.two,table[class=body] .columns td.two{width:16.666666%!important}table[class=body] .column td.three,table[class=body] .columns td.three{width:25%!important}table[class=body] .column td.four,table[class=body] .columns td.four{width:33.333333%!important}table[class=body] .column td.five,table[class=body] .columns td.five{width:41.666666%!important}table[class=body] .column td.six,table[class=body] .columns td.six{width:50%!important}table[class=body] .column td.seven,table[class=body] .columns td.seven{width:58.333333%!important}table[class=body] .column td.eight,table[class=body] .columns td.eight{width:66.666666%!important}table[class=body] .column td.nine,table[class=body] .columns td.nine{width:75%!important}table[class=body] .column td.ten,table[class=body] .columns td.ten{width:83.333333%!important}table[class=body] .column td.eleven,table[class=body] .columns td.eleven{width:91.666666%!important}table[class=body] .column td.twelve,table[class=body] .columns td.twelve{width:100%!important}table[class=body] td.offset-by-eight,table[class=body] td.offset-by-eleven,table[class=body] td.offset-by-five,table[class=body] td.offset-by-four,table[class=body] td.offset-by-nine,table[class=body] td.offset-by-one,table[class=body] td.offset-by-seven,table[class=body] td.offset-by-six,table[class=body] td.offset-by-ten,table[class=body] td.offset-by-three,table[class=body] td.offset-by-two{padding-left:0!important}table[class=body] table.columns td.expander{width:1px!important}table[class=body] .right-text-pad,table[class=body] .text-pad-right{padding-left:10px!important}table[class=body] .left-text-pad,table[class=body] .text-pad-left{padding-right:10px!important}table[class=body] .hide-for-small,table[class=body] .show-for-desktop{display:none!important}table[class=body] .hide-for-desktop,table[class=body] .show-for-small{display:block!important;width:auto!important;overflow:visible!important}}
            </style>

            <!-- Your Custom CSS here -->
            <style type="text/css">

            </style>

            <!-- Your mobile CSS here -->
            <style type="text/css">
                @media only screen and (max-width: 600px) {

                }
            </style>
        </head>
        <body>
            <table class="body">
                <tr>
                    <td class="center" align="center" valign="top">
                        <center>

                            <!-- Email Content -->

                        </center>
                    </td>
                </tr>
            </table>
        </body>
    </html>

添加自定义字体 (Adding custom fonts)

To add custom fonts for maximum cross-client support, you should use @import inline.

要添加自定义字体以获得最大的跨客户端支持，应使用@import inline。

Following this, you'll want to specify the font-family more specific then you normally would. You should assume fonts won't be inherited. On top of that, the Ink framework is very specific on font-familys. Below is an example of how to add custom fonts as well as some simple utility classes for them.

然后，您将要比通常指定更具体的字体系列。 您应该假定字体不会被继承。 最重要的是，Ink框架非常针对字体家族。 下面是一个如何添加自定义字体以及一些简单的实用程序类的示例。

<style type="text/css">

        /**
         *  Name:   Unica One
         *  Code:   font-family: 'Unica One', cursive;
         *  Use:    Headings
         *  Sizes:  400
         */
        /**
         *  Name:   Volkhorn
         *  Code:   font-family: 'Vollkorn', serif;
         *  Use:    body, paragraphs, etc
         *  Sizes:  400, 700
         */

        @import url(https://fonts.googleapis.com/css?family=Unica+One|Vollkorn:400italic,700italic,400,700);

        body, table.body, p, td, .is-vollkorn {
            font-family: 'Vollkorn', serif;
            font-weight: 400;
        }
        h1, h2, h3, h4, h5, h6, .is-unica-one {
            font-family: 'Unica One', cursive;
            font-weight: 400;
        }

    </style>

添加预标题 (Add a preheader)

Some email clients, like Gmail, will preview the first text that exists after the body tag. This is really great except when your email template has text that isn't relevant to the content beforehand. The most common hiccup are when templates that have a "View in Browser" button in the header or something.

某些电子邮件客户端（例如Gmail）将预览body标签之后的第一个文本。 这真的很棒，除了您的电子邮件模板中预先包含与内容无关的文本时。 最常见的问题是模板的标题或其他内容带有“在浏览器中查看”按钮。

To guarentee you have a solid text preview, you can add a preheader immediately following the <body> tag. Here's what it will look like:

要确保您具有纯文本预览，可以在<body>标记后立即添加预标题。 它将是这样的：

<body>
        <span style="display: none !important;">
            This is my preview text that will show up on email clients!
        </span>
        <table class="body">
            <tr>
                <td class="center" align="center" valign="top">
                    <center>

                        <!-- Email Content -->

                    </center>
                </td>
            </tr>
        </table>

    </body>

默认网格 (Default grid)

You'll probably use the default grid the most. Since the grid is built with tables with cross-client in mind, there's a ton of markup to do seemingly simple things. At first it might seem exhausting, but it will save you a lot of time in the future if you're buttoned-up about it.

您可能会最多使用默认网格。 由于网格是在考虑跨客户的情况下构建的，因此有大量的标记可以完成看似简单的事情。 乍一看，它似乎很累，但是如果您对此有所了解，它将为您节省很多时间。

So let's break it down. Here it is with fake-markup to help visualize the steps:

因此，让我们对其进行分解。 这是带有假标记的 ，可帮助可视化这些步骤：

<container>
        <row>
            <wrapper>
                <column class="six">

                    Left content here!

                    <expander></expander>
                </column>
            </wrapper>
            <wrapper class="last">
                <column class="six">

                    Right content here!

                    <expander></expander>
                </column>
            </wrapper>
        </row>
    </container>

Immediately you'll see that <wrapper> and <column> elements are basically redundant, but necessary when the tables code is added.

马上您将看到<wrapper>和<column>元素基本上是多余的，但是在添加表代码时是必需的。

The <expander> tag doesn't have anything in it and is purposefully emtpy. This forces the parent column to go full width on smaller devices. So it's necessary for the responsive component to stack.

<expander>标记中没有任何内容，有意为空。 这将迫使父列在较小的设备上变为全宽。 因此，响应组件必须堆叠。

You'll also notice the class .last is applied to the last wrapper. This is super important to make sure gutters are working correctly with your grid.

您还会注意到.last类被应用于最后一个包装器。 这对于确保装订线与网格正确工作非常重要。

Finally, here is that same code with real markup:

最后，这是带有真实标记的相同代码：

<table class="container">
        <tr>
            <td>
                <table class="row">
                    <tr>
                        <td class="wrapper">
                            <table class="six columns">
                                <tr>
                                    <td>
                                        Left content here!
                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                        <td class="wrapper last">
                            <table class="six columns">
                                <tr>
                                    <td>
                                        Right content here!
                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

It's a lot of markup. The Sublime Text snippets will save you massive amounts of time.

这是很多标记。 Sublime Text片段将为您节省大量时间。

You can also offset columns by doing .offset-by-{number of columns} on the wrapper class. Here's an example how:

您还可以通过对包装类进行.offset-by-{number of columns}来偏移列。 这是一个示例：

<table class="container">
         <tr>
             <td>
                 <table class="row">
                     <tr>
                         <td class="wrapper offset-by-six last">
                             <table class="six columns">
                                 <tr>
                                     <td>
                                         Right content here!
                                     </td>
                                     <td class="expander"></td>
                                 </tr>
                             </table>
                         </td>
                     </tr>
                 </table>
             </td>
         </tr>
     </table>

子网格（嵌套列） (Sub-Grid (nested columns))

You can also place a columns inside of other columns. This is actually a beautiful thing because sub-grid columns will stack full-width on mobile.

您还可以在其他列中放置一列。 这实际上是一件美丽的事情，因为子网格列将在mobile上全角堆叠 。

To do this, all you need to do is add a class .sub-columns to the <td> where your content will be going. You'll also have to add a .last class to the final column.

为此，您需要做的就是在<td>上添加一个.sub-columns类，您的内容将在其中显示。 您还必须将.last类添加到最后一列。

Here's a snippet showing how:

这是显示如何的代码段：

<table class="container">
        <tr>
            <td>
                <table class="row">
                    <tr>
                        <td class="wrapper">
                            <table class="six columns">
                                <tr>
                                    <td class="three sub-columns">

                                        .three.sub-columnds

                                    </td>
                                    <td class="nine sub-columns last">

                                        .nine.sub-columns

                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                        <td class="wrapper last">
                            <table class="six columns">
                                <tr>
                                    <td>
                                        Right content here!
                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

块网格 (Block-Grid)

I really didn't get the purpose of this at first, but the Block-Grid is actually very useful in some cases. Think of the Block-Grid as a way to do floats in an organized way or something similar to display: inline-block on a bunch of divs.

一开始我确实没有达到这个目的，但是在某些情况下，Block-Grid实际上非常有用。 可以将Block-Grid视为一种以有组织的方式进行浮动或类似于display: inline-block在一堆div上进行display: inline-block 。

This definitely has some benefits to it, but it shouldn't be used as your main templating grid in most cases. You'll see in their docs and from the demo that the grid doesn't always line-up.

这肯定有一些好处，但是在大多数情况下，不应将其用作主要的模板网格。 您会在他们的文档和演示中看到网格并不总是排成一行。

Here's a sample of it:

这是一个示例：

<table class="container">
        <tr>
            <td>
                <table class="block-grid four-up">
                    <tr>
                        <td>
                            1/4
                        </td><td><!-- Side by side -->
                            2/4
                        </td><td><!-- Side by side -->
                            3/4
                        </td><td><!-- Side by side -->
                            4/4
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

You'll notice the side-by-side commented code. You need to eliminate space between the <td> elements because they're display: inline-block;. This is nothing special to Ink because a row of inline-block elements create spaces between them. Check out Fighting the Space Between Inline Block Elements by Chris Coyier if you're curious to why this happens.

您会注意到并排注释的代码。 您需要消除<td>元素之间的空间，因为它们会display: inline-block; 。 这对Ink没什么特别的，因为一行inline-block元素在它们之间创建了空格。 如果您对为什么会发生这种情况感到好奇，请查看Chris Coyier 的《与内联块元素之间的空间作斗争》 。

全角行 (Full-width rows)

Sometimes you'll want to a full-width row. These are good for your headers and footers, but it can even be used in the main content area if you want.

有时，您需要全角行。 这些对您的页眉和页脚很有用，但是如果您愿意，它甚至可以在主要内容区域中使用。

A quick trick to get these working is to just take the default Grid and simply swap the .row and the .container classes. Here's an example:

使它们起作用的一个快速技巧是仅使用默认的Grid并简单地交换.row和.container类。 这是一个例子：

.full-width-demo {
        background: rgb(25, 229, 144);
    }

<table class="row full-width-demo">
        <tr>
            <td>
                <table class="container">
                    <tr>
                        <td class="wrapper last">
                            <table class="twelve columns">
                                <tr>
                                    <td>
                                        I'm full width!
                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

纽扣 (Buttons)

Something as seaminly simple as creating a button is quite difficult to support in Outlook. Sizing just doesn't work well. Fortunately, Ink provides a way to create buttons that not only look in all clients, but they are also responsive.

在Outlook中，支持创建按钮这样简单的操作非常困难。 调整大小无法正常工作。 幸运的是，Ink提供了一种创建按钮的方法，该按钮不仅可以在所有客户端中查看，而且可以响应。

Here's some example button code:

以下是一些示例按钮代码：

<table class="button success">
        <tr>
            <td>
                <a href="#">Success!</a>
            </td>
        </tr>
    </table>

For sizes, you have the following classes:

对于尺寸，您具有以下类别：

• .tiny-button
  .tiny-button
• .small-button or just .button
  .small-button或仅.button
• .medium-button
  .medium-button
• .large-button
  .large-button

For colors, you have:

对于颜色，您有：

• .primary
  .primary
• .secondary
  .secondary
• .alert
  .alert
• .success
  .success

For borders, you have:

对于边界，您具有：

• .radius
  .radius
• .round
  .round

确保标签是一个块元素 (Make sure the a tag is a block element)

The <a> tag in the button by default isn't display: block; by default. For better usability and easier clicking, you should add that custom style in.

默认情况下，按钮中的<a>标记不display: block; 默认。 为了获得更好的可用性和更轻松的单击，您应该在其中添加该自定义样式。

table.button td a, table.tiny-button td a, table.small-button td a, table.medium-button td a, table.large-button td a {
        display: block !important;
    }

向他们添加过渡 (Add a transition to them)

Even though most email clients won't support this, you can add a transition to all buttons with the following code:

即使大多数电子邮件客户端不支持此功能，也可以使用以下代码向所有按钮添加过渡：

table.button td, table.tiny-button td, table.small-button td, table.medium-button td, table.large-button td {
        -webkit-transition: all 225ms ease;
        -moz-transition: all 225ms ease;
        transition: all 225ms ease;
    }

自定义按钮颜色 (Custom button colors)

You can extend the main .button class to create custom button colors. Here's styles for Facebook, Twitter, and a Forward button:

您可以扩展.button主类来创建自定义按钮颜色。 这是Facebook，Twitter和“前进”按钮的样式：

table.facebook td {
        background: #3971B6;
        border-color: #134b90;
    }
    table.facebook:hover td {
        background: #134b90 !important;
    }
    table.twitter td {
        background: #A0D6E2;
        border-color: #7ab0bc;
    }
    table.twitter:hover td {
        background: #7ab0bc !important;
    }
    table.forward td {
        background: #3D3D3A;
        border-color: #333;
    }
    table.forward:hover td {
        background: #111 !important;
    }

杂事 (Miscellaneous things)

可见度类别 (Visibility classes)

Ink provides visibility classes for hiding and showing things on mobile. Here they are:

Ink提供了可见性类，用于在移动设备上隐藏和显示事物。 他们来了：

<p class="hide-for-small">Desktop Only</p>
    <p class="show-for-small">Mobile Only</p>

Unfortunately, Outlook won't support these classes at all. So if you want to support Outlook, you'll have to use Conditional comments with utitlity classes. This seems crazy, but this is what you have to do:

不幸的是， Outlook根本不支持这些类 。 因此，如果要支持Outlook，则必须对条件类使用条件注释。 这似乎很疯狂，但这是您必须做的：

<!--[if !mso]><!-- -->
    <p class="show-for-small">Mobile Only</p>
    <!--<![endif]-->

    <!--[if mso]><!-- -->
    <p class="hide-for-small">Desktop only</p>
    <!--<![endif]-->

居中内容 (Centering content)

To center content that is both displayed: inline or block, you should follow these three steps:

要使同时显示的内容居中： inline或block ，您应该遵循以下三个步骤：

1. Add a class .center to the parent
   将类.center添加到父类
2. Add a <center> tag around the element
   在元素周围添加<center>标签
3. Add a class of .center to the element you want to center
   将.center类添加到要居中的元素

Here's some example code:

这是一些示例代码：

<td class="center">
        <center>
            <img class="center" src="http://placehold.it/500x500" width="250" height="250">
            <p class="center">I'm centered text</p>
        </center>
    </td>

面板 (Panels)

Panels don't really do much, and I think they are quick to confuse some. They're not some extra functionality as much as a simple style utitlity class.

专家小组并没有真正做很多事情，我认为他们很快就会使某些人感到困惑。 它们不像简单的样式实用程序类那样具有一些额外的功能。

Hopefully you're noticing by now that all your content, regardless of the grid choice, will go inside of the final <td> tag. This is always the case with Tables and with Ink.

希望您现在已经注意到所有内容，无论使用哪种网格，都将放入最终的<td>标签内。 表格和墨水始终都是这种情况。

So, Panels in Ink is simply adding the class .panel to that final td to get some default styles. This is good for protyping and visualizing the grid, but it's not a special componenet or anything.

因此，Ink中的Panels只是在最终的td中添加类.panel以获得一些默认样式。 这对于对网格进行原型设计和可视化很有用，但它不是特殊的组件网或其他任何东西。

结论 (Conclusion)

That covers almost everything there is about Zurb Ink, responsive emails, and then some. Zurb Ink has been around for about 2 years now. Hopefully this guide will still prove useful to people who are just now diving into the framework.

这几乎涵盖了有关Zurb Ink，响应式电子邮件以及其他内容的所有内容。 Zurb Ink已经存在大约两年了。 希望本指南对于刚刚加入该框架的人仍然有用。

Make sure you check out our demo and GitHub page for this tutorial!

确保您查看本教程的演示和GitHub页面！

If you have any questions or need support, feel free to make a comment - or even better, ping us in the forums. I'm pretty well versed with this now and should be able to help debug any issues or questions you have.

如果您有任何疑问或需要支持，请随时发表评论-甚至更好，在论坛上 ping我们。 我现在对此非常熟悉，应该能够帮助调试您遇到的任何问题。

I'll end this with some links to awesome resources:

我将以一些指向很棒资源的链接来结束本文：

• Zurb Ink on GitHub
  GitHub上的Zurb Ink
• Zurb Ink Official Documentation
  Zurb墨水官方文档
• Zurb Ink Email Official Email Templates
  Zurb Ink电子邮件官方电子邮件模板
• Litmus
  石蕊属

翻译自: https://scotch.io/tutorials/building-responsive-email-templates-with-ink

电子墨水标签