下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922
论坛 >办公软件 >提高你的电子邮件的工作流程和模块化设计duang duang!

提高你的电子邮件的工作流程和模块化设计duang duang!

课课家团队03发布于 2015-05-18 14:19查看:756回复:3

无论你是在一家财富500强公司或一二人的团队开展你的第一个Web应用程序,电子邮件联系你的客户基础的最重要的工具之一。但随着电子邮件数量不断的增长,让他们都出了门,似乎有点势不可挡。通过放置一个坚实的电子邮件设计工作流程,你可以定期做一些从事和移动友好的电子邮件轻松工作。

复杂性与适应性

除了邮件数量的不断增加,个性化和高质量和响应式设计的需要引入,曾经是一个简单的HTML和CSS,但在你最喜欢的文本编辑器的东西似乎就变的更复杂的过程。许多自定义的模板,编辑工具,甚至完整的电子邮件的框架已经出现了应对这种新的复杂性。

所有这些新工具都有各自的优点,而且许多可以组合成一个工作最适合你和你的团队。但即使在你的处置新工具大集合,你如何组织你的工作流程允许持续迭代和快速周转的。

输入模块的设计

模块化设计是建立一个独立的组件,可以堆叠系统的方法,重新使用或不使用的情况。我们的目标是能够很容易地改变或适应个人的设计模式,在不改变系统作为一个整体。采用模块化设计、可重用的模式,为你的电子邮件的设计流程可以提高质量和你所发送内容的一致性,同时加快你的每日产量。

构建模块化设计流程,包括三个基本步骤email:

共创设计系统。

建立架构。

在你发送测试和迭代。

让我们看看深度如何可以在过程中完成每一步。

1、创建一个设计系统

简化迭代的最简单的方法是打破你的每一个常见的设生成一个独立的组件系统,每一个模块,由内容和媒体,你可以扣合在一起,变成无数的配置。这样做会使你建立一个几乎无限数量的电子邮件轻松。


想想你的设计为乐高积木,由内容和媒体。

预期的使用案例

设计模块化的电子邮件系统时,第一步是预测你的例子。问问自己是什么类型的电子邮件,你通常会发。他们大部分都是交易的、促销的,还是信息?虽然所有的电子邮件可能有相同的基本要素如页眉和页脚,事务可能需要运输信息邮件,订购详情联系人,付款细节,断面,和产品upsells或同类产品。


更简单的通讯可能需要,等精选的故事,入门副本,英雄形象和次要案例。定义内容需要对电子邮件你发将使你预见常见的用例需要规划路上。

一个模式库的设计

一旦你确定共同使用的情况下,你可以根据你的需要来设计各个组件。不管你使用PS图象处理软件或跳转到浏览器中,记住每个部件尽可能包含。设计每个例子的几个变化也可能是有帮助的。

有如“有故事”的成分,有几个选项,允许灵活性和让事情变得停滞的时间。在你的图书馆模式最终将成为在你的框架部分,容易被称为当需要时。

把你的例子的模块化模式

保持你的图形库是最新的

作为新的使用情况时,利用你现有的模式是必要的。然而,可能会出现意想不到的情况下使用,模块化系统的一个好处是,你只需要设计一个组件来解决这种情况。你创建并增加模式确保,整体设计系统的最新组织。部件散射或失去同步,将使系统难以使用。到一切保持同步是最简单的方法把系统变成框架。

2、建立一个框架

从这里,你将设计模式为开箱模板系统或框架是可能的。如果你不是在Outlook或Gmail的混沌的世界感兴趣,与他们所有的怪癖,或者如果你需要得到的东西出了门的最小配置,然后选择像Zurb下一油墨会为你做很多用处。

但如果你把一个体面的体积的电子邮件,然后创建自己的自定义框架可以带来巨大的收益。通过创建自己的框架,你可以添加自定义标记省时帮手,保持轻松的工作,甚至钩直接进入您的电子邮件服务提供商。

基地布局模板

一个基本的模板将作为你的基地的布局结构,将使全球的元素是所有电子邮件共享。preheaders,页眉和页脚通常会保持一致的电子邮件。如果这是你的设计的话,那么你可以安全地放进你的布局模板。比较安全的做法是打造出来的,包括这些元素的谐音,如果这些要素可能会移动或改变特定的电子邮件,结束标记在条件语句。

