【译】向客户推销响应式设计
设计并开发的网站能够友好的支持移动设备，已经成为当今网页设计的一个重要趋势。它的重要性体现在我和客户交谈时，几乎所有的客户都把“支持移动设备”作为网站重新设计的第一要务。去年年底，我开始给一家销售加工木材产品的公司做新设计。在讨论的一开始，我就把话题转到支持移动设备和响应式设计。通常，这个话题很受欢迎，但这次例外了，就像客户所抱怨的：我们的客户不会使用手机来访问我们的网站。我已经不止一次的从我的潜在客户那儿听到类似的回应了。我也和许多公司交谈过，但这些公司都严重低估了通过手机或是移动设备来访问他们公司网站的人数。通常情况下，看下流量统计就能让他们看清移动设备对他们网站流量的影响。但是当我看到这个特殊客户的分析报告时，我惊呆了。2%。这就是当时来自移动设备的用户数量。就这么多！在结束这个故事之前，我最终和这个客户合作然后重新设计的他们的网站，并且那个网站现在完全是响应式的。在设计师如何推销响应式网站上，它给了我们一个有趣的启示：当我们认为应该推行一种大家公认的最佳实践的解决方案时，客户的需求往往不是显而易
优化响应式设计
CSS3中由于有mediaqueries，使得给不同屏幕添加样式变的相当简单。但是如果你想要让网页在不同的屏幕下有不同的内容或者不同的HTML结构的话又该怎么办呢？WordPress有一个wp_is_mobile的函数可以使用，但是这个函数涵盖了很多的设备，并且也不能够够针对特殊屏幕尺寸。这里给出一些我使用的纯前端解决方案的技术。使用Javascript获取屏幕大小只要document.ready一就绪，我们就可以使用javascript侦测屏幕的宽度。下面是检查屏幕宽度是否大于690的代码片段，然后可以在其中做点什么事（比如改变结构或者向DOM加入一些东西）。jQuery(document).ready(function(){if(document.body.clientWidth>690){//DoSomething
关于响应式设计屏幕分辨率和屏幕尺寸的问题
《CSS设计指南》第3版快学完了，可在第八章CSS媒体查询这边遇到了问题：我连屏幕分辨率和屏幕尺寸的区别都分不清楚！去百度查了，都说的模棱两可，哪位大神能解释下？另外：1.比如一个设备的分辨率宽度为1024px，那我写个宽度为960的网页，在上面会怎么显示？单纯的拉伸缩小？还是按比例的？2.iPhone5s的分辨率是1136X640，到底哪个是宽？难道横屏的时候是1136，竖屏就是640？3.承上，要是我拿台20多寸的电脑，它的分辨率和iPhone5s一样，如果我用max-width作媒体查询，那同样显示一个小于分辨率宽度的网页，在iPhone上还是一样的小小小，还得用手去放大，这算什么响应式设计？4.为什么把电脑上浏览器视口减小到宽度小于max-midth，就能看到在小分辨率设备上的效果？电脑分辨率没变啊？
Responsive Design响应式网站设计心得笔记
这个词已经喊了很久了，一直都是小打小闹，没正经的做过大的响应式全站，这次终于有机会了。网站刚上线半个月，就要改版为响应式设计，支持手机/PC等各类终端显示浏览。今天把首页做好，并测试无误，这里把一些应该记录的东西写下来，一是备忘，二是分享给需要的人。一、对不支持html5标签的IE，可以使用类似html5shiv的插件（地址http://html5shim.googlecode.com/svn/trunk/html5.js）也可以自己使用javascript的createElement将这些不支持的标签创建一次，记得在CSS里要批量声明一下这些Html5标签为block类型，防止一些情况下IE不识别这些html5标签下的CSS样式。二、响应式设计要尽量使用百分比宽度，以适应不同设备的显示需求。对于字体大小，为了对小屏幕手机设备写mediaquery时候维护方便，请结合像素单位px并适当使用相对单位，虽然CSS3新增的相对单位rem(rootem)比较灵活方便，但由于IE8和之前低版本不支持，所以目前来说，还是建议使用em，
漫谈响应式设计
学究一些，首先大家先了解一下响应，然后再讲一下设计，响应就是我发出的请求能得到什么样子的回复，比如我说“你好”，你会很容易的给我回复“你好”，因为大家都是中国人，如果我说“hello”，我们这代人如果上过初中，他也会给我说“Hello”，但是如果我给对你说“Bonjour”，那可能只有高配的人才可能知道了。这里面，就举了一个例子，我的应答对象就相当于我们要讲的响应式的设备，他必须能够解析我发给他的需求。然后咱们再讲一下设计，设计的官方解释是这样的：1.设下计谋。2.根据一定要求﹐对某项工作预先制定图样﹑方案。3.指搞设计工作的人。直白的讲，设计其实就是设了一个计，来完成我们的需要的工作目标。从前面我们讲的响应可以看到，响应是双方的，是互动的过程，在这个过程中我们要考虑双方的承受能力，比如我们总不能让小孩子扛大包。在咱们网页设计方面就是咱们要考虑设备的性能，从网速、Dom节点数量、屏幕的大小等等，如果我们从前后端结合，对小孩子给糖果，给苦力大包，那样就做到了响应式。但是，我下面讲的响应式是狭隘的，我们只是从W
简单代码就能实现响应式设计
现如今，响应式设计愈发流行。有一个重要的原因便是，现在用手机、用平板上网的人越来越多了，所以站长们为了让访客有一个良好的上网体验，就会让网站根据对应的上网设备、对应的窗口尺寸显示不同但都很养眼的网页。要用代码去实现它也是非常简单的一件事，下面我只挑最简单的代码，让大家感受下哈。让网页根据窗口尺寸更改大小比如我要那一个文章阅读的网页，这个文章正文是用一个容器所包含着：
经典网页设计：无缝过渡的响应式设计案例 - 梦想天空（山边小溪）
响应式设计用于创建可在任何设备上进行查看，并可以从智能手机屏幕无缝地切换到台式电脑屏幕的网站的技术。它的重点是确保轻松导航和可读性，以最小的缩放，滚动或平移必需的。路已变得不那么的最近趋势和更多的必需品，作为可以跨多种操作系统和设备的增加迅速查看手机兼容的网站的需求。响应式设计往往采用简约的设计元素，以确保能够从一个屏幕无缝过渡到另一个屏幕。新兴的技术，如扁平化的趋势有助于创造一个简约的方法，实现跨设备的转换。创建一个可用性高的网站，利用响应式的布局和设计固然远远比创建一个静态网站更复杂，但结果是值得的。您可能感兴趣的相关文章
移动时代如何进行响应式设计？
在当今的超级互联世界中，网络和移动应用程序的性能在推动客户的采纳和参与方面发挥着前所未有的关键作用。终端用户有着非常高的期望值，包括更快的页面加载速度，更丰富、更引人入胜的网络体验和应用程序。与此同时，移动是快速发展的全球性现象，无论是业务、信息还是娱乐，移动正在改变我们与内容互动的方式——。因此，通过快速高质量的网络体验与移动用户进行互动的能力成为一项业务要求，以及成功的首要条件。如果忽视移动用户的需求，就有可能损失很大一部分、甚至越来越多的业务。AkamaiTechnologies高级产品营销经理LorenzJakober响应式网页设计采用正在迅速增长然而，在这个美好的新世界提供快捷优质的体验并不容易，需要面临跨越不同浏览器、屏幕尺寸、网络和设备来优化性能的挑战。因此，企业寻求能够同时适用于每种设备的技术，这一过程使响应式网页设计（RWD）应运而生。响应式网页设计是一种网页开发方法，指网页能够应响应载入的环境（主要是屏幕尺寸）并相应地更改用户界面。这种技术包括一系列灵活的网格和布局组合、图片以及对CSS3媒体查询的智
与移动用户互动 响应式设计与性能优化相整合
在当今的超级互联世界中，网络和移动应用程序的性能在推动客户的采纳和参与方面发挥着前所未有的关键作用。终端用户有着非常高的期望值，包括更快的页面加载速度，更丰富、更引人入胜的网络体验和应用程序。与此同时，移动是快速发展的全球性现象，无论是业务、信息还是娱乐，移动正在改变我们与内容互动的方式。因此，通过快速高质量的网络体验与移动用户进行互动的能力成为一项业务要求，以及成功的首要条件。如果忽视移动用户的需求，就有可能损失很大一部分、甚至越来越多的业务。响应式网页设计采用正在迅速增长然而，在这个美好的新世界提供快捷优质的体验并不容易，需要面临跨越不同浏览器、屏幕尺寸、网络和设备来优化性能的挑战。因此，企业寻求能够同时适用于每种设备的技术，这一过程使响应式网页设计(RWD)应运而生。响应式网页设计是一种网页开发方法，指网页能够应响应载入的环境(主要是屏幕尺寸)并相应地更改用户界面。这种技术包括一系列灵活的网格和布局组合、图片以及对CSS3媒体查询的智能运用。RWD页面包含了展示所有版本的网站，包括移动和桌面视图在内所需的HTML。CSS
响应式设计介绍
2013年，智能机上网时间已经超过PC机了，并且这种趋势是不可逆的，设计移动设备将成为Web开发人员的首要任务。针对移动用户，一种方案是开发NativeApp，如分别给IOS和Anroid开发应用，但是这种方案成本非常高，更新比较困难；另外一种是建立一个专门的移动网站，通常是m.*.com，例如m.qian.com，这种方式需要维护2套代码，成本也比较高；还有一种方案就是响应式设计，好处是一套代码打天下，维护相对来说方便多了，成本较低，开发速度较快。在文章的最后会有它缺点的讨论。什么是响应式设计维基百科对响应式设计是这么介绍的：响应式Web设计是网站制作使用的一个叠层样式表(CSS3mediaqueries)，结合流体网格适应各种布局，还可灵活使用图像。用户可跨越不同设备和浏览器的限制，访问相同内容，布局也利于阅读和浏览，只需细微的调整、平移或滚动。移动优先手机在爆炸式增长移动设备的数量和质量都在急速增长，随着数量的激增，越来越多的人们开始只使用移动设备来访问互联网。手机迫使你专注优先为手机设计可以迫使你专注于弄清楚哪些内容
超棒的响应式设计测试书签和工具（bookmarks）(转) - Joanna Qian
一、测试书签（bookmarks）ViewportResizer这个书签号称拥有158个国家3万多活跃的用户，主要特性：完全自定制方便的添加自定义尺寸手动的横竖屏切换自动的横竖屏切换(portrait|landscape)支持Mediaquery自适应Meta的viewport设置手动重新加载页面移除页面工具栏Viewport相关信息显示(尺寸，分辨率，横纵屏，useragent)支持触摸设备支持vectorResizer这个在线书签允许你快速的修改页面的尺寸来测试响应式的设计.并且支持Chrome的扩展！Bricss另外一个方便的测试响应式的书签，你可以自己指定自己的几套显示窗口的尺寸
响应式设计
网上的教程好复杂，我写一个简版的。简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上，屏幕比较宽，就可以一行放2个Div。到了手机上，或者Pad竖着拿的的时候，一行就只放1个Div。这里有2个关键点：一是如何在不修改Dom结构的前提下调整布局。二是如何判断屏幕分辨率并应用对应的CSS。以上两点都应该不依赖与JS。实现第一点依靠的是流式布局。就是所有参与布局的DIV都用float:left，宽度都用百分比表示。比如下图，黄色部分的宽度是60%，橘色宽度是40%。如果将黄色和橘色的宽度都width=100%,那么从1行变成2行了，如下图。从而实现不修改Dom实现布局变化。那么如何不使用JS而实现动态调整CSS样式就是第二个关键点。HTML5中提供了一种新的CSS语法——@media，学名是MediaQuery，可以为不同的分辨率设定不同的样式。/*PhonePortrait(320px)*/@mediaonlyscreenand(max-width:32
响应式设计专家Ben Frain访谈问题征集
BenFrain从1996年开始开发网页，是一名有着丰富经验的网页设计师和前端工程师，直接与世界各地的客户和设计机构并肩工作。他在响应式设计领域的造诣尤其深厚，精于前端代码性能优化，著有《响应式Web设计：HTML5和CSS3实战》和SassandCompassforDesigners。同时他还是一名技术记者，定期为一些关注Mac平台、前沿科技、网页设计和航空技术的刊物撰稿。在此之前，他曾是一名怀才不遇的（而且谦虚的）电视演员，毕业于索尔福德大学的媒体与表演专业。他写了四部（个人认为）同样被低估的剧本，而且始终心怀能卖出一部的信念（尽管不像最初那么强烈了）。工作之余，在身体（和妻子）允许的情况下，他喜欢玩室内足球。他的个人网站是http://www.benfrain.com，Twitter地址是http://twitter.com/benfrain。响应式设计：随着iPadmini的发布，又一个新的屏幕尺寸诞生了。用不着全面统计，你就会发现移动互联网时代众多的屏幕规格，从
移动网站新概念 响应式设计引发新格局
国内用智能设备上网用户正在以惊人的速度增长，移动互联网成为了人们日常生活的丰富延伸，并飞速改变着人们的生活。同时也越来越多的用户拥有多种移动设备，像智能手机、平板电脑、智能手表等。随着屏幕越来越多，如何才能在各种屏幕上保持一致的体验，也就成了整个行业关注的热点。有没有一种设计能解决所有屏幕的问题呢？在这样的背景下响应式技术应运而生。响应式布局设计是EthanMarcotte在2010年5月份提出的一个概念，其根据用户访问的设备重新排列组合页面的元素，让内容达到最适合的展示。下面这张示意图，可以很好的诠释响应式的意义。随着接入设备的变化，大家可以看到元素1、2、3、4、5的位置变化。在这里我们不难感受到响应式技术是如此的神奇，但应用这种技术的网站却并不多见。在世界范围内只有如Google、亚马逊、YouTube量级的公司才对这种技术有所尝试，主要是由于设计和研发成本较高的缘故。在国内尝试响应式设计的就更是凤毛麟角了，如淘宝、优酷一般，也只是对网站首页进行了尝试，初步进行了响应式的改造。大公司具备资源的优势，但还有
最近在找工作，如果贵公司对我感兴趣的话，请与我联系。 - 华生_
1、熟悉(x)html/css，代码语义化、对网站用户体验，主流浏览器兼容问题和代码优化有一定的经验、了解css3及响应式设计并有实际项目应用。2、了解javaScript，DOM，ajax、熟悉jQuery，能编写用于提升网站用户体验的效果及控件；3、有一定审美及设计能力、注重网站细节人性化，熟练potoshop等设计软件，这使我与设计师能更好的团队合作、沟通；4、有一定的计算机硬件、系统维护技能，排除常见计算机、系统故障；5、有解决问题、钻研新技术的兴趣及学习能力，对新技术及趋势感兴趣，有良好团队合作精神；一些案例：http://www.hihoku.com/microfilm/http://tsk.icampus.hk/website/http://www.popscichina.com/（响应式设计）http://www.topgear.com.cn/邮箱jmjweb@163.com简历下载：links~
自适应网页设计（Responsive Web Design） - 晨风清流
随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone/iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？一、"自适应网页设计"的概念2010年，EthanMarcotte提出了"自适应网页设计"（ResponsiveWebDesign）这个名词
今年一定要訂行動策略，但是該做 App 還是 Responsive Design 的網頁？
如果你是一個創業家、公司的開發者，在行動化的大趨勢下你一定會面臨到一個問題：我到底要不要為我的產品開發一個App？但如果我告訴你，有一種技術，你單單用它就可以在智慧型手機、平板、Web端「一次」把你網頁的內容全部優化到最好，會吸引你使用嗎？好，接著你必須想再進階一點的問題：那我要開發一個NativeApp，還是用「響應式設計」呢？再釐清兩個問題前，我們必須了解「NativeApp」和「響應式設計」的不同。
经典网页设计：10个响应式设计的国外购物网站 - 梦想天空（山边小溪）
今天我想与大家分享电子商务主题的网站设计，更精确地说是为设计在线商店提供新思想。每个人都知道移动技术的市场发展迅速，已经很难找到一个人没有手机的人了。响应设计给我们提供了一个巨大的机遇：站点的访问量的增长和销售收入的增加。在今天的收集中，分享10个响应式设计的国外购物网站给大家。您可能感兴趣的相关文章经典网页设计：超炫动画效果单页网站30个独具匠心的精美单页网站设计案例25个以全屏照片为背景的精美网页作品20个与众不同的网页联系表单设计案例20个模糊背景在网站中的经典应用案例1.Snipcart2.Bold&Noble3.GreatsBran
响应式设计备忘录
必要准备为了不让浏览器自动缩放，必须加入下面一行
复杂产品的响应式设计【流程篇】 (转) - Joanna Qian
都说2013年将是响应式设计爆发的一年。一淘设计团队在去年一淘首页改版时初步尝试了响应式，最近在一淘“玩客”项目中有了更加深入地应用，第一次在复杂产品中实现了全站响应式。中间积累了一些经验也踩了不少坑，于是就有了这个响应式设计三部曲，此系列文章包含理念篇、知识篇和流程篇。响应式网页不像传统网页只需考虑一种状态，不是交付一套设计稿就完事儿了，它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里，交互每个阶段该产出什么？交互与视觉如何协作？前端何时介入？哪些事情让后端开发来做更合理？经历“玩客”第一版后，我们得到了一些答案。响应式设计之所以叫响应式“设计”而不叫响应式“技术”，是因为它是一项设计先行的工作。需要设计先明确好响应方式再实现出来，不能出一套设计稿后等着前端看情况把它变成响应式网页。所以整个流程最初从交互阶段开始，分成6个主要步骤，视觉、前端、开发等角色根据情况尽早介入。Step1：信息架构，确定内容策略。根据产品定位和用户分析，交互设计师确定站点信息架构。（信息