Responsive

Flexible Images

玩过响应式设计的同学或多或少都会在一些媒体上纠结,比如说图片,视频等自适应问题。而且有关于这方面的解决方案各有各的说法,似乎是没有一种方案是绝佳的,这样一来让人倍感头痛。这或许就是前端的烦恼吧。我也一样,虽然整响应式设计蛮久的了,但对于图片方面的自适应处理还真没有找到一个好的方案,这回痛下决心,仔细找了一些相关教程阅读了一回。那么今天将整理一下,网络上有关于图片自适应(此处我称之为弹性图片)解决方案,希望这篇文章能帮助大家解决图片在响应式设计中给大家带来的烦恼。

calc()制作自适应布局   

CSS中自适应布局是一种常见的布局方式,但当浏览器视窗缩小一定程度的时候,内容会挤跨,特别是侧边栏。CSS3中新增加了一个calc()特性,可以让浏览器根据表达式自动计算,真正达到自适应的布局效果。

如何设计一个响应式的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》一文,觉得蛮好的,特译成中文与大家共享,希望大家喜欢。

页面

返回顶部