Building Responsive Data Visualization for the Web

Building Responsive Data Visualization for the Web

By: Bill Hinderman (author)Paperback

Up to 2 WeeksUsually despatched within 2 weeks


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.

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


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

Product Details

  • ISBN13: 9781119067146
  • Format: Paperback
  • Number Of Pages: 448
  • ID: 9781119067146
  • weight: 1
  • ISBN10: 1119067146

Delivery Information

  • Saver Delivery: Yes
  • 1st Class Delivery: Yes
  • Courier Delivery: Yes
  • Store Delivery: Yes

Prices are for internet purchases only. Prices and availability in WHSmith Stores may vary significantly