Building Responsive Data Visualization for the Web · The Gist 26 Building for the Limited User 27 Building for Every User 28 Adaptive vs. Responsive 29 The Broad Adaptive 29 Limiting

Building Responsive Data Visualization for the Web

Building Responsive Data Visualization for the Web

Bill Hinderman

Building Responsive Data Visualization for the Web

Published by John Wiley & Sons, Inc. 10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com

Copyright © 2016 by John Wiley & Sons, Inc., Indianapolis, Indiana

Published simultaneously in Canada

ISBN: 978-1-119-06714-6ISBN: 978-1-119-06713-9 (ebk)ISBN: 978-1-119-06720-7 (ebk)

Manufactured in the United States of America

10 9 8 7 6 5 4 3 2 1

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.

Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situ-ation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Web site is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or website may provide or recommendations it may make. Further, readers should be aware that Internet websites listed in this work may have changed or disappeared between when this work was written and when it is read.

For general information on our other products and services please contact our Customer Care Department within the United States at (877) 762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002.

Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.

Library of Congress Control Number: 2015951125

Trademarks: Wiley and the Wiley logo are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.

For my grandmother, Mary.

You showed me that the Internet is for people.

vii

AAbout the Author

Bill Hinderman is a software engineer and designer from Chicago. He is the lead site optimization UI engineer at Orbitz Worldwide (orbitz.com), and a space cadet and designer at Starbase Go (starbasego.com). He designs, prototypes, develops, and A/B tests experimen-tal new products for customer-facing brands.

He works alongside artistic and entrepreneurial individuals to craft innovative web experiences. Bill received his B.S. in computer science with a specialization in UI development from the University of Illinois in 2012. He’s a speaker at conferences on the future of web development, data visualization, and cross-platform design.

Bill is an avid runner and cocktail-maker, and he can wear the hell out of a suit. When he was four, he penned My Book About Me, in which he stated that he was glad he wasn’t a giraffe, and that his least favorite thing to do was sitting. Both of those statements hold true to this day.

ix

AAbout the Technical Editor

Randy Krum is an infographics and data visualization designer, author of the book Cool Infographics: Effective Communication with Data Visualization and Design (Wiley, 2014), and instructor of Infographics and Data Visualization Design at Southern Methodist University’s Continuing and Professional Education program (CAPE). Randy also runs the popular website Coolinfographics.com. Started in 2007, the site has grown into one of the most influential infographic sites online, handling up to 50,000 unique visitors per day. He is the founder and president of InfoNewt, a design company that creates infographics and visualizations for clients used for both online marketing and internal communications. Randy speaks at con-ferences, universities, corporate events, and government agencies about infographic design, data visualization methods, visual content marketing, and the effective use of visual information. Learn more at RandyKrum.com.

xi

CCredits

Acquisitions Editor

Jim Minatel

Project Editor

Adaobi Obi Tulton

Technical Editor

Randy Krum

Production Editor

Rebecca Anderson

Copy Editor

Luann Rouff

Manager of Content Development and Assembly

Mary Beth Wakefield

Marketing Director

David Mayhew

Marketing Manager

Carrie Sherrill

Professional Technology & Strategy Director

Barry Pruett

Business Manager

Amy Knies

Project Coordinator, Cover

Brent Savage

Interior Designer and Compositor

Happenstance Type-O-Rama

Proofreader

Nancy Carrasco

Indexer

Johnna VanHoose Dinse

Cover Designer

Bill Hinderman

Cover Image

Bill Hinderman

xiii

AAcknowledgments

I want to thank Carol Long from John Wiley & Sons. After opening for the morn-ing coffee break at the Data Visualization Summit in Boston, you walked up to me with a coffee in one hand and a business card in the other, and asked if I would like to write a book. Without your willingness to approach some ridiculous 24-year-old kid, this whole thing never would have happened.

I also have to give my most heartfelt appreciation to my project editor, Adaobi Obi Tulton. You were equal parts patient and stern regarding deadlines and deliverables, in a way that made this long book-making process enjoyable.

I also owe a massive thanks to Randy Krum for not only acting as technical editor on the book, but also giving me advice—as someone who has done this same thing before—on pitfalls to avoid, and paths to take.

Finally, I want to offer apologies to any family members, friends, coworkers, and strangers I was rude to, short with, or otherwise unpleasant to be around during deadline weeks. I promise it wasn’t you.

xv

CContents

00Introduction xxv

PART ONE: Creating the Responsive Web

