前端开发者学堂 - fedev.cn
    发布于

    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技巧

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

    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”的证据来阐述使用这些方法的好处——选择高流量网站只是一小部分——这反应了我的观点,他们代表了一种误导和盲目的崇拜

    发布于

    如何使用Sass和SMACSS维护CSS

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