building responsive data visualization for the...
Post on 10-Jul-2020
2 Views
Preview:
TRANSCRIPT
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.
top related