简化了响应式设计的Froont现在要简化设计的分享，它会不会成为设计师的GitHub？
去年5月推出所见即所得响应式Web设计编辑器的Froont近日结束了公测，同时升级为平台，面向设计师提供一整套响应式网站的设计与社区服务。去年推出beta版的Froont为设计师们提供了一个可视化的在线网页设计环境。可帮助设计师在无需安装任何工具的情况下通过浏览器方便地创建响应式网站设计、构造原型并分享给团队成员和客户，整个过程不需要编写任何代码，但是其输出却是代码—HTML/CSS，所有的设计素材通过这些代码和云组织起来。不过，尽管这种工具已经非常方便，但是我们必须面对的一个现实是没有几个设计师是从头开始设计的。他们需要模板，也就是可以参考的东西。对于设计师而言，以前可以分享的设计元素包括图标、WordPress主题，UI包，甚至是Bootstrap或者Zurb框架等。但是要想分享整站式的设计却很困难。原因很简单—缺少一个开放的设计标准。而Froont尽管大部分操作都是拖放式的，但其输出却是HTML5/CSS3，而后者正是Web的开放标准。因此，用户不仅可以通过Froont展示自己的设计或者获得灵感，同时还可以重用设计并在
Web设计的未来：响应式设计路在何方？
2014年，通过移动设备上网的人数将超过PC端。在未来，设计移动设备将成为Web开发人员的首要任务。响应式设计似乎被看做成未来的设计方向，但我不赞同。今天，我要解释为什么我认为响应式设计并不是Web设计的最佳解决方案。什么是响应式设计？维基百科对响应式设计是这么介绍的：响应式Web设计是网站制作使用的一个叠层样式表(CSS3mediaqueries)，结合流体网格适应各种布局，还可灵活使用图像。用户可跨越不同设备和浏览器的限制，访问相同内容，布局也利于阅读和浏览，只需细微的调整、平移或滚动。网站设计将根据设备特定的分辨率或是屏幕尺寸进行调整。按上述定义来看，响应式设计看来很有发展前途。在某些情况下，我也是响应式设计的拥护者。比如，一个桌面Web应用无法有效地呈现在移动设备屏幕上时，响应式设计就起到了作用。谷歌地图就是一个很好的例子：可以500%提高开发效率的前端UI框架！桌面显示手机显示如果网站内容很大程度上是依赖图片，响应式设计绝对是一个很好的解决方案。但是，当内容是大多数文本的网
提升移动设备响应式设计的8个建议
现在，对于任何种类的网站开发来说，响应式Web设计都不能再局限于纸上谈兵，其是开发阶段的一个关键步骤。作为设计师和开发人员，我们必须要了解有效响应式设计的重要性以及其在保证优秀终端用户体验方面的作用。随着web向着移动端逐步发展，现在响应能力对于网站来说已经必不可少。很多人没能在移动用户兴起时抓住时机进行顺应潮流，因此现在难以保证网站在移动设备上的体验流畅性。我们必须承认，移动设备已经彻底改变了我们使用web的方式。2013年开展的一项调查显示，多达百分之73的用户会通过移动设备浏览网络，因此，一个正常、好用的响应式web设计可以说是不可或缺的。响应式web设计现在连潮流都算不上，而应该说是理所当然。但现在仍然存在着很多瑕疵可能会让体验无法达到舒适的程度，这也是为什么我们今天要探讨几项能够帮助你实现完美体验的方法和趋势。直观性和易用性在使用移动设备时，对于杂乱、复杂或者不直观的设计造成的混乱不佳的用户体验一般用户是没什么耐心的，这对于双方来说都不是好事。设计师和开发人员一定要牢记，在移动web环境中，动力是一个很关键的因素，漫长的
小屏幕改变了哪些邮件设计规则？7个最新潮的响应式设计
电子邮件营销的未来在于适应周围环境的能力。全球超过一半的电子邮件在移动设备上被打开，而根据全球领先的多渠道智能化营销服务商webpower的邮件客户数据分析，中国地区电子邮件移动设备打开率也增速迅猛，达到30%以上，而这一比例预计在未来几年将继续增长。同时，不容忽视的是，至少50%的移动用户将关闭或者删除没有优化阅读的电子邮件。对于邮件发送者来说，解决移动小屏幕的邮件用户体验的一个最方便的解决方案就是响应设计，通过包括媒体查询、流体布局、图片和定制化的文案一整套技术和原理，电子邮件可以在桌面和移动设备得到最佳展示。响应技术允许邮件设计师隐藏、堆叠、展开、折叠或修改内容，以优化电子邮件内容在小屏幕上的显示效果。多渠道智能化营销服务商webpower提供了7个关键技巧和最佳实践，帮助你通过响应式设计以移动客户期望的方式提供给移动客户想要的信息。1.以移动设计为中心创建桌面版邮件把需要响应的部分铭记在心，特别是在设计阶段。首先你要先形成一个移动设计的概念，并在此基础上创建桌面版，这正与我们以往的做法恰恰相反。保持移动版本尽可能整洁、简约，
自适应网页设计（Responsive Web Design）
转载自http://www.ruanyifeng.com随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone/iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？一、”自适应网页设计”的概念2010年，EthanMarcotte提出了“自适应网页设计”（
响应式设计的性能优化
2010年，EthanMarcotte提出了「响应式网页设计」（ResponsiveWebDesign），通过MediaQuery和FluidLayout判断屏幕宽度，自行调整布局.一般，在页面头部加入viewport标签
9张动图让你读懂响应式设计-20141202早读课
SandijsRuluks，Froont联合创始人、设计师，制作了这样9张Gif来说响应式网页与传统的网页在原则上有何不同。如今，通过响应式设计，各种硬件上的网页哪怕都采用一套系统，都可以达到较好的阅读效果。1.整体区别虽然看起来这两张图的结果是一样的，但其实它解释了响应式网页和传统网页制作的思路上的不同。如果想进一步地知道区别，请往下读。以下图片均是左栏是“响应式网页”原则，右栏是传统网页原则。2.是“流”用像素值规定死页面上某个框的大小的时代过去了——你会发现在响应式网页中，会采用“流”这种思路。页面的某一个部分动了，其他的部分会随之动起来。3.整体相关性屏幕大小不同，但整体呈现出的比例应该要是一样的，响应式网页中的“整体相关”思路，让我们看到每个组成部分的大小应是可变的。4.断点“断点”是“响应式网页”的有效工具。有了“断点”，我们在PC端看到的三栏的内容就会在移动端上只出现一栏，而且CSS样式也会随之改变。5.限定最大值在移动端上充满屏幕的边框，到电视这种终端上充满边框就不怎么样了。所以虽然边框可以
用Google Chrome移动模拟工具做更好的响应式设计
GoogleChrome移动端模拟Chrome32发布以后，开发者工具中新增了一个新工具——mobileemulation。这个工具绝对是为移动设备响应式设计测试而生的。如果你还没有打开该工具,那么请跟随一下步骤：按F12(或者Cmd+Alt+lonaMac)点击DeveloperToolsunderView->Developer右键网页，点击InspectElement在开发者工具的最上面，会看到一个像手机的新按钮。点击它开启移动模拟模式。如下图：你可以看到开发者工具正常工作，但是有附加选项，网站被渲染成移动设备模拟状态。设备设置在左上角，设备设置选项中有46个移动设备可供模拟，你可以设置以下内容：屏幕分辨率横向和纵向旋转设置像素比在可视化区域缩放、全屏操作网络设置接下来是旁边的蓝色字体部分，网络设置。我们可以设置网路速度offline到nothrottling，可以帮助我们观察网站加载速度快慢。network下，我们可以手动设置代理，可以观察
让LOGO玩转响应式设计
响应式网页设计很多设计师都知道，但你听过LOGO也可以响应式的吗？今天分享8个大品牌LOGO例子给你参考，也许以后会用到哦！本次例子摘自Responsivelogos.co.uk网站，该站展示了多个品牌标志是如何展现响应式设计。例子有可口可乐、香奈儿、耐克、李维斯、迪斯尼等作品，从中获取些灵感吧，以后设计LOGO可能也要考虑RWD了！可口可乐LOGO首先来看看可口可乐标志，在大尺寸中，包含“饮料”、“可乐”一些字符。中尺寸，去掉其它标语，因为标语字体太少了，直接去掉更好。小尺寸，去掉一些修饰图形线条之类的元素。最小尺寸，标志直接用简写或是简化的图案。香奈儿LOGO大尺寸图片样式中尺寸图片样式小尺寸图片样式最小尺寸图片样式耐克LOGO大尺寸图片样式中尺寸图片样式小尺寸图片样式最小尺寸图片样式BANG&OLUFSENLOGO大尺寸图片样式中尺寸图片样式，版式改变了一下小尺寸图片样式，英文缩写（简写）了最小尺寸图片样
响应式设计三部曲
原文：ResponsiveDesignin3Steps译文：响应式设计的三个步骤译者：dwqs现在，响应式Web设计无疑是非常流行的。如果你对响应式设计还不熟悉，可以看看我之前发表过的关于这方面的responsivesites。对于新人，responsivedesign可能听起来有点复杂，但实际上，它比你想的要简单的多。为了帮助你快速入门响应式Web设计，我写了一篇快速入门教程。我保证你通过三步就可以学会响应式设计的基本逻辑和媒体查询(mediaquery)(假设你有基本的CSS知识)。第一步：Meta标签（看demo）大部分移动浏览器会把HTML页面缩放成较宽的viewport的宽度，这样内容就可以屏幕上正确的展示了。你可以使用viewport这个meta标签来重置这个行为。下面的viewport标签告诉浏览器使用设备宽度(device-width)做为viewport的宽度，并且禁用初始的缩放比例。在
中加入这个meta标签。metaname="viewport"content="widt响应式设计的现状与趋势
从2012年开始到2014年，各大家对Web设计的趋势预测中，都提到响应式设计；2015年网页设计趋势预测中，响应式仍在继续。这个经历了几年依然大热的响应式，在过去的几年里，快速巩固了自己的地位，并掀起了一股网页设计新标准的浪潮。这里本人基于一些资料文献及自己的陋见，谈谈响应式设计的一些现状和趋势。源起2010年5月，伊桑.马科特（EthanMarcotte）在“AListApart”写了一篇开创性的文章（题为“ResponsiveWebDesign”），他利用三种已有的工具：流动布局（fluidgrids）、媒介查询（mediaqueries）和弹性图片（scalableimages）创建了一个在不同分辨率屏幕下都能漂亮地显示的网站。EthanMarcotte力劝设计师们要去利用那些Web独有的特性去进行设计：“我们可以将不同联网设备上众多的体验，当作是同一网站体验的不同侧面来对待，而不要为每种设备进行单独剪裁而使得设计彼此断开，这才是我们前进的方向。虽然我们已经能够设计出最佳的视觉体验，但还要把基于标准的技术也嵌入
聊聊响应式网站，什么情况下更适合采用响应式
中介交易SEO诊断淘宝客站长团购云主机技术大厅一、什么是响应式网站在网站建设过程中根据用户行为以及设备环境进行相应的操作和布局,使网站可针对不同平台、尺寸和定向进行智能化调整,实现了在智能手机和平板电脑等多种智能移动终端浏览效果的流畅,防止页面变形,并可在任一浏览终端进行网站数据的同步更新。二、当然也并不是所有的情况都理所应带应该采用响应式设计，那么在什么情况下更适合采用响应式呢?镭拓科技告诉您!1、你想节约成本地去适应更多场景资源都是有限的，但总是希望能利用有限的资源去获得更大的价值。虽然比起开发设计一个普通的网站来说，要打造一个响应式站点，所需要的人力和时间资源都会有所增加，但比起为不同设备分别打造多个版本的成本还是要低很多;从维护的角度来说，也会轻松很多。2、你并不清楚要设计开发的全新产品更适合哪个场景与其通过预测挑选核心设备再进行分别设计，倒不如先花些心思将网站打造得更具弹性，使其在各种设备中都拥有尽可能优秀体验。因为在各方面都未知都情况下，做预测会加剧过程风险，使得结果存在巨大的挑战性。3、你希望网站可以兼
总结响应式设计中应该注意的几个点
平时经常会做一些响应式的布局和跨屏页面。也学习了一些响应式设计方面的知识。但是每当有人问我『响应式设计时应该注意一些什么问题』时，总是话在嘴边却不知道该怎么说。正巧最近在看大漠的《图解CSS3》，书中近结尾处有一部分是关于Responsive响应式设计的内容。看完之后，今天试着按照自己脑中的顺序，加上自己的总结，大概记录一下。厘出一个头绪。以下是我觉得应该注意和遵守的几个点。包括从设计布局时的构思，以及跟非响应式网页中的一些不同点来说。1.加metaviewport标签禁用缩放自适应对于移动设备来说如果不禁用缩放的话将是一个糟糕的体验。并且应该把页面初始缩放比例置为1，这也是响应式网页的先决条件。2.确定核心布局，布局保持简单干净，减少无关紧要的元素考虑到页面需要在不同设备尺寸中都要有良好的表现，应该尽量精简元素的使用，把重心放到维持核心内容的布局一致性，和保持良好简洁的界面体验上。3.设计栅格布局方案常见的响应式框架都会带有栅格式的布局系统，为在不同情况下进行的差异化布局和排列提供条件。例如Twit
【史上最干】Material Design复杂响应式设计
MaterialDesign2011年，Gmail邮箱的按钮变得更加扁平化。2012年，Google引入分层的卡片设计，使用更多的空白和精心设计的层次排版结构。经历了几年的迭代和提炼，Google寻找到了一种可以贯通的理论体系，即把系统内的各种设计都规范成一种变形的纸片，并套用现实中纸墨的物理模型进行交互，这就是2014年GoogleI/O大会隆重发布的MaterialDesign。MaterialDesign提出了平面像素的Z轴概念，通过纸片在物理世界中形态的抽象和提炼，定义了各种信息层级和常用状态的表达方式，并详细讲解了各个细节的处理方法，就像一本考试大纲，囊括了产品中常用的UI细节，甚至一些UX细节。这里并不赘述，想看详细的DesignGuide请点击这里（要搬梯子），翻译版的点击这里。如果说UX和UI的展现，是连接产品与用户的纽带，那么产品的UX以及UI应从产品的核心逻辑延展并且推演而来。如果说产品的核心逻辑或者技术的实现难易会成为设计展现的限制，那么UX和UI应是在各种限制下所权衡出的最优解。而Materia
2014美国数据新闻不完全总结 【附外媒数据新闻作品集】
2014年美国数据新闻界欣欣向荣的景象从年初的NICAR(NationalInstituteofComputerAssistedReporting)会议就可见一斑。地处华盛顿和纽约中间，主办地巴尔的摩汇聚了美国数据新闻界最优秀的记者、编辑、程序员和客座教授，还有抱有数据新闻理想的在校学生，以及积攒了几个月经验正在找工作的实习生。第三方数据提供商开培训课，教媒体编辑使用自己的API；第三方地理位置信息提供商组织讨论，介绍专为媒体打造的讲故事新平台。14年的与会人数创出新高，面试在酒店大堂、楼下咖啡馆乃至周边酒吧低调进行，团队负责人喝酒唱歌交换名片，筹划中的项目几个月后渐露端倪。专业化数据新闻平台建立2014年最值得行业内外称道的标志性事件是上半年几大专业化数据新闻平台的建立。从纽约时报转投独立门户的NateSilver在新东家ESPN的支持下建立了FiveThirtyEight.com，专注政治选举、体育赛事预测；前华盛顿邮报编辑在VoxMedia旗下成立了vox.com，为公众提供简洁明了能看懂的新闻；纽约时报新栏
DevExpress Demo示例展示：支持响应式设计的DevExtreme Web UI开发框架 | 附在线演示
DevExtremeWeb为触摸设备和传统桌面构建响应式的Web应用程序，全程采用HTML5,CSS和JavaScript编写。主要提供的UI组件有DataGrid、PivotGrid、图表数据可视化、FormLayout、日程日历、多功能组件。下面通过几个示例来感受下它的强大！你也可以下载Universal安装包或者到DevExpress中文网查看更多示例和教程哦！GolfClub一个用于在线预订高尔夫课程的系统。用到的HTML5组件：SchedulerDateBoxPopupSelectBox
超级干货！深聊Material Design复杂响应式设计
编者按：MaterialDesign初出茅庐，现在大多数是试水之作，刚好近期有同学接手了一个响应式Web站点的改版设计，笔者参考MaterialDesign总结以下三点，关于如何实现复杂响应式站点的MaterialDesign，希望对大家有帮助。说到MaterialDesign，有一篇强烈推荐：《重磅教程！帮你全面彻底搞定MATERIALDESIGN的学习笔记》2011年，Gmail邮箱的按钮变得更加扁平化。2012年，Google引入分层的卡片设计，使用更多的空白和精心设计的层次排版结构。经历了几年的迭代和提炼，Google寻找到了一种可以贯通的理论体系，即把系统内的各种设计都规范成一种变形的纸片，并套用现实中纸墨的物理模型进行交互，这就是2014年GoogleI/O大会隆重发布的MaterialDesign。MaterialDesign提出了平面像素的Z轴概念，通过纸片在物理世界中形态的抽象和提炼，定义了各种信息层级和常用状态的表达方式，并详细讲解了各个细节的处理方法，就像一本考试大纲，囊括了产品中常用
【译】响应式设计争议：留住用户与失去用户
译前言：2015年响应式设计趋势的延续，也将带来更多的争议和思考，此文所引论据较为客观，点出了响应式概念的初衷和近年来跨屏设计的状况，并提供了解决思路和可参考的具体方法，原文下的评论也有诸多争议，有兴趣可以移步一览。原文：http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/作者：MaximilianoFirtman你脸上挂着微笑心情愉悦地缩放着浏览器窗口时，认为网站达成了移动端友好体验的目标。在探讨之前我要提前推论：如果你只是把响应式网页设计定为终极目标并且是唯一的移动端方案，是在流失用户，也许还有金钱。幸运的是我们能够修正这些错误。这篇文章的内容将涉及移动网页与响应式设计的关系，始于如何提供灵巧的响应式设计，及移动端的性能为何如此重要、响应式设计何以不能视为网站的目标，并止于技术本身的性能争议，以便辅助理解问题的真正所在。2000年起，设计师和开发者就已对移动
【CUED译】响应式设计争议：留住用户与失去用户
译前言：2015年响应式设计趋势的延续，也将带来更多的争议和思考，此文所引论据较为客观，点出了响应式概念的初衷和近年来跨屏设计的状况，并提供了解决思路和可参考的具体方法，原文下的评论也有诸多争议，有兴趣可以移步一览。原文：http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/作者：MaximilianoFirtman你脸上挂着微笑心情愉悦地缩放着浏览器窗口时，认为网站达成了移动端友好体验的目标。在探讨之前我要提前推论：如果你只是把响应式网页设计定为终极目标并且是唯一的移动端方案，是在流失用户，也许还有金钱。幸运的是我们能够修正这些错误。这篇文章的内容将涉及移动网页与响应式设计的关系，始于如何提供灵巧的响应式设计，及移动端的性能为何如此重要、响应式设计何以不能视为网站的目标，并止于技术本身的性能争议，以便辅助理解问题的真正所在。2000年起，设计师和开发者就已对移动
响应式设计争议：留住用户与失去用户
译前言：2015年响应式设计趋势的延续，也将带来更多的争议和思考，此文所引论据较为客观，点出了响应式概念的初衷和近年来跨屏设计的状况，并提供了解决思路和可参考的具体方法，原文下的评论也有诸多争议，有兴趣可以移步一览。你脸上挂着微笑心情愉悦地缩放着浏览器窗口时，认为网站达成了移动端友好体验的目标。在探讨之前我要提前推论：如果你只是把响应式网页设计定为终极目标并且是唯一的移动端方案，是在流失用户，也许还有金钱。幸运的是我们能够修正这些错误。这篇文章的内容将涉及移动网页与响应式设计的关系，始于如何提供灵巧的响应式设计，及移动端的性能为何如此重要、响应式设计何以不能视为网站的目标，并止于技术本身的性能争议，以便辅助理解问题的真正所在。2000年起，设计师和开发者就已对移动端存在的问题过分简化，而现在有些人则认为响应式网页设计是一切难题的银弹。我们需要正视的是，达到移动网页的轻快体验应盖过其他任何目标。向所有移动设备传送一个快速可用并全兼容的体验是一个挑战，在实施响应式技术时也是如此。而在一开始便关注性能将协助我们更易达成目标。响应式网