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
Respon…