响应式Web设计实践

出版社:人民邮电出版社
出版日期:2013-3-1
ISBN:9787115304094
作者:[美] Tim Kadlec
页数:256页

内容概要

Tim Kadlec，是一位资深的Web开发者，也是Breaking Development联合创始人。Tim通过应用各类Web技术，满足了出版业、制造业、金融业等不同行业诸多用户对于跨设备完成各种规模任务的需求。 侯鸿儒，本科期间自学了HTML、CSS、JavaScript和PHP，在清华大学计算机系完成了有关HTML5应用的硕士毕业设计。之后又顺其自然地接触到了UI/UX，对响应式设计有着浓厚兴趣，并做过“Responsive Web Design & Workflow”的演讲。

书籍目录

第1章 无处不在的Web

第2章 流动布局

第3章 媒介查询

第4章 响应式多媒体

第5章 计划

第6章 设计流程

第7章 响应式内容

第8章 RESS

第9章 响应式体验

后记 展望未来

作者简介

随着各种各样的移动设备不断地涌现到使用者面前，Web设计的适应性已经成为设计师们所面临的最为艰巨的挑战。你设计出的网站不仅要在桌面计算机的大尺寸屏幕上可以为用户提供友好的UI和用户体验，同时在小尺寸屏幕上也应该可以提供一致的用户体验，并可以让用户能够在桌面大屏幕上和移动小屏幕上平滑切换，同时没有任何的不适应感觉。

本书作者是一位出色的开发者，在本书中，他将诸多技术和设计理念杂糅在一起，再辅以大量详细的配图、注释、引用等加以说明，从理论到实践，对响应式设计进行了详尽的解读。

本书适合从事Web设计的前端工程师和开发人员阅读参考。

 响应式Web设计实践下载 精选章节试读 更多精彩书评


发布书评

　
　