01The Mobile Web 3How We Got Here 4

The Web’s History 5The Rise of Mobile Devices 8The Mobile Tipping Point 10

The Mobile Web Today 13Mobile Web Considerations 13Benefits of the Mobile Web 15Building for the Most Users 17

Mobile Web Design 17The Way To Build Today 18A Taste of Progressive Enhancement 20

Summary 23

xvi Contents

02Responsive Web Design Tenets 25The Gist 26

Building for the Limited User 27Building for Every User 28

Adaptive vs. Responsive 29The Broad Adaptive 29Limiting Your Adaptive Design Definition 33

Desktop-First vs. Mobile-First 36Four Principles 38

Be Universal 39Be Flexible 43Be Economical 46Be Specific 47

Seven Points of Focus 49Measure 50Flow 51Nesting 54Endpoints 57Breakpoints 59Typography 63Images 66

Summary 69

03Working with a Flexible Grid 71The Gist 72

What Is a Grid System? 72Flexible Units 75

The Meticulous Client 75Moving to Relative Units 79

Contents xvii

Using a Grid System 81Another Project 82Branching Out 93

Creating a Reusable, Flexible Grid (in Five Easy Steps) 93Unit 95Gutter 95X-Count 95Columns 96Rows 96Putting It All Together 97

Summary 98Try It 98

04Designing Responsive Layouts with CSS 101

The Gist 102A Brief History of CSS 102You’ve Come a Long Way, Baby 103

Responsive Layout Design 118The Media Query 118Starting from the Bottom 127

The Reusable Responsive Grid 144Building a Reusable Grid 145Building a Responsive Grid 147

Summary 148Try It 149

xviii Contents

05Enhancing with JavaScript 151Using JavaScript 152

JavaScript Enables Rich Interactivity 153Remember Progressive Enhancement 155Sensible Defaults 157

Responsive JavaScript 163Server-Side Feature Detection 164Building from CSS 164JavaScript’s matchMedia Object 166

Limber Up 168AJAX 168Perceived Performance 172

Summary 182Try It 182

PART TWO: Creating Responsive Data Visualization

06Data Design: An Abridged History 187

Learning From Data 188Data, Information, and Knowledge 189Size Matters 191Data’s Data 192

The Big Pile 193Extracting Meaning 193Communicating Meaning 195

Contents xix

What You Get from the Web 210Interactivity 211A Taste of Responsive 212

Summary 214

07Responsive Data Visualization Tenets 217

Designing Content-First 218Still Just the Web 219Distilling Data 220

Revisiting Responsive Design Principles 229Be Universal 230Be Flexible 232Be Economical 235Be Specific 240

Seven Points of Focus 241Measure 242Flow 245End points 247Breakpoints 249Grouping Points 252Images 253Layering 256

Responding to Data 258Know Your Audience 259Know Your Data 260

Summary 261

xx Contents

08Thinking Small 263Designing for the Smallest Canvas: No Canvas 264

Building for a Blind User 266The Good API 269The API-First Team 278

The Tiny Canvas 279The Fitness App 279Layering 283

Enhancing Efficiently 285Growing Up 286First, Change Everything 287They’re Just Numbers 290

Summary 291

09Asset Dependence 293Dynamic Data 294

Dipping Your Toe In 294Data versus Screen 298Reacting to Data Changes 301

Tying Visualization to Screens 308Grouping Again 309

Summary 312Try It 313

Contents xxi

10Code-Driven Visualization 315Unknown Inputs and Outputs 316

To the User 317To the Data 317Putting It Together 320

Using D3.js 320Getting Started with D3.js 321Data and the DOM 348

Building Responsive Data Visualization for the Web 354Client Responsiveness 355Data Responsiveness 361The Bigger Picture 363Rational Defaults 363

Driving Design with Data 371Clear, Not Clever 372

Summary 372Try It 373

11Building the Future-Friendly Web 375

The Future of Data Design 376Growing Stockpiles of Data 377Setting a Standard for Data Markup 378

xxii Contents

Embracing Uncertainty 379Where Complexity Lies Today 380The Future-Friendly Manifesto 381

Responsible Web Design 385Building API-first 386Respecting Progressive Enhancement 386Innovating 388Standardizing 388

Summary 389

PART THREE: Additional Resources

AResources 393Responsive Data Visualization 394Grids 394Infographic Design 394Responsive Design 395D3.js 395More Resources Online 396

Index 397

00

Introduction

Before we do anything, I want to tell you about my first experience with the web.

