Implementing Responsive Design

Implementing Responsive Design pdf epub mobi txt 电子书 下载 2025

出版者:New Riders
作者:Tim Kadlec
出品人:
页数:288
译者:
出版时间:2012-7-31
价格:GBP 27.99
装帧:Paperback
isbn号码:9780321821683
丛书系列:
图书标签:
  • web
  • 设计
  • 交互设计
  • RWD
  • 响应式
  • Responsive
  • 响应式设计
  • 互联网
  • Responsive Design
  • Web Development
  • UI Design
  • Mobile First
  • Design Patterns
  • User Experience
  • Mobile Optimization
  • Frontend Development
  • CSS3
  • Javascript
想要找书就要到 小美书屋
立刻按 ctrl+D收藏本页
你会得到大惊喜!!

具体描述

New devices and platforms emerge daily. Browsers iterate at a remarkable pace. Faced with this volatile landscape we can either struggle for control or we can embrace the inherent flexibility of the web. Responsive design is not just another technique-it is the beginning of the maturation of a medium and a fundamental shift in the way we think about the web. Implementing Responsive Design is a practical examination of how this fundamental shift affects the way we design and build our sites. Readers will learn how to: * Build responsive sites using a combination of fluid layouts, media queries, and fluid media * Adopt a responsive workflow from the very start of a project * Enhance content for different devices * Use feature-detection and server-side enhancement to provide a richer experience

作者简介

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

目录信息

Chapter 1: the anywheRe, eveRywheRe weB 1
Where we went wrong . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
The devices are coming, the devices are coming . . . . . . . . . . . . . . . . . . . . . . . . . 4
Display size ....................................................................... 6
Network speeds ................................................................... 6
Standards support ................................................................. 7
Input method ..................................................................... 7
Context .......................................................................... 8
Separate sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Divergence ......................................................................10
Becoming responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Progressive enhancement .........................................................14
Why another book on responsive design? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
What’s covered? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Who is this book for? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Code examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
The companion site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Chapter 2: fluID layouts 21
Layout options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Fixed-width .....................................................................23
Fluid layouts .....................................................................25
Elastic layouts ...................................................................26
Hybrid layouts ...................................................................26
Which approach is the most responsive? ...........................................27
Sizing fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Pixels ...........................................................................28
Ems .............................................................................29
Percentages ......................................................................31
Bonus round: rems ...............................................................32
Which approach is the most responsive? ...........................................33
Converting from pixels ...........................................................34
x ImplemenTIng ResponsIve DesIgnGrid layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Content-out .....................................................................37
Setting the grid ..................................................................38
Mixing fixed and fluid widths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Table layouts—the right way ......................................................44
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Chapter 3: meDIa QueRIes 53
Viewports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
A pixel is a pixel, unless it isn’t .....................................................58
Viewport tag and properties ......................................................59
Media query structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Media types .....................................................................65
Media expressions ...............................................................67
Logical keywords ................................................................67
Rules ............................................................................72
Embedded versus external . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Media query order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Desktop down ...................................................................74
Mobile up .......................................................................75
Create your core experience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Determining breakpoints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Follow the content ...............................................................79
Enhancing for larger screens ......................................................83
Using ems for more flexible media queries .........................................85
Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Toggling .........................................................................88
Supporting Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Chapter 4: ResponsIve meDIa 95
What’s the problem? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Performance .....................................................................97
Selectively serving images to mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
JavaScript ......................................................................100
conTenTs xiIntroducing matchMedia ........................................................104
Responsive image strategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Fighting the browser ............................................................105
Resignation .....................................................................106
Going to the server ..............................................................106
Responsive image options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Sencha.io Src ...................................................................106
Adaptive Images ................................................................107
Wait, what’s the answer here? ....................................................111
Background images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
While we’re at it .................................................................113
High-resolution displays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
SVG ...........................................................................116
Other fixed-width assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Video ..........................................................................118
Advertising .....................................................................122
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Chapter 5: plannIng 127
Choosing to be responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Performance ....................................................................129
Context ........................................................................130
Content negotiation .............................................................130
Time investment ................................................................130
Support ........................................................................131
Advertising .....................................................................132
Conclusion .....................................................................132
Consider your analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Skewed site analytics ............................................................134
Which stats matter ..............................................................135
Skewed market share statistics ...................................................139
Consider your content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Content audit ...................................................................140
Page tables .....................................................................143
xii ImplemenTIng ResponsIve DesIgnConsider where you’re going . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Optimized for some, accessible to many ..........................................144
Consider the cross-device experience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Prepare your test bed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Actual devices ..................................................................148
Emulators ......................................................................150
Third-party services .............................................................152
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Chapter 6: DesIgn woRkflow 153
Your mileage may vary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
An interactive medium ..........................................................155
Collaboration ...................................................................155
Thinking in systems .............................................................160
Thinking mobile first . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Mobile is exploding .............................................................161
Mobile forces you to focus .......................................................162
Mobile extends your capabilities .................................................164
The tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Wireframes .....................................................................165
Mock-ups ......................................................................168
Style guides ....................................................................173
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Chapter 7: ResponsIve content 179
Starting with the content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Content types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Purpose ........................................................................182
Creation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182
Structure .......................................................................182
What content to display, and when . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Removing content ..............................................................184
Enhancing content .............................................................186
When should content order change? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Structure, again .................................................................192
conTenTs xiiiWhere we need to go . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Code soup ......................................................................194
Baby steps ......................................................................195
Building an API .................................................................196
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Chapter 8: Ress 199
User agent detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Anatomy of a user agent string ...................................................202
What can you do with user agent detection? ......................................203
Feature detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Modernizr ......................................................................204
Going to the server ..............................................................205
Combining user agent detection and feature detection . . . . . . . . . . . . . . . . . 207
RESS: The best of both worlds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Troubled waters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Installing WURFL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Configuration ..................................................................214
Detecting capabilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Making calls ....................................................................221
Optimizing for touch ............................................................223
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Chapter 9: ResponsIve expeRIences 227
A system of sensors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Network . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
What can we do? ................................................................231
Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Classifying context ..............................................................236
Observe and research ...........................................................237
Capabilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
HTML5 input types ............................................................238
APIs ...........................................................................241
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
xiv ImplemenTIng ResponsIve DesIgnChapter 10: lookIng foRwaRD 255
Photo Credits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
About the Technical Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
· · · · · · (收起)

