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

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

电子邮件是一个非常不错的媒体。它可以直接进入收件箱和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团队根据自己产品总结的一些响应式邮件制作的经验。

设计模式通常是一组最佳实践和技术，主要目的是用来解决一些最常见的设计“问题”，通常是在上下文中提出的设计原则。这些原则之是一“停留在页面”的原则。这一原则是建立在页面刷新都打破用户的心中想要的流程基础上，造成所谓的“变盲”，我们需要用户无论保时何地可以避免打破这种视觉流程。我们可以在保留用户在网页和模型的过程中做出明智的选择。一个方式，让用户在同一页面上试图让内容在当前页面的背景下，通过展示一个“迷你页面”，或一个弹出的对话框。这个轻量级的层就是我们所说的一个“浮层”。

公认的拥有一个编写和管理CSS的方法比什么都要更好。尽管如此，一些开发人员的实践是不利于语义化质量和长期的可维护性。我们要讨论一些被提倡的"CSS框架方法”的问题和作为Web开发人员，我们如何可以更好的解决这些问题。今天最流行的CSS开发框架技术当属OOCSS，尽管还有其他类似的技术存在，如BEM。这些方法试图对CSS采用面向对象的编程原则。尽管样式语言和面向对象的软件设计原则在概念之间存在一定的问题，这些微妙的东西对于一个欠缺经验的开发人员来说可能不会立即显现出来。最令人不安的是，这些方法已经可以广泛的看到博客给其冠以"最佳实践"的评价。“abscence”的证据来阐述使用这些方法的好处——选择高流量网站只是一小部分——这反应了我的观点，他们代表了一种误导和盲目的崇拜。

项目的维护与管理一直以来就是团队中最让人烦恼的事情，特别是对于一个有一定历史的网站，很多团队想动却又不敢轻意的去动，大多数都是采用在原来的基础上迭代开发，致使代码越来越难以维护。也为此产生恶性循环。今天根据Ben Smithett的《How to Scale and Maintain Legacy CSS with Sass and SMACSS》所译，学习如何通过Sass这样的CSS预处理器和SMACSS这样的思想结合在一起，更好的开发和维护一个项目的CSS。希望对大家有所帮助与启发。

这篇文章介绍的技术特性在Yahoo通过实践以及有问题的技术代码到今天为止我们还在使用。你可能有兴趣阅读Jonathan Snook的《Decoupling HTML From CSS》、Tim Huegdon的《On HTML Elements Identifiers》和Robin Rendle的《Atomic Design With Sass》等等。请记住：一些提到的技术并不认为是最佳实践。根据Thierry Koblentz的《Challenging CSS Best Practices》所译,介绍作者是如何挑战最佳CSS实践，希望大家会喜欢。