精彩书评 (总计7条)

  •     从方法上系统的介绍了响应式设计，较之于从概念上简单介绍的书来说帮助很大，不仅仅是对响应式设计的一个深入理解，更学习了相关方法。译者保持了笔者简洁诙谐的语言风格，使全书可读性非常高~力荐^o^^o^^o^^o^^o^
  •     1.渐进增强 insteadof 优雅降级 —— mobile first2.相应的限制 —— 定宽元素3.自适应布局(1).display:table-cell(2).flexbox（亦可用作水平垂直居中）(3).css3多列4.media query 内容引导断点 not 设备引导断点5.响应式加载媒体（或使用SVG），display:none并不能节省性能6.Adobe Shadow —— 远程调试测试移动设备7.matchMedia —— media query for js8.解决方案 RESS —— 客户端响应式布局+服务器用户代理检测
  •     [《响应式Web设计实践》](http://book.douban.com/subject/21263576/)是一本关于响应式Web设计的书，虽然之前也有构建响应式站点的经验（比如[http://z.qzone.com](http://z.qzone.com)）仔细读完全书，才知道响应式不只是media query这么简单。本书内容非常丰富，下面介绍一些对我有所帮助的章节：3.4 媒介查询顺序---我之前的制作经验是“优雅降级”型的，先制作一个完整的站点，在Chrome、IE中都能完整查看了，然后再往下增加一些断点，比如640px、320px等，在这些断点中新增样式来覆盖之前的完整样式，或者隐藏一些元素，但这样的缺点是不支持媒体查询的手机浏览器就只能读取完整站点样式了。而且因为做了restyle，整体代码量会偏大。所以本书的经验“渐进增强”，先制作一个核心站点样式，这个样式中没有负责布局的样式，没有左右栏，就是简单的核心样式。然后在媒体查询中往上增加一些断点，比如320px、640px等，在这些断点中新增样式来增加布局样式，这样就免掉了之前的缺点。最后桌面端的IE678不认识media query，所以需要用IE条件注释加载一个单独的样式：<!--[if (lt IE 9) & (!IEMobile)]><link rel="stylesheet" type="text/css" href="/css/ie.css" /><![endif]-->我根据这一原则和方法修改了我的[博客](http://yuguo.us)的响应式实现方法，大家可以看看源码。3.6 确定断点---这一节的观点是，新增的断点不应该由主流设备宽度来决定，应该由内容来决定，也就是说新增一个480的站点不应该是因为手机屏幕宽度很多都是480px，而应该是在481px的时候就能够有所调整了。这个观点很好，让我们从被动地设置断点，到拥有主动权。P102 响应式设计对性能的影响---Guy介绍了一下“前端的响应式设计”的弊端，大多数简单的前端处理的响应式有以下弊端：1. 下载并隐藏2. 下载并缩小3. 额外的DOM这3个问题在比如[http://z.qzone.com](http://z.qzone.com)中几乎都存在，手机端下载了跟桌面端一样的HTML代码【问题3】，然后隐藏了一些下载功能【问题2】，最后把幻灯图缩小到手机屏幕大小【问题1】。但是这样也是有原因的，因为首页图经常需要运营来修改，设计师也没有资源出一系列大图的时候，再专门针对手机做一系列小图，所以当时的方案是简单缩小。当然以后有机会一定会去优化，做出更好的体验。4.5 背景图片---利用媒体查询，在屏幕大于一定宽度的浏览器中才加载自定义字体。4.7.2 广告---广告真的是一个很大的阻力，空间改版的时候想修改边栏宽度，就遇到广告位的阻力……也许以后可以跟商户签订更灵活的协议。7.5.1 代码汤---不知道原文是什么，这里翻译成代码汤，有点奇怪，但意思大概是懂了，就是页面上的富文本CMS生成了很多冗余标签，冗余标签储存在数据库中，然后在移动端生成内容的时候就有诸多困难。解决办法是简化CMS，同时在编辑器中做一个简单内容拷贝，或者过滤器过滤标签。8.2.2 服务器端Modernizr---浏览器段的Modernizr我们都了解，是通过在浏览器里运行JavaScript来判断浏览器的能力，然后在html标签上附加一些标记class。服务器端Modernizr的原理有所不同，访问者第一次访问页面时（不带cookie），JavaScript会立刻执行并取得测试的结果，然后这些结果被添加到cookie，页面立刻刷新。当下一次加载页面时，服务器端会读取cookie值，然后直接输出html。缺点是JavaScript可能禁用，或者浏览器压根就不支持JavaScript，而且要加载两次（虽然第一次数据量很少，也是一次请求）。优点是不必依赖UA字符串，更稳定。9.2 网络---测试网络的方法之一是发起某个图片的请求，然后测试下载时间，根据这个来考虑是否需要加载更高分辨率的图片，方法之2是网速API，但其实并不太稳定，一方面不是所有设备都有这个API，另一方面不一定3G就更快。最后---响应式不简单是前端的责任（media query），也不简单是后台的责任（单独的m.站点），而是二者统一，后端来输出不同的内容，前台来按需加载图片，来做断点。设计师也需要了解前端知识，因为未来的主流趋势是设计师在浏览器中设计。本书有一些小问题，比如：P38边栏的链接中有空格，其实url中不能有空格的吧。第8章原章节名字可能确实是RESS，但中文书里这样写太奇怪了，这并不算约定通俗的缩写，让人云里雾里，简单的“服务器端检测”就非常好了。另外不喜欢（译注：）这样的文字插入到正文中，应该用脚注或者边栏注可能更好。整体来说翻译的不赖，译者的自我评价（原文5星，翻译3星）过谦了，我打5星。http://yuguo.us/weblog/responsive-web-design/

精彩短评 (总计31条)

  •     简明易懂
  •     很棒的书，对RWD(responsive web design)的各方面都覆盖到，理论比较多，浅谈即止～高大全的书容易被写砸，这本小薄书面很全，接下来看实际应用逐点击破吧～
  •     设计理论的东西太多了，不是我想要的，有点像《CSS Garden》。
  •     不错～
  •     书中介绍了一些不错的开源小项目，后面几章侧重思想，就css目前来说，最佳实践还是bootstrap3，foundation等框架
  •     中英版本都看过，推荐。响应式设计绝不仅仅是开发者的事情，需要产品一同来决定。
  •     响应式设计入门，阅读体验很好。
  •     @20130425 开始阅读. 第一章才是最重要的。一定好好好看第一章。这是总章。类似于独孤九剑的总诀式。ps：这本书似乎是校友翻译的？ 看译者序最后说是2012年x月于xx大学。 @20130902 终于把最后2章看完了.得出的教训就是看书最好是一口气看完,不然隔得时间久了,真的会失去连贯性.不管是书的内容还是看书的热情. 这本书对我来说,稍微有些超前,部分技术已经在用.但是对于我这个web新人来说,还不是太实用.可以留作以后参考.
  •     Mark Boulton在一篇博客种谈到响应式设计包含有3种不同的东西：传感器，系统，执行器。
  •     一半讲代码，一半讲设计，作者涉及面很广
  •     标原文啊啊啊
  •     作者语言幽默，但是实质性内容不多。
  •     还不错。
  •     从 布局、media query、渐进式增强 3个方面揭露了响应式布局的本质和方向，非常好。后面几章（5~9）则略显枯燥
  •     精读了前5章，后面的粗略的翻了过去，就响应式来说比图灵的那一本好很多
  •     给一个概念
  •     基本思想：最基础用用户需求需要被满足 基本方法：查到当前设备的属性，针对性编辑，以最佳方式动态呈现 技术：开放性平台与SDK的应用简化业务
  •     和另外几本讲web响应式设计/HTML5的书大同小异啊
  •     这本书主要是从大处着手，对读者需要一定的css基础功。
  •     做项目的时候拿来应急。
  •     花了三天时间把这本书看完了。之前知道RWD但是没有具体的操作过，真的是很好的实战指南啊。另外当一开始就用RWD的思想去设计站点时，以移动优先为原则，那么它会颠覆你之前的思维和设计模式。
  •     前面几章讲媒介查询、布局、移动设计优先、渐进增强等，对RWD有了进一步的了解，后面几章很枯燥就没看了。毕竟是2013年的书，前端开发变化日新月异，广泛阅读还是挺有好处的。
  •     对响应式的介绍比较具体，完整，比较系统，让人容易接受和理解。
  •     比较认真了看了此书，比较系统的介绍，看完对响应式设计的一些完全的认知，不过确实更适合开发同学，但作为设计师，还是需要一些自己的思考与转译。
  •     2013-06-13亚马逊27.5￥；粗略一翻。
  •     适合前端开发看
  •     一些细节上的东西，以及，响应式不止是响应式布局
  •     方法论太多，意思不大。
  •     在书店一中午翻完，概念是不错，不少东西是抄的别的书，而流式布局，媒体查询等其它书上都讲了很多，svg，设备识别这些业界使用已久。如果一两年前出版，这是本好书，但现在太迟了，书里讲的都是大家用过的东西，且不够深入，说是“实践”实则“基础”。对于有移动端开发经验的人来说，这本书可有可无。
  •     不错的设计思维传导
  •     弥补了响应式的好多观念
 

外国儿童文学,篆刻,百科,生物科学,科普,初中通用,育儿亲子,美容护肤PDF图书下载,。 零度图书网 

零度图书网 @ 2024