现代 CSS

HTML电子邮件应该知道的一些事

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

从头开始构建一个HTML电子邮件模板

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

Responsive Email设计

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

实现Responsive邮件的不同策略

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

CSS3 2D Transform

在一个二维或三维空间,元素可以被扭曲、移位或旋转。只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴;而3D变形工作在X轴和Y轴之外,还有一个Z轴。这些3D变换不仅可以定义元素的长度和宽度,还有深度。我们将首先讨论元素在2D平面如何变换,然后我们在进入3D变换的讨论。CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件。同时让设计师有更多的功能装饰文本和更多动画选项来装饰Div元素。在CSS3 2D变形中主要包含的一些基本功能如下。

Ink框架快速创建响应式EDM模板

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

CSS Overlay技巧

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

Transform-style和Perspective属性

在《CSS3 Transform——transform-origin》一文中主要介绍了CSS3 Transform属性中的属性的使用,其实在属性中,属性仅是其中之一,要彻底理解属性,这是不够的,必须的理解其他属性的应用。今天将和大家一起探讨中和相关属性的使用。

CSS3 Transform——transform-origin

在CSS2.1中,我们的页面都是静态的,网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的,比如说,如何实际移动一些元素?如何更改元素的外观——旋转或缩放?多年来,Web设计师为了给修改页面的外观,都依赖于图片、Flash或JavaScript才能完成。不过,CSS3将要改变设计师这种思维,进入CSS3时代,借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。在2011年05月在站上发表了第一篇有关于CSS3 Transform教程,现已时隔近两年,有很多东西都有变化,而且理解也略有不同,接下来将会分几篇教程,向大家介绍CSS3 Transform相关的知识。

崇拜CSS

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

页面

返回顶部