Building Responsive Data Visualization for the Web

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.

Autorentext

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.

Zusammenfassung
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.

Inhalt
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<...