你的邮件模板应至少包括以下内容:

DOCTYPE

HTML5是设计回应电子邮件最友好的。请记住,某些客户会去掉或改变。DOCTYPE

很多是在这里包括重要:Meta标签正确的字符编码,标题标签的人在一个浏览器,查看你的电子邮件的独立版本重置样式,嵌入式媒体查询方式,任何风格被内联和视口元标签设置视口的宽度。

除了标准的标签,将你的整个的电子邮件在100%宽度表和细胞结构,如下图所示。与体类表将作为主体,从而克服某些客户删除标签的缺点。

产量

这就是你所有的个人电子邮件模块将拉。

基于模块的部分

保持你的个人设计的图案标记里面的部分,保持真正的模块化设计系统。这将允许每个模块是独立的标记。以模块化的方式与您的设计和您的标记成为真正强大。曾经的你应该可以移动,每种设计模式在模板不同而破模块,模板或任何其他模块周围。当您设置框架建立每个模块,你在这样计划。

从我们最后一个例子以用例为特色,故事化的标记看起来像这样:

非结构

以下smacss OOCSS或将保持你的非模块化。一般来说,保持你的风格尽可能模块化,就像你设计和标记。

写CSS的时候,一封电子邮件中框架是所有媒体的基于查询的方式必须从属性选择器(如TD [例]类= {})为了避免雅虎邮件渲染问题。一个简单的解决方法是非的能力,巢风格。所有媒体查询嵌套在一个单一的基于属性的选择器可以防止它们被应用到每一个人的风格。写你的SASS这样会增加可读性和速度,同时保持在客户的视觉一致性。

按照该方法,为移动优化模板和内容区域上方的基本查询媒体将这:

把它放在一起

有了一个基本框架和模块化的设计模式,现在是时机捕捉所有的乐高块。创建的每一个电子邮件,你是在为你的框架页。这个页面应该用你的模板应调用任何模块化的模式,是你需要的。

在一个模块化的思维方式将使你建立电子邮件像乐高积木。


收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

共有3条评论

  • 自动执行常见任务

    你可以在你的工作中获得最大的效率是自动化常见任务。这通常意味着内联CSS,优化图像,发送测试模板和模块,并与你的电子邮件服务提供商整合。最常见的任务可以很容易地与Rake任务集成。

    CSS内联

    最安全的方法是内联样式尽可能因为某些电子邮件客户端剥离方式从文件头。如果你曾经在另一个表的写作风格常见的Web工作流,然后习惯,它将是艰难的。它可以成为模块化的障碍,如果你想使用Sass风格,那么这显然是不可能做手工。

    幸运地,我们已经自动内联样式,几个选项在构建时间。如果使用Ruby基于最佳选择诱惑后机,是包含在项目premailer你瑰宝。主动premailer贯穿你样式表风格而保留任何内联和现有样式称。这样的节省大量时间,这样标记可控。

    测试

    有测试你的邮件看起来的几种方法。在我的第一个阶段是检查绘制在镀铬设计。一旦设计完成,它的时间跳到一个更自动化的工具来检查呈现全线。试金石是一个Web应用程序,如browserstack但专注于提供电子邮件在各种各样的客户截图。

    你可以发送你的电子邮件,以各种不同的方式做,但如果你用繁重的框架中,那么最简单的方法是使用咕噜石蕊。咕噜石蕊自动化测试过程中得到您的帐户,让你检查在您所选择的客户绘制。


    2015-05-18 14:23赞 (0)回复沙发
  • 讲的好详细噢,非常的清楚,谢谢楼主分享。学习到不少知识。

    2015-05-18 14:31赞 (0)回复板凳
  • 路过,帮顶……

    2015-07-31 17:16赞 (0)回复地板
  • 课课家运营团队
  • 酸酸~甜甜
  • K哥馆
  • 课课家团队03
  • 大萌
  • 知兰
  • 风铃美
  • Mr ken
  • YUI
  • cappuccino
  • mr jack
  • IT宅男
  • Mright
  • love洒脱留守
  • 人生如梦183
  • 选择版块:

  • 标题:

  • 内容

  • 验证码:

  • 标题:

  • 内容

  • 选择版块:

移动帖子x

移动到: