Unchain your data from the desktop with responsive visualizations Building Responsive Data Visualization for the Web is a handbook for any front-end development team needing a framework for integrating responsive web design into the current workflow. Written by a leading industry expert and design lead at Starbase Go, this book provides a wealth of information and practical guidance from the perspective of a real-world designer. You'll walk through the process of building data visualizations responsively as you learn best practices that build upon responsive web design principles, and get the hands-on practice you need with exercises, examples, and source code provided in every chapter. These strategies are designed to be implemented by teams large and small, with varying skill sets, so you can apply these concepts and skills to your project right away.
Responsive web design is the practice of building a website to suit base browser capability, then adding features that enhance the experience based on the user's device's capabilities. Applying these ideas to data produces visualizations that always look as if they were designed specifically for the device through which they are viewed. This book shows you how to incorporate these principles into your current practices, with highly practical hands-on training.
- Examine the hard data surrounding responsive design
- Master best practices with hands-on exercises
- Learn data-based document manipulation using D3.js
- Adapt your current strategies to responsive workflows
Data is growing exponentially, and the need to visualize it in any context has become crucial. Traditional visualizations allow important data to become lost when viewed on a small screen, and the web traffic speaks for itself – viewers repeatedly demonstrate their preference for responsive design. If you're ready to create more accessible, take-anywhere visualizations, Building Responsive Data Visualization for the Web is your tailor-made solution.
Table of Contents:
Intro0duction xxv
Part ONE: Creating the Responsive Web
1 The Mobile Web 3
How We Got Here 4
The Web’s History 5
The Rise of Mobile Devices 8
The Mobile Tipping Point 10
The Mobile Web Today 13
Mobile Web Considerations 13
Benefits of the Mobile Web 15
Building for the Most Users 17
Mobile Web Design 17
The Way To Build Today 18
A Taste of Progressive Enhancement 20
Summary 23
2 Responsive Web Design Tenets 25
The Gist 26
Building for the Limited User 27
Building for Every User 28
Adaptive vs. Responsive 29
The Broad Adaptive 29
Limiting Your Adaptive Design Definition 33
Desktop-First vs. Mobile-First 36
Four Principles 38
Be Universal 39
Be Flexible 43
Be Economical 46
Be Specific 47
Seven Points of Focus 49
Measure 50
Flow 51
Nesting 54
Endpoints 57
Breakpoints 59
Typography 63
Images 66
Summary 69
3 Working with a Flexible Grid 71
The Gist 72
What Is a Grid System? 72
Flexible Units 75
The Meticulous Client 75
Moving to Relative Units 79
Using a Grid System 81
Another Project 82
Branching Out 93
Creating a Reusable, Flexible Grid (in Five Easy Steps) 93
Unit 95
Gutter 95
X-Count 95
Columns 96
Rows 96
Putting It All Together 97
Summary 98
Try It 98
4 Designing Responsive
Layouts with CSS 101
The Gist 102
A Brief History of CSS 102
You’ve Come a Long Way, Baby 103
Responsive Layout Design 118
The Media Query 118
Starting from the Bottom 127
The Reusable Responsive Grid 144
Building a Reusable Grid 145
Building a Responsive Grid 147
Summary 148
5 Enhancing with JavaScript 151
Using JavaScript 152
JavaScript Enables Rich Interactivity 153
Remember Progressive Enhancement 155
Sensible Defaults 157
Responsive JavaScript 163
Server-Side Feature Detection 164
Building from CSS 164
JavaScript’s matchMedia Object 166
Limber Up 168
AJAX 168
Perceived Performance 172
Summary 182
Try It 182
Part Two: Creating Responsive
Data Visualization
6 Data Design: An Abridged History 187
Learning From Data 188
Data, Information, and Knowledge 189
Size Matters 191
Data’s Data 192
The Big Pile 193
Extracting Meaning 193
Communicating Meaning 195
What You Get from the Web 210
Interactivity 211
A Taste of Responsive 212
Summary 214
7 Responsive Data Visualization Tenets 217
Designing Content-First 218
Still Just the Web 219
Distilling Data 220
Revisiting Responsive Design Principles 229
Be Universal 230
Be Flexible 232
Be Economical 235
Be Specific 240
Seven Points of Focus 241
Measure 242
Flow 245
End points 247
Breakpoints 249
Grouping Points 252
Images 253
Layering 256
Responding to Data 258
Know Your Audience 259
Know Your Data 260
Summary 261
8 Thinking Small 263
Designing for the Smallest Canvas: No Canvas 264
Building for a Blind User 266
The Good API 269
The API-First Team 278
The Tiny Canvas 279
The Fitness App 279
Layering 283
Enhancing Efficiently 285
Growing Up 286
First, Change Everything 287
They’re Just Numbers 290
Summary 291
9 Asset Dependence 293
Dynamic Data 294
Dipping Your Toe In 294
Data versus Screen 298
Reacting to Data Changes 301
Tying Visualization to Screens 308
Grouping Again 309
Summary 312
Try It 313
10 Code-Driven Visualization 315
Unknown Inputs and Outputs 316
To the User 317
To the Data 317
Putting It Together 320
Using D3.js 320
Getting Started with D3.js 321
Data and the DOM 348
Building Responsive Data Visualization for the Web 354
Client Responsiveness 355
Data Responsiveness 361
The Bigger Picture 363
Rational Defaults 363
Driving Design with Data 371
Clear, Not Clever 372
Summary 372
Try It 373
11 Bui1ding the Future-Friendly Web 375
The Future of Data Design 376
Growing Stockpiles of Data 377
Setting a Standard for Data Markup 378
Embracing Uncertainty 379
Where Complexity Lies Today 380
The Future-Friendly Manifesto 381
Responsible Web Design 385
Building API-first 386
Respecting Progressive Enhancement 386
Innovating 388
Standardizing 388
Summary 389
Part Three: Additional Resources A Resources 393
Responsive Data Visualization 394
Grids 394
Infographic Design 394
Responsive Design 395
D3.js 395
More Resources Online 396
Index 397
