Responsive

如何设计一个响应式的HTML电子邮件

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

响应式电子邮件设计

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

Responsive Email设计

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

实现Responsive邮件的不同策略

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

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

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

基于设计的媒体查询

Responsive(响应式设计)对于今天来说并不是一个新东西,在互联网上有关于响应式设计的教程铺天盖地。而且国外有关于这方面的Web应用也是非常的多。今天也老话重谈,Spy根据的《Design-Based Media Queries》所译,向大家介绍Compass Design网站如何实现响应式设计,希望对大家有所帮助。

七个高度有效的媒体查询技巧

随着移动设备以及用户终端种类的不断增加,响应式设计在Web是运用越来越广泛。而响应式设计中媒体查询又起着举足轻重的作用,可以说离开了媒体查询,响应式设计就没有了他的灵魂。换句话说,响应式设计做的优秀不优秀,看媒体查询的使用就能知道。到目前为止,智能移动设备的普及化,我们的响应式设计应该考虑移动先行。那么移动先行如何实现呢?媒体查询又对其有什么使用呢?欲想了解,烦请阅读根据的《7 Habits of Highly Effective Media Queries》译文,让你把媒体查询运用的更灵活。

Text-align:Justify和RWD

项目列表两端对齐,给一些同学带来了很多困惑,我在群里也时常看到有人问这样的布局问题,记得很早前在《如何在Drupal中避免重复列末尾的Margin》中有做过一点简单的介绍。后来在张旭鑫的博客中,找到两篇《display:inline-block/text-align:justify下列表的两端对齐布局》《拜拜了,浮动布局-基于display:inline-block的列表布局》中介绍了使用text-align:justify和display:inline-block实现两端对齐。受益无穷。但随着响应式布局的出现,这样的布局又提出一个新的要求,要实现响应式布局,最近邮箱常收到的《Text-align: Justify and RWD》一文,觉得蛮好的,特译成中文与大家共享,希望大家喜欢。

响应式设计的未来——Flexbox

响应式设计对于2013年的Web前端人员来说并不是一个新名词,现在国内外有关于响应式设计的教程也是铺天盖地,小站也也分享了一些响应式设计的教程。那么大家有没有思考过响应式设计的未来将会是一个什么样?或者说,特别是CSS3的Flexbox广泛得到支持的情况下会有什么革命性的变化呢?如果您还没有对这个问题进行任何的思考之前,你又想了解一下这方面的变更,不仿花点时间阅读一下这篇文章。本文根据Ben Gremillion的《Responsive Design of the Future with Flexbox》所译,向大家初步的介绍了一下FlexboxMedia Queries结合制作响应式设计带来的变化。简单的了解一下Flexbox哪些属性会给响应式设计带来革命性的变更。整篇文章简单明了,以一个简单案例的形式向大家展开,不过原作者写的有点过早,如果现在我们自己去做的话,可以在这个基础上做一定的修整,将会变得更加简单与强大,你愿意动一试吗?如果愿意的话就看完文章后动手一试。我想你会找到你需要的东东。

CSS3 Media Queries 片段

Responsive设计在现代Web设计中可谓是越来越流行,但很同学们并未理解其真正的设计概念,往往把Responsive视为一种自适应布局。当然有很多同学也在尝试动写Responsive的案例,但如何取其断点左右纠结,如何设置哪几个断点?又从何入手?

Responsive中的断点都依赖于CSS3的Media Queries来决断。曾在CSS3 Media Queries模板使用em单位创建CSS3的Media QueriesiPads和iPones的Media Queries有过这方面的介绍。今天特意根据一些Responsive框架整理了一些常见的Media Queries片段,以供大家参考。

页面

返回顶部