We use cookies to provide essential features and services. By using our website you agree to our use of cookies .

×

Warehouse Stock Clearance Sale

Grab a bargain today!

Building Responsive Data Visualization for the Web
By

Rating

Product Description
Product Details

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

About the Author

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.

Ask a Question About this Product More...
Write your question below:
Look for similar items by category
Item ships from and is sold by Fishpond Retail Limited.
Back to top