This eBook includes the following formats, accessible from your Account page after purchase:
EPUB The open industry format known for its reflowable content and usability on supported mobile devices.
MOBI The eBook format compatible with the Amazon Kindle and Amazon Kindle applications.
PDF The popular standard, used most often with the free Adobe® Reader® software.
This eBook requires no passwords or activation to read. We customize your eBook by discreetly watermarking it with your name, making it uniquely yours.
Also available in other formats.
Register your product to gain access to bonus material or receive a coupon.
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.
• 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
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
Chapter 2 Why Mobile First 15
Viewing the Web 16
Considerations When Starting Small 19
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
Chapter 4 Displaying Tabular Data 39
Defining Tabular Data 40
Working with Tabular Data 41
Chapter 5 Working with Measurement Values 55
Using Pixels 56
Using Percentages 57
Using Em and Rem Units 61
Viewport Measurements 63
Chapter 6 Using Media Queries 69
The Viewport Meta Tag 70
Implementing Breakpoints 72
Device-Specific Media Queries 78
Chapter 7 Typography 83
Web Fonts 84
Font Formats 84
Browser and Device Support 86
Using Font Services 91
Icon Fonts 93
Chapter 8 Retrofitting an Existing Site 95
Choosing a Proper Layout for Mobile 96
Working with Components 101
Considerations When Going Mobile 106
PART II: WORKING WITH RESPONSIVE MEDIA 111
Chapter 9 Responsive Images 113
Images Should Be Responsive 114
Chapter 10 Responsive Video 129
Using Video 130
Delivery Systems 130
Making Videos Fit Mobile Devices 134
Chapter 11 Image Compression 141
Image Types 142
Compression Utilities 148
Compression Results 152
PART III: ENHANCING PERFORMANCE 155
Chapter 13 Web Components 171
Working with Web Components 172
Examples of Web Components 172
Working with the DOM 176
Web Component Polyfills 180
Chapter 14 Device Detection and Server Requests 185
Device Detection 186
HTTP Headers 191
Using Client Hints 194
Chapter 15 Server Optimization 197
Server Setup 198
Web Servers 198
Server Plugins 201
Chapter 16 High Performance with Development Tools 211
Development Tools 212
Browser Developer Tools 212
Build Tools 225