Implementing Responsive Design

书名：Implementing Responsive DesignBuildingsitesforananywhere,everywhereweb
作者：TimKadlec
译者：
ISBN：9780321821683
出版社：NewRiders
出版时间：2012-7-31
格式：epub/mobi/azw3/pdf
页数：288
豆瓣评分： 7.7

书籍简介：

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”的演讲。

书友短评：

@ houhr 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。。。 @ houhr 在译

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
· · · · · ·

添加微信公众号:好书天下获取