在过去的几年中，移动端使用的飙升，使我们向网络用户提供内容的方法引起了一场进化或者革命。最终目标是流体的，适应移动端和device-agnostic　Web以及一个已成为受人青睐的学派：响应式设计。然而，虽然响应式设计思想高涨，而电子邮件设计和开发一直在努力跟上。在某种程度上，HTML电子邮件对开发者而言是一个异常复杂的介质，这是一个铁的事实。古老的电子邮件客户技术无法呈现现多的许多的规则，致使一些代码无效。但电子邮件仍然是一个关键的营销渠道，这非常的重要，不能让人忽视的是2012年上半年Litmus公布了一个在移动设备上打开电子邮件的报告，报告显示使用移动设备查阅电子邮件增加了80%。同年Campaign Monitor显示，第一次他们的移动电子邮件打开率实际上已经超过了桌面和Web邮箱。

自从Ethan Marcotte在2010年5月25日发布的《A List Apart》文章开始，响应式网页设计(RWD)讨论的热度并没有减少，但在相同的时间内我们构建电子邮件的方式并没有太多的改变。值得庆幸的是，在过去的一年，人们开始使用RWD和运用类似的方法来设计电子邮件。

向用户发布最新的更新、业务或产品，HTML电子邮件是一个最好的方式，但他们有点棘手。电子邮件客户端对CSS的支持不一致。因此我们必须借助于老的技术，如使用表格和内联CSS。今天，我将不可的大家一起创建一个简单的HTML电子邮件。作为Web开发人员，编写HTML电子邮件是一件非常具有挑战性的任务，我们也必须得处理。幸运的是，当我的第一个客户要求我设计和编写一个HTML电子邮件的通知，他耐心的陪我渡过整个编写过程，让我明白了编码HTML电子邮件的一切。你可能不会有我那么幸运，所以本教程可以帮你做好一切的准备。

处理HTML电子邮件将是考验人的耐心。看似小格式问题无法避免地出现，你认为自己：“我是一个优秀的Web开发人员，我甚至擅长HTML5/CSS3，我可以很好的解决这些问题”。几杯咖啡时间之后，你开始发狂，你在开始考虑给大家做什么，提供一个{这里填写空白的电子邮件客户端}。HTML Email Boilerplate可以做出很好的说明。Boilerplate为您提供一些例子和有用的技巧，保证您的电子邮件设计尽可能的在电子邮件客户端正常渲染。您可以使用Boilerplate做为您创建电子邮件的起点。或者，如果你是高级用户，你可以选择里面你需要的片段做为您需要的。

这篇文章主要是来阅读HTML Email Boilerplate模板的源码，以及扩展其相关的知识点，帮助大家更好的理解EDM模板的设计与开发。首先这是一个HTML电子邮件模板，这里的代码及示例代码是创建一个没有设计或布局的模板。他主要作用就是帮助你避免一些最常见的电子邮件客户端(如，Gmail,Outlook和Yahoo邮箱等)渲染时引起的主要问题。虽然不是可以直接插入使用（你知道的，你必须要做一些事情。），但它提供了一些非常有用的例子和代码片段，这些都可以帮助你设计和开发的HTML电子邮件在邮件客户端上能得到更好的渲染。

电子邮件是一个非常不错的媒体。它可以直接进入收件箱和ROI广泛的报到可达到4000%。它也是永远被误解和经常做得不好。最近智能手机的爆增，我们更常使用iPhone和Galaxy阅读我们的电子邮件，但不幸的是很多电子邮件营销却不能跟上。我认为这是一个大好机会，因为一个好的电子邮件可以轻松打开和取得巨大成功。

EDM模板向来都是Web开发人员不想面对的事情，虽然在站上发布了一系列有关于EDM制作的教程，但很多人都只是略带而过，并没有亲手去实践。也就说都停留在理论的基础上，也并不知道这些理论是否正确。然后最好的理解方式就是自己动手，从头开始实战一回。如果你想实战，那么机会来了，今天我们一起跟随Nicole Merlin的《Build an HTML Email Template From Scratch》中的用例，一步一步，手把手的教你制作一个EDM模板。让你更好的理解EDM模板如何制作，希望大家喜欢。

如果你使用一个可以上网的手机阅读你的电子邮件，你可能知道，这是一种很不爽的体验。虽然电子邮件在收件箱中看非常完美，当挤到一个小屏幕上，它绝对不能使用，小字体，窄的列和布局打乱是常见的问题。本指南中，我们将看看为什么设计移动端电子邮件成为必备的技能，里面涵盖了设计和构建移动端电子邮件的基础知识，而且还有些巧妙的技巧和技术。我们假设你知道一些关于HTML编写电子邮件的基础知识，如果没有，不用担心，我也提供了几个指南，引导您从头开始。

电子邮件变得相当的重要，它在我们身边随时出现。所以我们重新在思考FogBugz邮件通知的制作，我们知道我们必须在随时随地都能阅读，这意味着移动端上要做很多的优化。在这篇文章中有很丰富的资源。Campaign Monitor提供了一份响应式设计指南，文中一步一步教您如何设计与制作响应式邮件("EDM模板")。Ros Hodgekiss早在2011年8月份就在Smashing Magazine发表了一篇From Monitor To Mobile: Optimizing Email Newsletters With CSS。MailChimp 发表了移动电子邮件的最佳实践相关技巧。如果你不想阅读这么多文章，那你么可以花点时间阅读Litmus团队根据自己产品总结的一些响应式邮件制作的经验。

EDM是"Email Direct Marketing"的缩写，即电子邮件营销，简称为邮件营销。是利用电子邮件与受众客户进行商业交流的一种直销方式。从字面上来说，EDM似乎和前端人员没有太大的关系，可要是说起"EDM模板"，我想很多前端人员都知道，同时也很烦感制作这样的页面，原因大家都懂的。"EDM模板"都是使用表格来制作，并且都是通过行内样式来控制页面的渲染风格，致使很多效果在"EDM模板"中有限制，而且在制作时有很多限制条件，同时还要兼容众多版本的客户端邮件系统。不比处理IE兼容简单。