复杂产品的响应式设计流程
都说2013年将是响应式设计爆发的一年。一淘设计团队在去年一淘首页改版时初步尝试了响应式，最近在一淘“玩客”项目中有了更加深入地应用，第一次在复杂产品中实现了全站响应式。中间积累了一些经验也踩了不少坑，于是就有了这个响应式设计三部曲，此系列文章包含理念篇、知识篇和流程篇。响应式网页不像传统网页只需考虑一种状态，不是交付一套设计稿就完事儿了，它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里，交互每个阶段该产出什么？交互与视觉如何协作？前端何时介入？哪些事情让后端开发来做更合理？经历“玩客”第一版后，我们得到了一些答案。响应式设计之所以叫响应式“设计”而不叫响应式“技术”，是因为它是一项设计先行的工作。需要设计先明确好响应方式再实现出来，不能出一套设计稿后等着前端看情况把它变成响应式网页。所以整个流程最初从交互阶段开始，分成6个主要步骤，视觉、前端、开发等角色根据情况尽早介入。498)this.width=498;"onmousewheel="javascript:returnbig(this)"
分享复杂产品的响应式设计流程
都说2013年将是响应式设计爆发的一年。一淘设计团队在去年一淘首页改版时初步尝试了响应式，最近在一淘“玩客”项目中有了更加深入地应用，第一次在复杂产品中实现了全站响应式。中间积累了一些经验也踩了不少坑，于是就有了这个响应式设计三部曲，此系列文章包含理念篇、知识篇和流程篇。响应式网页不像传统网页只需考虑一种状态，不是交付一套设计稿就完事儿了，它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里，交互每个阶段该产出什么?交互与视觉如何协作?前端何时介入?哪些事情让后端开发来做更合理?经历“玩客”第一版后，我们得到了一些答案。响应式设计之所以叫响应式“设计”而不叫响应式“技术”，是因为它是一项设计先行的工作。需要设计先明确好响应方式再实现出来，不能出一套设计稿后等着前端看情况把它变成响应式网页。所以整个流程最初从交互阶段开始，分成6个主要步骤，视觉、前端、开发等角色根据情况尽早介入。
Econsultancy：12个糟糕的移动网站体验
移动网页对不少网站来讲是一个新事物，很多网站可能压根就没有考虑过移动站点，但这好像不能成为移动网站体验糟糕的借口。下面是常见的一些糟糕的移动网站体验错误：突然切换到桌面网页有一些网站提供了wap版和桌面版，但因为设计和技术的疏忽，很可能给用户的页面是桌面的，造成体验的困扰。太小的CTAs（行动按钮）你已经搜索了一圈，现在打算购买，此时网站要做的是提供一个好看的，足够大的“现在购买”按钮。但不凑巧的事情很多网站提供的按钮仍然非常微小，而且拥挤。左边这个添加到购物车设计还不错，虽然产品页面里面的尺寸还可以更大一点，而右边这个看起来就没有多少让人点击的欲望。无法使用后退按钮这是不少移动网页上常见的问题，当不尽如人意时，你想后退都难。突然弹窗能够理解网站有好事情告知用户的心情，但是有更好的方法来处理这个事情。文字链比过小的CTA还糟糕的就是文字链。它们可能在PC上显示很OK，但在手机上可能糟糕地一无是处。下面这个文字链你想点都困难。
网站设计：复杂产品的响应式设计流程
都说2013年将是响应式设计爆发的一年。一淘设计团队在去年一淘首页改版时初步尝试了响应式，最近在一淘“玩客”项目中有了更加深入地应用，第一次在复杂产品中实现了全站响应式。中间积累了一些经验也踩了不少坑，于是就有了这个响应式设计三部曲，此系列文章包含理念篇、知识篇和流程篇。响应式网页不像传统网页只需考虑一种状态，不是交付一套设计稿就完事儿了，它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里，交互每个阶段该产出什么?交互与视觉如何协作?前端何时介入?哪些事情让后端开发来做更合理?经历“玩客”第一版后，我们得到了一些答案。响应式设计之所以叫响应式“设计”而不叫响应式“技术”，是因为它是一项设计先行的工作。需要设计先明确好响应方式再实现出来，不能出一套设计稿后等着前端看情况把它变成响应式网页。所以整个流程最初从交互阶段开始，分成6个主要步骤，视觉、前端、开发等角色根据情况尽早介入。Step1：信息架构，确定内容策略。根据产品定位和用户分析，交互设计师确定站点信息架构。(信息架构呈现方式有很多种，这不是本
微软推出网页版Xbox Music：采用响应式设计
网易科技讯7月2日消息，据国外媒体报道，业界本来预计微软本周晚些时候才会推出XboxMusic网页版，但该网站目前似乎已经上线，且可以使用。XboxMusicPass用户能够从music.xbox.com网站访问该网络播放器，该服务版本采用响应式设计，能够针对浏览器尺寸自适应地显示内容。该网络播放器与最近经过重新设计的Windows8.1版XboxMusic应用非常相似，但它的播放屏幕功能并没后者全应用版本的丰富。评测人员在测试期间发现，在该网络播放器上的使用可以跟多款设备同步，音乐可在不受限制的情况下继续在其它版本中播放。正在播放栏位于界面的地步，提供控制音乐重放、音量和重复开关的选项。用户可以编辑播放列别，为云端音乐库新增音乐，以及自由搜索。XboxMusic可在Windows设备、WindowsPhone手机、Xbox360之间进行同步，在其中一款设备上改动播放列表，其它设备就会随之体现出来。值得一提的是，微软指出，“XboxMusicPass支持PC、平板电脑、Xbox360、手机和网页使用。”这意味
响应式设计之移动端调试工具
背景2013年是网页设计响应式的一年。所谓响应式网页设计，是由EthanMarcotte在2010年提出的名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局。这是一个多么强大的概念，一套代码兼容所有设备，节省维护成本，提高开发效率。然而，现实并非如此完美，在其强大的背后也有鲜为人知的辛酸苦楚。众所周知，在响应式设计出现或者说在各种移动设备不断迅速抢占PC市场之前，所有的网页设计几乎不要求兼容移动设备，而在PC端的开发调试已经相当成熟，各种调试工具纷纷脱颖而出，诸如：Firebug、Chrome开发者工具等。这让开发者如鱼得水，在传统网页设计中游刃有余。而如今的互联网市场已经有很大一部分属于移动设备的领地，网页设计兼容移动设备刻不容缓，而响应式设计的提出让这一目标成为可能，甚至可以说是网页设计兼容移动设备的完美解决方案。但是，光有方案只能是空谈，几乎没有人能够不经过反复调试就能写出完全正确的代码，移动设备上的开发调试给网页设计带来了阻力，让开发者不得不投入更多的
移动网站新趋势:响应式设计
【搜狐IT消息】7月17日消息，科技博客BusinessInsider旗下研究机构BIIntelligence发布报告，描述了响应式设计的优缺点。作为一种能够缩放适应不同大小的屏幕的网页设计做法，响应式设计（ResponsiveDesign）正日益成为最受推崇的移动网页优化方式。在谷歌公司于2012年中期指出，响应式设计是优化移动网站的最佳方式之后，这种设计做法的地位得到了进一步巩固。随着iPhone、iPad和Android手机的普及，网站主办方发现，网站在移动端应当带来与桌面端类似的体验。否则，网站在移动设备上看起来就只有细小的文字和链接，网页布局也会一团糟。这就意味着损失流量和销售额的风险。现在，响应式设计已经成为网页设计中的黄金法则，但就像大多数技术一样，它有利有弊，并不一定适合所有企业或者所有应用。BIIntelligence在报告中将相应式设计做法与其他优化方式进行了比较，分析了响应式设计的优缺点，对独立移动网站如今的地位进行了评估，探讨了HTML5开发的衍生问题。下面就来看看针对移动设备的几种优化方式：
对一些词句翻译的吐槽（2）
爱你在心口难开张蔷演唱的一首歌曲，前几年红遍大江南北，其实是翻译的一首外国歌曲，可人家原名IloveyoumorethanIcansay。“爱你在心口难开”多半是没说出来，可能是不好意思说、不敢说或不能说；IloveyoumorethanIcansay估计是说了，只是因为爱得太深，语言显得苍白无力，无法表达深爱的程度。太阳微系统几年前，Java的老东家SunMicrosystems如日中天，媒体充斥着“太阳”，其实Sun是StanfordUniversityNetwork的首字母缩写，跟太阳半毛钱关系没有，可记者的生花妙笔生生把它变成了“太阳”。前不久看《咬文嚼字》，说有人将“新一百”翻译成New-100，可这里的“一百”是“第一百货公司”的简称。所以说，翻译时得小心，千万别把简称当词语翻译！产品愿景（ProductVision）这几年，愿景一词炙手可热，企业家言必谈愿景，连那些“队伍刚开张，只有十来个人六七杆枪”、吃了上顿没下顿的新创企业也奢谈愿景。《现代汉语词典》对“愿景”的解释是“所向
如何免费进行响应式设计测试
开发一个响应式设计网站，我们每对DOM、CSS进行一次修改，都需要拖动浏览器窗口的大小，来测试本次修改对否会破坏整体的布局。所有的努力都是为了评估该网站在不同屏幕上能否很好的展现。如果进行企业研发，你可能需要公司提供各种各样不同的设备，以便分别在上面进行测试。但对于自由开发者来说，不可能购买所有类型的新手机、平板以及电脑。那该怎么办呢？专业Web开发工程师SteveRalston在博文《Howtotestresponsivedesignsforfree》中指出，现在已经有越来越多的基于浏览器的工具，用来模拟各种不同设备的屏幕。同时介绍了一系列此类工具。下面将以作者SteveRalston设计的响应式网站PajamasOnYourFeet.com为例，分别对这些工具进行介绍与测试。AmIResponsive?AmIResponsive?是一个超级简单的工具。利用它，你可以迅速查看网站在四个不同屏上的显示效果。四个屏均为iOS操作系统。该工具只关注网站整体，不提供控制与选择，只是对网站的简单展现。不同设备的
【特别推荐】14个支持响应式设计的流行前端开发框架 - 梦想天空（山边小溪）
和Javascript之外，因为不同版本的浏览器和平台，你需要知道如何做一个跨浏览器的网站。而最新的发展趋势——响应式设计，它不仅使Web项目开发更难，也需要花费更多的开发时间。不过，有很多优秀的框架可以帮助到你，这篇文章挑选了14个响应式的前端框架，列出了每个框架的UI组件和Javascript插件，几乎所有的都使用了响应式网格系统。就个人而言，我比较喜欢TwitterBoostrap，你最喜欢这里面的哪个呢？您可能感兴趣的相关文章Web前端开发人员和设计师必读文章集锦十个拥有丰富UI组件的JavaScript框架十款精心挑选的在线CSS3代码生成工具
利用响应式技术构建大规模社区网站
引言：从本周起，我（编者：回声网创始人张月）和RainX将撰写并发布一系列文章，从策划、设计、开发、运营及商务的角度分享我们创建和经营回声社区(http://huisheng.fm)的一些经验，并通过technode进行发布。对于从事互联网创业的小团队来说，应该具有比较强的实践指导意义；对于社区方向的创业者来说，也算是一个比较生动的案例。===============移动化是未来大趋势，做任何互联网项目都必须将移动战略放在一个很重要的位置上，对于回声来说也不例外。尽管回声现阶段仍然以文字为内容主要载体，也必须充分考虑到移动端的使用场景和体验。一般来说，社区网站的移动化策略有三种：1)开发并提供原生的app；2)制作专门的移动版网站，也就是Webapp；3)采用响应式技术，用一套代码、一个网站来适配不同的终端。我们权衡再三，最后选择了采用响应式设计技术。响应式设计是最近两年比较流行的一种前端开发技术，相对而言，在国外应用的更加普遍，在国内则被使用的较为保守。它的特点是只需一套代码就可以良好支持PC、平板和手机等不同终端的
复杂产品的响应式设计【流程篇】
都说2013年将是响应式设计爆发的一年。一淘设计团队在去年一淘首页改版时初步尝试了响应式，最近在一淘“玩客”项目中有了更加深入地应用，第一次在复杂产品中实现了全站响应式。中间积累了一些经验也踩了不少坑，于是就有了这个响应式设计三部曲，此系列文章包含理念篇、知识篇和流程篇。响应式网页不像传统网页只需考虑一种状态，不是交付一套设计稿就完事儿了，它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里，交互每个阶段该产出什么？交互与视觉如何协作？前端何时介入？哪些事情让后端开发来做更合理？经历“玩客”第一版后，我们得到了一些答案。响应式设计之所以叫响应式“设计”而不叫响应式“技术”，是因为它是一项设计先行的工作。需要设计先明确好响应方式再实现出来，不能出一套设计稿后等着前端看情况把它变成响应式网页。所以整个流程最初从交互阶段开始，分成6个主要步骤，视觉、前端、开发等角色根据情况尽早介入。
响应式web设计(Responsive web design)三部曲
大部分移动浏览器会把HTML页面缩放成较宽的viewport的宽度，这样内容就可以屏幕上正确的展示了。你可以使用viewport这个meta标签来重置这个行为。下面的viewport标签告诉浏览器使用设备宽度（device-width）做为viewport的宽度，并且禁用初始的缩放比例。在
中加入这个meta标签。有哪些选择可以让你的企业移动化
响应式设计是一项针对不同的屏幕尺寸缩放网页大小的技术，已经成为最受推崇的为移动设备优化内容页面的方式。在2012年中，谷歌把响应式设计作为智能手机网页优化的最佳策略之后，这一优势更加得到巩固。当安卓手机、iPhone、iPad成为最畅销的消费品，企业也意识到他们的网页呈现方式也要向更小的屏幕转变，否则他们的网站在移动大潮面前将显得毫无时代感，而且蠢笨——文字太小、链接太小、布局杂乱，要冒失去流量和销售的风险。现在，响应式设计已经被当做金科玉律，但是和多设备环境下绝大多数的技术放在一起，它也有劣势，它并不适用于所有的商业类型以及所有的应用。在Businessinsider智库的最新报告中，我们定义了什么是响应式设计，并把它与其他的移动优化工具进行比较，分析响应式设计的利弊，跟踪检测响应式设计在移动设备上适应与表现的数据，评估其是否适用于专门的移动网站。下面是当前主流的移动优化工具：移动应用：特别是在移动大潮兴起的初期，一种观点认为移动应用可以接管所有移动端的活动，企业也开始大量开发自己的移动应用。在某些移动市场，应用可能占据统治地位
利用媒体查询进行响应式设计
如今屏幕分辨率的范围已经从320px（iPhone）涵盖到2560px（大显示器）或者更高了。用户不单单在桌面电脑上浏览网站。用户如今会使用移动电话，小的笔记本，平板设备（比如iPad或者Playbook）来访问互联网。所以传统的固定宽度设计不再适用了。web设计需要有自适应能力。页面布局要可以自动的去适应所有的分辨率和设备。这个教程将会告诉你如何利用HTML5和CSS3媒体查询来创建一个跨浏览器的响应式设计。首先看个实例在你开始之前，看下最终demo是什么样子。改变你浏览器的大小，然后看看页面布局在基于viewport（浏览器可视区域）宽度的情况下是如何自动的进行浮动的。
构建HTML5+响应式设计网站
段学鹏发表于2013-09-04–08:54:11很多主流的网站我们看到越来越多精致的设备兼容，无论PC，平板还是手机，对于网站的浏览都没有任何视觉上的障碍，不会影响到阅读和点击，尤其是手机端的交互，追求app是的设计也成为网站主所极其关注的，这就是响应式设计；流式布局、栅格化设计或者函数判断当前屏幕大小而使用不同的css样式，从而达到显示你想要展示的画面的效果；设备规格的不统一确实给前端工作者带来了相当大的麻烦，我们需要不断的根据不同的标准为不同的分辨率写css，前端效果；Bootstrap是一个简单易用的前端框架，他最大的两点就是css的可编程化，使用lesscss更有效的解决你的兼容性和分辨率变化问题，同时bootstrap也是一个强大的响应式网站设计框架，使用他提供的框架，就可以实现响应式网站的设计，现在随着我们对于用户体验的要求提升，我们越来越多的发现bootstrap的使用者；
如何合理高效地设置响应式设计的响应点
你可以轻易找到许多如何设置响应式设计响应点的攻略，但是这些过时的设计方法都是以主流屏幕尺寸为依据的，效果并不理想。其实并没有“主流”屏幕尺寸这一概念。另外一个主流的方法是当布局被打破时设置响应点。这个方法听起来好一些。但是仍有疑问，我们怎么判断是否布局被打破了呢？其中一个合理回答是依照经典可读性理论定义响应点。名人的看法RobertBringhurst认为，单列页面里的内容被设置为普通有衬线字体和普通字体大小时，排列45至75个字符长度为最佳。JosefMüller-Brockmann认为，一行如果能容纳10个单词那么这栏就很容易阅读。有许多原因会影响实际的字符数或单词数，但这是一种基本理论。如果你从小屏幕开始，然后你逐渐增大，主要内容的宽度也可能会变得比75个字符或者10个单词更宽，一些改变就会发生了。简单的说，这些就是你的响应点。多种因素决定理想尺寸许多因素决定了理想尺寸的大小。比如，德语的长度比英语长，那就需要更宽的位置了。你理解对了：对于需要多种语言的国际网站你必须有不同的栅格。字体、字号、背景对比度、行距、字间距、文字类型等
高端揭秘：为你的响应式设计提速
可以用来测量手持设备上网页的载入性能，这样就能发现问题，从而解决问题。当然如果设计还在进行或者计划中，那么优化起来就更方便了。只需要在设计过程中注意载入速度即可，这样就不用事后亡羊补牢了。为了提高表现力，我们需要减少页面的资源的数量，缩小页面的尺寸。并不需要可以的调整页面的外观，通过一些工具和手段也能实现”瘦身”。首先要考虑的就是哪些元素是必要的，哪些是不必要的，去掉不必要的元素，这样就能最小化HTTP请求，这样用户的等待加载的耗时也最少。这可以通过压缩CSS和JS来实现，推荐一款叫做Compass的工具——开源的CSS框架编写工具。JavaScript推荐一款工具叫UglifyJS，可以压缩代码。有选择的载入这也是可以考虑采用的重要手段，非常适用于响应式设计的提速，这样就能确保手机用户不会下载那些会降低载入速度的元素。有选择性的载入，能够阻拦各种内容的载入，包括社交窗口、图像、地图，以及其他。再采用这种手段之前，最好对网站进行全面的测试，先要了解是哪方面降低了网页的载入速度，这样对症下药，效果才能更好。图像我们都知道图像
[原]网页响应式设计
最近工作中接触到很多关于前端的一些知识，所以也想趁此机会整理一些这方面的文章，对这方面感兴趣的童鞋可以持续关注一下喔～先从响应式设计开始说吧。随着移动互联网的发展，终端的丰富，导致网页在各种终端不同分辨率下能完美的呈现是一件极具挑战性的工作，而响应式设计可以说就是为移动互联网而生的。我们之前可以看到一些知名网站都有3g.qq.com,m.taobao.com等等专门为智能手机终端推出的网站，那问题就来了，现在终端产品这么丰富，从3.0～10.0寸的屏，需要为每一种设备做一个独立网站以达到在不同设备中相同的视觉风格和操作体验吗？这势必会增加工作量而且是重复劳动。开发人员在设计页面时，一般都强调模块化，能够易扩展，以保证在任何地方都能正常显示，而响应式设计很好的满足了大家的要求。ETHANMARCOTTE在第一次正式提出响应式设计概念时就定义了响应式设计的三大要素：流体栅格、弹性图片和媒介查询。
非彼无我，非我无所取
有个小朋友找我说：她要给同事们讲项目中用到的ResponsiveDesign，但是她很苦恼不知道该讲什么。“我就是用了Bootstrap，没做什么特别的，这就是ResponsiveDesign吗？”这不是个罕见的例子。很多人，甚至是有多年工作经验、水平相当不错的人，要他分享一下项目里有趣的东西，他会困扰地挠挠头，然后粗略地讲上几句：我们的项目啊，用了AngularJS，用了Gradle，不过好像也没什么特别的啦，反正用什么东西都是写程序呗……最糟的情况下，他工作了几年以后，说不出学到了什么新东西，看不出水平有提高。但是你看看他做过的项目，各种新技术新方法都用到了，为什么他会视而不见？而另一些人从几乎无聊至极的项目中也能写出一篇有模有样的文章，这就让你更加无法忽视前一类人存在的问题了。是什么让我们对每天工作中有趣的、值得兴奋的事情看不见、说不出、感受不到？庄子《齐物论》有这么一句话：非彼无我。当我们谈论一个东西，很容易就这个东西谈它本身。但事物的边界不是由它自身（即“我”）决定的，而是由“不是它”的那些东西（即“彼”）来决定的。比如