It was 1996, and I was at home, sitting at my mother’s Windows 3.1 machine. We had recently heard about this “Internet” from my grandmother, who had been using it to communicate with a friend living in Hong Kong.

To us, this was science fiction. I was six years old, however, and science fiction wasn’t as sharply differentiated from sci-ence fact as it (sometimes) is today, so it never occurred to me that this shouldn’t be possible.

xxvi Introduction

This was my first time at the computer in a week, not because I wasn’t using a com-puter regularly already, but because a week prior I had gotten up very early, logged onto my mother’s computer, and, having memorized the keystrokes and icons, rather than the actual words, navigated to the Control Panel and turned every single background, foreground, and text color white. When I got home from kindergarten that day, I was greeted less kindly than with the typical chocolate milk and Happy Days reruns.

Someone who can’t differentiate between science fiction and science, fact

Therefore, a week after dismantling my minimalist design, I was about to experi-ence the Internet. My next-door neighbor at the time was also named Billy; and in a grand act of vanity, I decided I would send my first e-mail message to the only other person I knew who shared my name.

I opened the e-mail client and slowly chicken-pecked the following:

Isn’t technology great?!

-Billy H.

In little-kid time, it took somewhere between one second and 700 years for this e-mail to be sent. Immediately, I called the other Billy on the phone to see if he had

xxvii

received it. He had to get off the phone to check. Eventually, he responded with a poignant piece of writing that I carry with me to this day:

yes!!

-Billy R.

The e-mail client, sitting in its own white window on a background I had begrudg-ingly recolored a neon yellow, wasn’t much more than a WYSIWYG editor and a list of contacts—the same as it looks today.

At six, I felt like I had just sent a message to Hong Kong.

Five years later, I was sitting at my grandmother’s house. My great-grandmother, who was a rock star and could beat any of you at Scrabble so don’t even try, was in a nursing home that housed both a group of eccentric old retirees and a surprisingly tech-savvy administrator.

I had decided, after losing at Scrabble, that I would make my first website: a face book for all the people on my great-grandmother’s floor of the nursing home, a way to let them say hello to their loved ones online. The administrator was over the moon about this. At eleven, I had to open an MS-DOS prompt and manually con-nect to the free web hosting included with my mother’s e-mail address at the time, then FTP individual HTML files to the server. That website eventually led to my winning a Jefferson Award for Public Service and renting a (small) tuxedo to talk about the Internet, surrounded by adults who were making a tangible difference in the world.

I was once again living in the world of science fiction.

Five years later, I had my first cellphone. It did not have any Internet-connected features. At the time, having Internet connectivity on your phone meant one of two things:

• You were using it for e-mail.

• You were in a commercial for cellphones.

I had no inclination that the little clamshell in my pocket would morph into the primary way that I now access the web every day.

xxviii Introduction

A year later, the iPhone would launch.

Today, we hold our Internet to a higher standard. We (I, because I know who I am and what I do for a living, and you, because you have opened this book, which means I can make wild assumptions about you) make things for the web. We make websites, and web apps, and landing pages, and blogs, and magazines, and dash-boards, and we do all of this because we have a vested interest in making the Inter-net something amazing.

My degree is in computer science, with a focus in UI engineering and human- computer interaction. I shimmied backward into web design because I missed changing all of my mom’s system colors to white, and because nobody else I was working with ever wanted to also be the designer when we were up at 4:00 a.m. regurgitating data structures.

I cut my teeth on data visualization toward the end of my college career. A friend (with whom I would go on to form my studio) and I were working on a comically uncreative idea: tracking the level of crowd, drink and food specials, and how many friends were at any given venue on a given night. (It was far from the next Face-book, but we were young and shiny and dumb.) Never before, and often since, I felt the intense joy of watching a complex set of numbers turn into something read-able, approachable, even friendly.

Because I’ve lived in this dual role of developer and designer for the entirety of my professional career, I have never been able to separate the visual design of how a website, a visualization, a pixel might look from its actual implementation—and I think that this is an important way to look at what you create for the web.

Our industry is responsible for some of the most amazing advances in the past 25 years; but it’s also responsible for the tidal wave of absolute garbage being shoved into consumers’ faces on a daily basis. Not only do we create content, we also create the vehicles by which other people create and consume content.

But I don’t want to scare you.

We’re the good guys. We’re designers. We get to decide what is made, how it works, and exactly how consumers interact with it; but there’s one thing that has always left me speechless: We’ve made it this far without a plan.