Learning-responsive design (learning responsive WEB design) full version pdf

Want the best user experience for tablets, phones, notebooks, big-screen devices, and even wearable devices? Then learn the responsive design. This is a very comprehensive, very thorough introductory book. In particular, this book will not only quickly grasp the fundamentals of responsive web design, but also be able to understand the workflow of responsive design from start to finish, until the project is finally on line.

As long as your work is related to creating, upgrading or upgrading your site, you should look at this book. In other words, not only front-end developers, designers, product managers, project managers, but even back-end developers can learn the essence of responsive design through this book. This book, based on the cutting-edge technology and community experience of responsive design, brings together the wisdom and best practices of our predecessors. The reader is expected to "stand on the shoulders of giants" and apply the content of the book to future projects for the benefit of more users.

1. Content strategy should be developed prior to visual design
2. The default design should be for the narrowest screen width
3. Key to responsive web design: HTML elements and CSS properties
4. Display different CSS styles through media queries based on the device viewport width
5. Process images, text layout, and navigation
6. Build a lighter, faster website with performance-optimized technology

：

Learning-responsive design (learning responsive WEB design) full version pdf

Catalogue
Foreword XV
The first part of the Responsive design basics
1th Chapter What is responsive design 3
1.1 Bit Base 3
1.2 History 6
1.2.1 Fixed width design 6
1.2.2 Mobile Web browsing 7
1.2.3 Mobile Website 8
1.2.4 More Devices 9
1.2.5 Media Enquiry 10
1.2.6 Flexibility 11
1.2.7 Responsive web Design 12
1.3 Why is responsive design 12
1.3.1 Every device gets the right design 12
1.3.2 Less work 14
1.3.3 Search Optimization 14
1.4 Summary 15
2nd Response Content 16
2.1 Content Policies 16
2.2 Content Finishing 18
2.2.1 Only use the 18 you need
2.2.2 How to Streamline 19
2.2.3 Content Audit 20
2.3 Content Authoring 20
2.3.1 How users Read 20
2.3.2 Concise Language 22
2.4 Content Equality 23
2.5 Content Management 24
2.6 Adaptive Content 24
2.7 Summary 27
The second section creates the responsive web site
3rd HTML 31 of the responsive website
3.1 Using HTML 32
3.1.1 HTML version 32
3.1.2 Web Standard 33
3.1.3 Using HTML5 33
3.2 Page Basic Structure 34
3.2.1 Document Type Declaration 34
3.2.2 Document Structure 34
3.2.3 Page Title 35
3.2.4 Character Set 36
3.3 Viewport 37
3.3.1 Width 40
3.3.2 Initial zoom ratio 40
3.3.3 User-Scalable 40
3.3.4 Maximum zoom ratio 41
3.4 Structural Elements 41
3.4.1 Screen Reader 42
3.4.2 3.4.3 <nav> 43
3.4.4 <footer> 43
3.4.5 <article> 44
3.4.6 <aside> 44
3.4.7 IE Support 44
3.5 Creating a page 45
3.5.1 Structural Element 45
3.5.2 Adding content 46
3.5.3 No Style page 47
3.6 Clear and semantic HTML 48
3.6.1 Separation of content and performance 48
3.6.2 Notes 49
3.7 Summary 50
4th CSS 51 of responsive Web sites
How 4.1 works with CSS 52
4.2 CSS Version 53
4.3 Where to place CSS 57
4.3.1 embedded Style 57
4.3.2 Style Sheet 58
4.3.3 Inline Style 59
4.4 Cascade 59
4.4.1 Cascade Action Mode 59
4.4.2 Important Rules 60
4.4.3 Inline Style 60
4.4.4 ID Selector 60
4.4.5 class, attribute, and pseudo class selector 61
4.4.6 element and pseudo element selector 61
4.4.7 Inheritance Rule 61
4.4.8 Default Value 62
What happens to 4.4.9 conflict 62
4.5 using cascading 62
4.5.1 Default value and reset 63
4.5.2 Inheritance Rule 64
4.5.3 Element Rule 64
4.5.4 other rules 65
4.5.5 Keep it simple 65
4.6 Notes 66
4.7 Organize your style sheet 66
4.8 Box Model 67
4.8.1 Unit of Measure 68
4.8.2 EM 68
4.8.3 Height and Width 69
4.8.4 outer margin and internal margin 70
4.8.5 Border 71
4.8.6 Box Size 72
4.9 Show 74
4.10 Positioning 75
4.10.1 Static Positioning 75
4.10.2 relative positioning 75
4.10.3 Absolute Positioning 76
4.10.4 Fixed positioning 77
4.10.5 unit of measure for positioning elements 78
4.11 Floating and Clearing 79
4.12 Basic Style 81
4.13 Summary 83
5th. Media Enquiry 85
5.1 What is media query 85
5.2 Media Query Structure 87
5.3 Using media queries in style sheet links 89
5.4 Other ways to use media queries 90
5.5 What can we inquire about 91
5.5.1 viewport width and height 91
5.5.2 screen width and height 92
5.5.3 Direction 92
5.5.4 width-to-height ratio 92
5.5.5 Resolution 93
5.5.6 Other media features 93
5.6 Browser Support 94
5.6.1 IE Condition Note 94
5.6.2 Test Media Query Results 96
5.7 Breakpoint 96
5.8 Design Range 97
5.9 Responsive Design 98
5.9.1 Progressive Enhancement 98
5.9.2 design with a grid 99
5.9.3 using grid columns 100
5.9.4 priority for small screen design 101
5.10 Using Media Queries 102
5.11 Two-Column Layout 102
5.11.1 using floating 103
5.11.2 using grids 105
5.11.3 Join Media Enquiry 107
5.12 Setting the maximum width 108
5.13 How to select Breakpoints 109
5.14 Summary 110
The 6th Chapter Image 111
6.1 How to display images 112
6.1.1 CSS Alternatives 112
6.1.2 Content Image 113
6.1.3 Background Image 113
6.1.4 Image Flattening 113
6.1.5 Icon Font 114
6.2 Alternative Text 115
6.3 Image File Formats 118
6.3.1 JPEG 119
6.3.2 GIF 119
6.3.3 PNG 120
6.3.4 SVG 120
6.4 Optimizing Images 121
6.4.1 Pixels and Resolution 121
6.4.2 High-density screen 122
6.4.3 compressing Images 123
6.4.4 Actual Size 124
6.5 Content Image 126
6.5.1 Elements 126
6.5.2 Adding images 127
6.5.3 Flexible Image size 129
6.5.4 Media Enquiry 130
6.5.5 Max width 132
6.5.6 with image narration 134
6.6 Background Image 134
6.6.1 Adding a background image 135
6.6.2 Align 136
6.7 Responsive Image 137
6.7.1 Recommended Client Solutions 138
6.7.2 Other Solutions 139
6.7.3 Breakpoint 143
6.8 Summary 145
Part III play-responsive design
7th. Responsive Design Workflow 149
7.1 Strategy and Planning 149
7.1.1 User Research 150
7.1.2 Content 150
7.2 Contents prior to Layout 152
7.2.1 Content Components 152
7.2.2 Designing in Text mode 153
7.2.3 Linear Design 155
7.2.4 Content Level 155
7.3 Considering layout 155
7.3.1 Sketching 155
7.3.2 starting from a small screen 156
7.3.3 Mobile Priority 157
7.4 Prototypes 158
7.4.1 Line block Diagram and prototype 158
7.4.2 Line Block Diagram 158
7.4.3 Response Prototype 159
What's in the 7.4.4 prototype 160
7.4.5 starting from the Foundation 160
7.4.6 Creating a page layout 160
7.4.7 Frame 162
7.4.8 Prototype Creation Tool 163
7.5 Visual Design 164
7.5.1 Style Board 164
7.5.2 Test and Adjustment 165
7.5.3 Style Guide 166
7.6 Responsive design Tools 168
7.6.1 Adobe Photoshop 168
7.6.2 Adobe InDesign 168
7.6.3 Adobe Edge Reflow 169
7.6.4 Adobe Dreamweaver 170
7.6.5 Browser 171
7.7 Marketing Responsive Design 172
Why 7.7.1 to use responsive design 172
7.7.2 Educate your customers 173
7.7.3 Stress Responsiveness 173
7.7.4 responsive design is not always the best choice 174
7.7.5 Fee 174
7.8 Cooperation with customers 175
7.8.1 Deliverables 175
7.8.2 Presentation Report 176
7.9 Summary 177
The 8th chapter is more than mobile 178
8.1 User Experience 178
8.1.1 User First 179
8.1.2 Mobile phone user's fallacy see 180
8.1.3 for application Environmental Design 180
8.1.4 users with mobile phones only 181
8.1.5 Using multiple devices 182
8.2 Device-Independent design 182
8.3 Focus on mobile first 183
8.4 Do what you can 183
8.5 Device Type 186
8.5.1 Mobile 186
8.5.2 Tablet PC 187
8.5.3 Other equipment 187
8.5.4 desktop computers and laptops 188
8.6 Touch 188
8.6.1 Capacitive Touch 189
8.6.2多-point Touch 189
8.6.3 gestures 189
8.6.4 JavaScript Event 190
8.6.5 Touch Target Size 191
8.6.6 Navigation position 193
8.7 Screen Size 194
8.8 Accessibility (Universal design) 196
8.8.1 Vision 197
8.8.2 Audio 199
8.8.3 Input Method 200
8.8.4 Cognitive Impairment 201
8.9 deciding which devices to support 201
8.10 Why test with a real device 202
8.10.1 Equipment Laboratory 203
8.10.2 Purchasing Equipment 203
8.11 Test 203
8.11.1 Authenticator 204
8.11.2 in browser window adjustment 204
8.11.3 Browser Tools 204
8.11.4 Browser and operating system 205
8.11.5 Emulator and Simulator 206
8.11.6 Auxiliary Technology 207
8.12 Summary 207
Part IV Design responsive Web site
9th Text Typesetting 211
9.1 Starts with HTML 212
9.2 Font 212
9.3 Using Fonts 214
9.3.1 well-designed fonts 214
9.3.2 self-hosted fonts 214
9.3.3 Font Service 215
9.3.4 Link Font Files 216
9.3.5 Creating a font stack 217
9.4 Resizing text 218
9.4.1 Forget Pixel 218
9.4.2 Screen Distance 218
9.4.3 Absolute vs. relative 219
9.4.4 Setting the default font size 220
9.4.5 Why is 100% 220
9.4.6 Unit of Measure 221
9.4.7 Relationship between font size 225
9.4.8 Line Height 225
9.5 President 227
9.5.1 Test President 228
9.5.2 adjusting margins and font size 229
9.5.3 Word breaker 231
9.5.4 Overflow line break 232
9.6 Left White 233
9.7 Padding and margin 234
9.8 Changing the font for screen size 234
9.9 Summary 235
10th chapter Navigation and header layout 237
10.1 Responsive Navigation 237
10.1.1 start from the screen 238
10.1.2 Styling List 238
10.1.3 Horizontal navigation 240
10.2 Website Brand 243
10.3 Navigation links 245
10.3.1 Flexibility 245
What 10.3.2 users want to do 245
10.3.3 Target-based navigation 247
10.3.4 Maintain consistency 248
10.3.5 Keep it simple 250
10.4 Navigation Mode 250
10.4.1 Top Navigation 252
10.4.2 Footer Navigation 254
10.4.3 Switch-type navigation 256
10.4.4 Toggle-Type Overlay Navigation 260
10.4.5 part-Priority navigation 260
10.4.6 Choosing a menu-based navigation 261
10.4.7 Drawer-Type navigation 263
10.4.8 Bottom Navigation 264
10.4.9 Skip Sub-navigation 266
10.4.10 Abandoned navigation 267
10.4.11 fixed menu for wide screen 269
10.5 Header 270
10.5.1 Minimalist Header 270
10.5.2 Complex Header 271
10.5.3 Navigation Icons 273
10.5.4 Other icons 275
10.6 Summary 277
11th Chapter Performance 279
11.1 Importance of Performance 280
11.2 performance as a design element 280
11.2.1 Network Connection 281
11.2.2 Balance 281
11.2.3 Bloated Network 281
11.3 How to load and render Web pages 282
11.3.1 Delay 283
11.3.2 DNS Request 283
11.3.3 REDIRECT 284
11.3.4 HTTP Request 284
11.3.5 Sending HTML files 284
11.3.6 Decompression 285
11.3.7 DOM 285
11.3.8 Rendering 11.3.9 Rendering <body> Elements 287
11.3.10 OnLoad Event 287
11.4 Performance Measurement 287
11.5 Cleanup Code 289
11.5.1 using a simple direct code 289
11.5.2 reduced by 290
11.6 Reduce HTTP requests to a minimum of 291
11.6.1 Series 291
11.6.2 third-party code 292
11.6.3 Image Flattening 293
11.7 Server Settings 293
11.7.1 Avoid redirection 293
11.7.2 File Compression 294
11.7.3 Browser Cache 295
11.8 JavaScript 296
What 11.8.1 JavaScript do 296
How 11.8.2 JavaScript Works 296
11.8.3-Block JavaScript 297
11.8.4 JavaScript Library 300
11.9 CSS 301
11.10 Hosting 302
11.10.1 Content Distribution Network 302
11.10.2 Content Management System 303
11.11 Conditionally loading content 303
11.12 Redraw and Reflow 305
11.13 RESS 305
11.14 Summary 307

Learning-responsive design (learning responsive WEB design) full version pdf