读后感

评分

评分

做responsive web design,如果需要看什么书籍的话,这一本就够了,其他的自己google上搜搜,在项目中积累问题的解决方法和经验,这样就够了。 这是一本很负责任的书,里面的旁白中有好的想法和插件的介绍,还有在线的sample供参考和练习,真的是一本不可多得的好书。 可以先...  

评分

好书,翻译简洁明了,很喜欢~《响应式Web设计实践》比《响应式Web设计:HTML5和CSS3实战》讲得更深入,但是作者已经默认读者懂得基础的HTML5和CSS3知识,而没有介绍例如<aside>、<section>、radius这些标签或者属性的意义。所以个人觉得这两本书能够很好的互补。  

评分

评分

[《响应式Web设计实践》](http://book.douban.com/subject/21263576/)是一本关于响应式Web设计的书,虽然之前也有构建响应式站点的经验(比如[http://z.qzone.com](http://z.qzone.com))仔细读完全书,才知道响应式不只是media query这么简单。 本书内容非常丰富,下面介绍一...  

用户评价

评分

文字稍显晦涩。。。好多不认识的词。。。最后一个demo很fancy。。。

评分

The best programming book I've read this year. Three core concepts of web responsive design are elegantly explained, namely fluid layout, media query and responsive media, and most importantly, it's concisely written.

评分

看了之后挺悲观的,或者是不被支持,或者是将被替代,当前页面和浏览器的各种标准确实还是挺坑人的。

评分

The best programming book I've read this year. Three core concepts of web responsive design are elegantly explained, namely fluid layout, media query and responsive media, and most importantly, it's concisely written.

评分

文字稍显晦涩。。。好多不认识的词。。。最后一个demo很fancy。。。

本站所有内容均为互联网搜索引擎提供的公开搜索信息,本站不存储任何数据与内容,任何内容与数据均与本站无关,如有需要请联系相关搜索引擎包括但不限于百度google,bing,sogou

© 2025 book.quotespace.org All Rights Reserved. 小美书屋 版权所有