Implementing Responsive Designtxt,chm,pdf,epub,mobi下载 作者: [美] Tim Kadlec 出版年: 2012-7 页数: 288 定价: $ 45.19 ISBN: 9780321821683 内容简介 · · · · · ·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 Respon... 作者简介 · · · · · ·Tim Kadlec,是一位资深的Web开发者,也是Breaking Development联合创始人。Tim通过应用各类Web技术,满足了出版业、制造业、金融业等不同行业诸多用户对于跨设备完成各种规模任务的需求。 侯鸿儒,本科期间自学了HTML、CSS、JavaScript和PHP,在清华大学计算机系完成了有关HTML5应用的硕士毕业设计。之后又顺其自然地接触到了UI/UX,对响应式设计有着浓厚兴趣,并做过“Responsive Web Design & Workflow”的演讲。 目录 · · · · · ·Chapter 1: the anywheRe, eveRywheRe weB 1Where we went wrong . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 The devices are coming, the devices are coming . . . . . . . . . . . . . . . . . . . . . . . . . 4 Display size ....................................................................... 6 Network speeds ................................................................... 6 Standards support ................................................................. 7 · · · · · · () 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 · · · · · · () |
叙事别开生面
文字表现力极强
脑洞之大,角度只独特让我震撼
他的书必买,烧脑,值得珍藏