响应式布局 - Mrxia
写在前面的话：随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用CSS3的MediaQuery来实现。本文主要介绍了移动开发和CSS3结合，来进行多种分辨率适配的例子。文中提到的响应式网页设计（Responsivewebdesign）是一种现代网页设计方法，基于CSS3的媒介查询（MediaQuery）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。-----------译自：http://webdesignerwall.com/tutorials/responsive-design-in-3-steps响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计，可以看看我最近发表的响应式站点列表（译者注：可以好好看看示例中的网站在不同分辨率下的展现方式）。对新手来说，响应式设计可能有一点复杂，但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计，我
重磅来袭！设计师不应该错过的响应式设计框架
框架越来越火，一个巨大的争议出现了：为什么一个专业的设计师还需要用这些框架呢？许多人宣称响应式框架是可怕的，因为他们根本不懂一点点html和css的知识。下面是另一些具有标志性的反对使用框架的意见：设计师可以写自己的框架，如果他们懂得一点点html和css的知识的话就更应该自己写。基于框架的网站加载非常慢。基于框架的网站看起来大同小异。伴随多余的div标签，5000+行的css后者更多的javascript文件，网站膨胀是常见的。尽管反对者的抗议很强烈，但是丝毫不影响框架的持续流行。我认为框架是有用的，即使是最有经验的web前端开发人员也可以好好研究一下。下面我将说说我支持框架的原因。
分析：EDM案例响应邮件激增用户互动及收入
响应式邮件设计是企业实现移动邮件优化的方式之一，它使用一组代码以完成电子邮件在台式机，平板电脑或智能手机上的不同阅览呈现，这意味着，无论用户在哪里、何时打开邮件，都能获得最优的用户体验。尽管如此，但据Econsultancy的调查显示，大量的公司目前并没有为移动设备优化的电子邮件，32%的调查对象称“不存在”该策略，39%说只是执行了“基础性”策略。而据国内最大的邮件营销服务商webpower中国区监测数据显示，国内有近40%邮件在移动设备上打开。响应式设计邮件比传统邮件在移动设备上的点击率、阅读率更高，跳出率更低。为了帮助企业市场营销人员，在工作的过程中，了解及掌握如何优化移动电子邮件，下面列出几个响应式邮件设计实践案例，结果显示了响应式设计对用户参与度的重要影响。WeirdFish：点击率提高10%这是一个精简内容细节的案例，但惊奇的是WeirdFish在采用响应电子邮件模板之后，其网站的点击率提高了10%。Crocs：响应邮件收入最高，移动“阅读”互动提升8.82%以全功能时尚
30个免费的自适应网站模板
对于美工来说，很多时候都要赶稿，比如某某专题要xx时间内上线，但是如果按平时那样制作的话肯定会花很多的时间，而且要加班到很晚……所以这种情况我们可以使用一些现成素材或是网页模板来代替，比如设计达人网上精选的模板及素材都很不错哦！今天我们整理自spckyboy上30个免费的自适应(响应式设计)网站模板，这些模板已经输出成HTML格式，所以你只需要准备好内容去修改对应的就可以了，当然你也可以改动它一些布局。PS:在下载这些模板的时候可能有些需要你提供EMIAL才放出下载链接。更多优秀网站模板：《最新漂亮的免费网站模板下载(HTML/HMLT5)》《20个优秀的响应式设计HTML5网站模板》《50个免费和高级HTML5+CSS3模板》TessellateTessellate是一个简约的单页面模板。Tessellate下载页ForeFore这个网站模板使用了Sass&Pear技术来编写。Fore下载页ShowPageShowPage适用于APP或产品的着陆页。Sho
邮件营销标题主题行管理技巧
过去我们谈了许多关于主题行的话题，如使用字词组合，图标和符号来引起用户注意；使用幽默或倾向性的语句；甚至尽可能做个性化。由于目前大多数的邮件营销平台都支持主题行测试，如webpower的dmdelivery邮件营销平台就支持使用A/B试验进行两到四个版本的邮件测试，以确定哪个表现最好。这使得对效果“增量”导向的邮件主题行进行优化变得更加容易。在邮件主题行中如何加入创意？如何像SEM一样，根据算法，通过次数和频率优化主题行词语？怎样针对特定类型的促销推广细分和具体时间等因素，使用特定的组合关键词？下面，笔者就分享像SEM组合关键字一样进行邮件主题行管理的技巧。1.保持新鲜。即使一年发送100个活动，也要把邮件主题行当作报纸头版一样重要看待。webpower的营销专家建议，实践中，应该有一组标准的基线单词和短语以备使用，并围绕这些词语不断丰富。考虑到电子邮件的发送频率，虽然我们不能指望每个标题都新鲜出众，但也应该尽力尝试！一个主题行通常需要3到10个字的词组；提供相关的告知；并刺激行动。2.从算法角度思考。很多
14个支持响应式设计的流行前端开发框架
前端开发并不容易，除了掌握基本的HTML、CSS和Javascript之外，因为不同版本的浏览器和平台，你需要知道如何做一个跨浏览器的网站。而最新的发展趋势——响应式设计，它不仅使Web项目开发更难，也需要花费更多的开发时间。
图灵访谈 ： 响应式设计专家Ben Frain：设计是为解决问题而存在的（图灵访谈）
BenFrain从1996年开始开发网页，是一名有着丰富经验的网页设计师和前端工程师，他与世界各地的客户和设计机构并肩工作。他在响应式设计领域的造诣尤其深厚，精于前端代码性能优化，著有《响应式Web设计：HTML5和CSS3实战》和SassandCompassforDesigners。于此同时，他还是一名科技记者，定期为一些关注Mac平台、前沿科技、网页设计和航空技术的刊物撰稿。在此之前，他曾是一名电视演员，毕业于索尔福德大学的媒体与表演专业。图灵社区：是什么促使你放弃自己的表演事业成为一位web设计师的？因素很多。最终让我决定从事web设计的原因是我想开始努力巩固自己在某一方面的技术，从而成为这个领域的专家。表演需要到处旅行，这样陪家人的时间就少了。图灵社区：你能列举几个响应式设计网站最好的例子吗？现在这样的例子太多了！CodeKit最近刚刚推出了新的网站，我非常喜欢。但是，我认为列举一些具体的站点是不太合适的（虽然我刚刚这么做了），因为设计是为解决问题而
Doc-To-Help 2013 v2增加了响应式设计和内容控件
ComponentOne发布了Doc-To-Help2013v2，它带有一个响应式的用户界面机制，其开发代号为NetHelp。NetHelp用户界面可以根据用户使用的设备来自动调节用户界面的外观。这一项特性意味着，只要发布一个版本到网页上，用户就会在笔记本电脑，平板电脑，智能手机和其他类似的便携式设备上看到不同的界面。Doc-To-Help2013v2包括内容控件，例如Note、Lightbox、Gallery、Carousel、TopicContents、Tabs和CodeHighlighter。它们是编辑和互动内容的控件板块，你可以把它们添加到HTML5内容编辑的源文件里。Lightbox控件显示一些缩略图，当用户点击一个缩略图模型，弹出的模态对话框会显示它原尺寸的图像。另一方面，Carousel控件显示一组自带链接的幻灯片图像；Gallery控件展示一系列缩略图图像，用户不用在浏览上花太多时间，就能选择他们想打开的图像。在链接目录的帮助下，用户使用新推出的TopicConten
EDM案例：响应邮件激增用户互动及收入
响应式邮件设计是企业实现移动邮件优化的方式之一，它使用一组代码以完成电子邮件在台式机，平板电脑或智能手机上的不同阅览呈现，这意味着，无论用户在哪里、何时打开邮件，都能获得最优的用户体验。尽管如此，但据Econsultancy的调查显示，大量的公司目前并没有为移动设备优化的电子邮件，32％的调查对象称“不存在”该策略，39％说只是执行了“基础性”策略。而据国内最大的邮件营销服务商webpower中国区监测数据显示，国内有近40%邮件在移动设备上打开。响应式设计邮件比传统邮件在移动设备上的点击率、阅读率更高，跳出率更低。为了帮助企业市场营销人员，在工作的过程中，了解及掌握如何优化移动电子邮件，下面列出几个响应式邮件设计实践案例，结果显示了响应式设计对用户参与度的重要影响。WeirdFish：点击率提高10％这是一个精简内容细节的案例，但惊奇的是WeirdFish在采用响应电子邮件模板之后，其网站的点击率提高了10%。Crocs：响应邮件收入最高，移动“阅读”互动提升8.82％以全功能时尚的轻便鞋知名的鞋零售商Crocs计
响应式设计简易指南（译）
为什么要使用响应式设计？我们想让我们的网站通过响应用户的行为、设备的屏幕大小和屏幕方向，从而在所有设备上都能用。一个碎片化的世界截止2013年，有成千上万种不同的设备在浏览网页，所以我们不可能设计出适应所有屏幕大小的网页。相反，我们必须得采用一种更加流畅的方式去设计。移动优先最近一个比较火的词叫移动优先。它的意思是，先为移动端设计样式，然后再根据需求去优化更大屏幕的样式。换句话说，假如你把移动端样式当成网站的默认样式，且以后不用去优化它，一步到位。那就更省事了！“假定默认使用一个灵活但简单的布局，你的确可以适配各种浏览器，但这还不算是完全做到了响应式布局。所以当我们谈论「移动优先」，实际上是在说「渐进增强」。”—EthanMarcotte用Min-width进行媒体查询（MediaQueries）现在来介绍一种特别的布局方式。通过min-width来界定不同屏幕该如何布局。它能就近检测出不同设备的屏幕大小（即mediaqueries，可直译为媒体查询），比在样式表末尾或一个单独文件中处理更简单。/*S
响应式设计简易指南
为什么要使用响应式设计？我们想让我们的网站通过响应用户的行为、设备的屏幕大小和屏幕方向，从而在所有设备上都能用。一个碎片化的世界截止2013年，有成千上万种不同的设备在浏览网页，所以我们不可能设计出适应所有屏幕大小的网页。相反，我们必须得采用一种更加流畅的方式去设计。移动优先最近一个比较火的词叫移动优先。它的意思是，先为移动端设计样式，然后再根据需求去优化更大屏幕的样式。换句话说，假如你把移动端样式当成网站的默认样式，且以后不用去优化它，一步到位。那就更省事了！“假定默认使用一个灵活但简单的布局，你的确可以适配各种浏览器，但这还不算是完全做到了响应式布局。所以当我们谈论「移动优先」，实际上是在说「渐进增强」。”—EthanMarcotte用Min-width进行媒体查询（MediaQueries）现在来介绍一种特别的布局方式。通过min-width来界定不同屏幕该如何布局。它能就近检测出不同设备的屏幕大小（即mediaqueries，可直译为媒体查询），比在样式表末尾或一个单独文件中处理更简单。/*
用3个步骤实现响应式网页设计
写在前面的话：随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用CSS3的MediaQuery来实现。本文主要介绍了移动开发和CSS3结合，来进行多种分辨率适配的例子。文中提到的响应式网页设计（Responsivewebdesign）是一种现代网页设计方法，基于CSS3的媒介查询（MediaQuery）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计，可以看看我最近发表的响应式站点列表（译者注：可以好好看看示例中的网站在不同分辨率下的展现方式）。对新手来说，响应式设计可能有一点复杂，但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计，我起草了一篇快速教程。你可以在3个步骤中学习到响应式设计和媒介查询（MediaQueries）的基本原理（假定你了解基本的CSS知识）。第一步：Meta标签（查看演示）大多数移动浏览器将HTML页面放大为宽的视图（vie
响应式设计中怎样布局？
多栏布局中最大的挑战之一就是确保它能在各种各样的屏幕尺寸下正确工作。为此，提出了响应式网页设计。简单来说，就是开发一个其文本、图像和其他的媒体能够适应任何移动设备、桌面计算机或一些未来设备的浏览器体验。在智能手机移动浏览器中看到的网页与在桌面浏览器中看到的不同，这是因为手机屏幕更小。如果想要在小屏幕上查看单栏中的文字或图像，你必须双击这个区域（见图12.23）。这种在页面上寻找和操作内容的“一指禅”方法并不是最佳的用户体验——尤其是对于使用移动设备的用户。随着各种特性和智能手机浏览器的发展，网页能够根据设备显示变得很重要。我们不用再根据桌面浏览器窗口尺寸建立网站，然后让它们在更小的移动浏览器上渲染。现在，我们可以让元素大小和布局针对设备作出改变。
风靡移动时代-为何响应式设计如此盛行？
移动设备大爆发时代已经来临！有数据表示，2011年5月，有35%的人使用智能手机，17%仍然没有手机，到2013年5年，已有56%的用户使用智能手机。这一数据表示2000年代移动互联网的增长速度是上世纪90年代的8倍。平均一半的全球用户都在移动设备上访问互联网。因而有公司专门设计用于小型设备上创建一个单独的网站，这样能更加友好的面向用户。响应式设计能更好的适合当前移动时代的需求，严格意义上说，一个负责人的设计师应该知道如何做一个友好的移动网站。今天，我们来看看国外的大师设计的响应式界面！只有借鉴才会激发出创作的灵感。让我们来看看为什么响应式设计如此盛行！1.首先移动网站是复杂的在2013年5月研究移动技术成果，皮尤因特网发现，美国成年人中91％有手机，成人手机用户达60％，用他们的手机访问互联网。41％的手机用户，在电视上看到的产品广告后，会在移动设备上搜索这种产品。所有的这些统计数据，都相当清楚的表示：所有的网站当前需要找到一种方法，能让他们的网站在移动设备上看起来不错，并跟上移动的趋势，响应
Brad Frost：TechCrunch响应式设计之路
BradFrost在2013年使用响应式设计技术对著名的技术创业网站TechCrunch进行了重新设计，以适应多屏幕尺寸移动阅读的需要，开发团队通过该项目得以重新审视新型网页设计流程，本文是他的精彩自述。（注：原文发表在技术创业微门户：踏得网（Techbrood.com））设定项目预期（SetExpectations）很多使用后PSD时代设计流程（Post-PSDEra）效果不佳的原因在于在项目开始的时候，没有能够跟客户和同事一起设定合理的项目预期。我们尽了最大的努力来让客户理解网页界面面临的现实挑战（不用多说什么，给客户看一下下面的图），那么由于我们的网站需要是流动的（Fluid），我们的设计流程也要与之相匹配。我们帮助大
响应式设计（一） - 风沙渡
响应式Web设计(ResponsiveWebdesign)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSmediaquery的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了三、用一个最简单的小demo来理解什么是响应式设计，以及是如何设计html代码：12
响应式设计简易指南
之前我有写过一篇文章——简单代码就能实现响应式设计，介绍了实现响应式设计的一个很简单方法。不过，当我看到了今天要推荐的这篇文章时，我才理解到了什么叫做专业，什么又叫做差距。今天推荐的这篇响应式设计简易指南，讲解了制作响应式网页的详细步骤，不过这不是关键，关键是非常通俗易懂。不多说了，看了就知道：为什么要使用响应式设计？我们想让我们的网站通过响应用户的行为、设备的屏幕大小和屏幕方向，从而在所有设备上都能用。一个碎片化的世界截止2013年，有成千上万种不同的设备在浏览网页，所以我们不可能设计出适应所有屏幕大小的网页。相反，我们必须得采用一种更加流畅的方式去设计。移动优先最近一个比较火的词叫移动优先。它的意思是，先为移动端设计样式，然后再根据需求去优化更大屏幕的样式。换句话说，假如你把移动端样式当成网站的默认样式，且以后不用去优化它，一步到位。那就更省事了！“假定默认使用一个灵活但简单的布局，你的确可以适配各种浏览器，但这还不算是完全做到了响应式布局。所以当我们谈论「移动优先」，实际上是在说「渐进增强」。”—EthanM
复杂产品的响应式设计【知识篇】
文/乐乘【导读】收到后台若干听众反馈，能否有一些设计或交互相关的资料分享。面对此类听众的需求，结合内容编排顺序。技术嘉年华特别准备了一个交互设计&前端的系列文章，预计发文7篇左右，本文是第一篇。如有反馈，请直接回复即可。许多设计师已经理解并认可响应式设计理念，拖动窗口大小欣赏那些实现响应式设计的网站时心中默念：喔，效果真棒。可是第一次启动一个响应式设计项目时心里开始打鼓：这该怎么开始？要学习哪些知识？究其原因，传统做法设计与技术界限相对分明，设计师出设计稿前端和开发负责实现彼此相安无事。响应式设计是设计与技术紧密融合的新做法，对传统设计方法形成不小的冲击。现在就来看下设计师第一次做响应式设计之前，需要了解哪些最重要的响应式设计知识。原理：网页是如何变成响应式的？ETHANMARCOTTE在第一次正式提出响应式设计概念的经典文章（http://alistapart.com/article/responsive-web-design）中，就清晰定义了响应式设计的三大要素：流体栅
程序的响应式处理 matchMedia
现代浏览器的响应式设计在CSS方面只要@一下media就可以简单实现。虽然响应式设计更注重CSS，但程序放面也可能存在根据不同media做出不同行为的需求。在现代浏览器上可以通过调用matchMedia方法得到一个对象，然后添加监听回调函数来切换不同media上的行为。其实这个matchMedia有点柯里化的感觉。实际上我们要做的是监控某个media的变化状态，但操作起来是先取得一个对象，然后再添加监听函数。下面就是使用的例子，拖动浏览器边缘修改浏览器窗口大小后，当宽度在500左右变化时候触发。
如何为你的响应式设计提速 - gonrun
响应式设计是最近的流行词，能够打造多屏幕一致体验。现在几乎每个人都喜欢响应式设计，而且可以是没有原因的支持，这跟Flash刚出现那会火热的局面有点相似。然而，响应式设计带来了表现力的问题，这需要通过调整图像、压缩图像、改变图像大小等手段来解决。然而，为了提高表现力，有的时候不得不增大文件的尺寸。浏览体验需要快速的载入，本文将讲述一些为响应式设计提速的方法。为什么响应式设计载入那么慢？在所有的设备上，响应式设计载入的HTML元素都相同。就算你的网站专供桌面或者专供平板，在其他设备上，载入的元素依然相同。这就意味着需要通过网络传递所有的内容，包括了图像和脚本。一项去年的调查表明，86%的响应式网站会将一个完整的桌面页传送到手机中。如果我们能够对数据进行精简、提升浏览速度，那么响应式设计将得到更好的推广。与此同时，响应式设计提高了页面大小，这也是一个亟待处理的问题。因为研究发现，如果3秒之内无法载入页面，57%的用户会选择离开。怎样提高载入性能？对于那些已