Responsive Mobile Design
Designing for Every Device
Published on 2. October 2014
Book
Paperback/Softback
256 pages
978-0-13-388821-8 (ISBN)
Description
Create Web Designs That Work Perfectly on Any Device-Simply and Beautifully!
Billions of people access the web via smartphones, tablets, and devices of all types, using every imaginable interface and display. But they all want the same thing: the right information, right now, delivered in the most aesthetically pleasing way possible. Give them what they want with Responsive Mobile Design.
Whether you're a developer, designer, or manager, Phil Dutson teaches you principles, techniques, and best practices for delivering a successful experience to all users on all devices.
Dutson shows how to design sites that are responsive "from the start," while keeping development simple and flexible. Next, he delivers complete technical know-how for transforming responsive designs into responsive sites. You'll find coverage of key issues such as integrating media content, optimizing performance, and serving Retina or high-density displays.
Throughout, he combines detailed and practical explanations with functional, easy-to-reuse code snippets.
Coverage includes
* Demonstrating why "mobile first" is still a best practice
* Fusing content, structure, and beauty to deliver experiences users love
* Using responsive images to improve speed and convey visual messages more effectively
* Using grid systems without making it feel like your design is "locked in a box"
* Mastering measurement values such as px, em, rem, and viewport units-and understanding their crucial differences
* Improving the finer details of your design with web fonts
* Retrofitting current websites to prepare them for the future
* Introducing web components into your HTML markup
* Using built-in browser development tools to streamline debugging and "in-browser" prototyping
Billions of people access the web via smartphones, tablets, and devices of all types, using every imaginable interface and display. But they all want the same thing: the right information, right now, delivered in the most aesthetically pleasing way possible. Give them what they want with Responsive Mobile Design.
Whether you're a developer, designer, or manager, Phil Dutson teaches you principles, techniques, and best practices for delivering a successful experience to all users on all devices.
Dutson shows how to design sites that are responsive "from the start," while keeping development simple and flexible. Next, he delivers complete technical know-how for transforming responsive designs into responsive sites. You'll find coverage of key issues such as integrating media content, optimizing performance, and serving Retina or high-density displays.
Throughout, he combines detailed and practical explanations with functional, easy-to-reuse code snippets.
Coverage includes
* Demonstrating why "mobile first" is still a best practice
* Fusing content, structure, and beauty to deliver experiences users love
* Using responsive images to improve speed and convey visual messages more effectively
* Using grid systems without making it feel like your design is "locked in a box"
* Mastering measurement values such as px, em, rem, and viewport units-and understanding their crucial differences
* Improving the finer details of your design with web fonts
* Retrofitting current websites to prepare them for the future
* Introducing web components into your HTML markup
* Using built-in browser development tools to streamline debugging and "in-browser" prototyping
Reviews / Votes
"Whether you're building or refining your skill set, Responsive Mobile Design is the quintessential guide to getting up to speed with modern web practices. Phil's unique background and expertise grant him insights that both the hardcore programmer and pixel perfect designer will find invaluable."-Jacob R. Stuart, Web/UI Designer
"It's impossible to build for the web today without taking various screen sizes and form factors into account; you never know if your user will be on a phone, tablet, or desktop. This book helps lay the groundwork for building responsive web designs. It's really a must-read."
-Cameron Banga, Co-founder, 9magnets, LLC
"Anyone looking for a comprehensive book on responsive design tactics would do well to pick up a copy of Responsive Mobile Design. Phil does a stellar job of breaking down the how and why of RWD in this practical guide to designing for a wide spectrum of screen sizes and devices."
-Dennis Kardys, Design Director, WSOL
"While the three initial technical ingredients of RWD (fluid grids, flexible images, and media queries) still stand true, building a site today requires much more thought and know-how than it used to. This book will take you beyond the basics and teach you the ins and outs of modern web development."
-Erik Runyon, Director of Web Communications, University of Notre Dame
"Phil Dutson unveils a dummy-proof treasure trove of essential mobile design advice, resources, and examples bound to enlighten designers and developers alike. This book belongs on every web designer's shelf-a comprehensive guide to return to time and time again."
-Kaylee White, Web Designer, SEO.com
More details
Person
Phil Dutson is a Solution Architect over client-side and mobile implementation for ICON Health & Fitness. He is the author of Sams Teach Yourself jQuery Mobile in 24 Hours; jQuery, jQuery UI, and jQuery Mobile Recipes and Examples; and The Android Developer's Cookbook, 2nd Edition. He enjoys learning and writing about technology, and spreading enlightenment to the world one portal at a time with his sons playing Ingress.
Content
Preface xv
PART I: CREATING A RESPONSIVE LAYOUT 1
Chapter 1 Content Matters 3
What Makes Up Content 4
Choosing the Right Content 8
Discussing Content Sliders 13
Summary 14
Chapter 2 Why Mobile First 15
Viewing the Web 16
Considerations When Starting Small 19
Summary 26
Chapter 3 Working with Grids 27
Choosing a Grid 28
Using a Responsive Grid 31
Using an Adaptive Grid 34
Best of Both Worlds 37
Summary 37
Chapter 4 Displaying Tabular Data 39
Defining Tabular Data 40
Working with Tabular Data 41
Summary 54
Chapter 5 Working with Measurement Values 55
Using Pixels 56
Using Percentages 57
Using Em and Rem Units 61
Viewport Measurements 63
Summary 67
Chapter 6 Using Media Queries 69
The Viewport Meta Tag 70
Implementing Breakpoints 72
Device-Specific Media Queries 78
Summary 82
Chapter 7 Typography 83
Web Fonts 84
Font Formats 84
Browser and Device Support 86
Using Font Services 91
Icon Fonts 93
Summary 94
Chapter 8 Retrofitting an Existing Site 95
Choosing a Proper Layout for Mobile 96
Working with Components 101
Considerations When Going Mobile 106
Summary 109
PART II: WORKING WITH RESPONSIVE MEDIA 111
Chapter 9 Responsive Images 113
Images Should Be Responsive 114
Using a JavaScript Solution 124
Summary 127
Chapter 10 Responsive Video 129
Using Video 130
Delivery Systems 130
Making Videos Fit Mobile Devices 134
Summary 140
Chapter 11 Image Compression 141
Image Types 142
Compression Utilities 148
Compression Results 152
Summary 153
PART III: ENHANCING PERFORMANCE 155
Chapter 12 Conditional JavaScript 157
Why Conditional JavaScript 158
Using Conditional JavaScript 162
Using JavaScript Plugins 167
Summary 169
Chapter 13 Web Components 171
Working with Web Components 172
Examples of Web Components 172
Working with the DOM 176
Web Component Polyfills 180
Summary 183
Chapter 14 Device Detection and Server Requests 185
Device Detection 186
HTTP Headers 191
Using Client Hints 194
Summary 196
Chapter 15 Server Optimization 197
Server Setup 198
Web Servers 198
Server Plugins 201
Summary 209
Chapter 16 High Performance with Development Tools 211
Development Tools 212
Browser Developer Tools 212
Build Tools 225
Summary 228
Index 229
PART I: CREATING A RESPONSIVE LAYOUT 1
Chapter 1 Content Matters 3
What Makes Up Content 4
Choosing the Right Content 8
Discussing Content Sliders 13
Summary 14
Chapter 2 Why Mobile First 15
Viewing the Web 16
Considerations When Starting Small 19
Summary 26
Chapter 3 Working with Grids 27
Choosing a Grid 28
Using a Responsive Grid 31
Using an Adaptive Grid 34
Best of Both Worlds 37
Summary 37
Chapter 4 Displaying Tabular Data 39
Defining Tabular Data 40
Working with Tabular Data 41
Summary 54
Chapter 5 Working with Measurement Values 55
Using Pixels 56
Using Percentages 57
Using Em and Rem Units 61
Viewport Measurements 63
Summary 67
Chapter 6 Using Media Queries 69
The Viewport Meta Tag 70
Implementing Breakpoints 72
Device-Specific Media Queries 78
Summary 82
Chapter 7 Typography 83
Web Fonts 84
Font Formats 84
Browser and Device Support 86
Using Font Services 91
Icon Fonts 93
Summary 94
Chapter 8 Retrofitting an Existing Site 95
Choosing a Proper Layout for Mobile 96
Working with Components 101
Considerations When Going Mobile 106
Summary 109
PART II: WORKING WITH RESPONSIVE MEDIA 111
Chapter 9 Responsive Images 113
Images Should Be Responsive 114
Using a JavaScript Solution 124
Summary 127
Chapter 10 Responsive Video 129
Using Video 130
Delivery Systems 130
Making Videos Fit Mobile Devices 134
Summary 140
Chapter 11 Image Compression 141
Image Types 142
Compression Utilities 148
Compression Results 152
Summary 153
PART III: ENHANCING PERFORMANCE 155
Chapter 12 Conditional JavaScript 157
Why Conditional JavaScript 158
Using Conditional JavaScript 162
Using JavaScript Plugins 167
Summary 169
Chapter 13 Web Components 171
Working with Web Components 172
Examples of Web Components 172
Working with the DOM 176
Web Component Polyfills 180
Summary 183
Chapter 14 Device Detection and Server Requests 185
Device Detection 186
HTTP Headers 191
Using Client Hints 194
Summary 196
Chapter 15 Server Optimization 197
Server Setup 198
Web Servers 198
Server Plugins 201
Summary 209
Chapter 16 High Performance with Development Tools 211
Development Tools 212
Browser Developer Tools 212
Build Tools 225
Summary 228
Index 229