Building Responsive Data Visualization for the Web

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.

BILL HINDERMAN is the lead site optimization UI engineer for Orbitz Worldwide, where he designs, prototypes, develops, and A/B tests experimental new products for Orbitz's customer-facing brands. He is also founder and creative lead at Starbase Go, a digital creative studio that works with designers to create innovative web products. Bill is passionate about creating web experiences that work beautifully and look even better.

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

The New copy of this book will include any supplemental materials advertised. Please check the title of the book to determine if it should include any access cards, study guides, lab manuals, CDs, etc.

The Used, Rental and eBook copies of this book are not guaranteed to include any supplemental materials. Typically, only the book itself is included. This is true even if the title states it includes any access cards, study guides, lab manuals, CDs, etc.