Building Responsive Data Visualization for the Web. Bill Hinderman
Читать онлайн книгу.
right can enhance a point, but is still just fluff. At the core everything still works without any JavaScript, and without any CSS. These are the principles upon which solid mobile web projects are built, and data visualizations as well. For all the exciting toys you have at your disposal now to make rich, beautiful experiences, they are worthless if your users can’t reach the core content you are trying to convey.
Chapter 02
Responsive Web Design Tenets
Before breaking out all of our tools, it’s important to set some guiding principles about how to build responsively responsibly. In this chapter, you will examine the foundations of responsive web design, including the guiding principles of your design process – being universal, flexible, economical, and specific. Also covered are seven focal points to build upon as our material becomes more technical.
FYI: This is the content you should casually drop into conversation with someone who can give you a raise.
The Gist
In May of 2010, Ethan Marcotte, a web designer and developer, coined the phrase “Responsive web design.” He did so in the still-accurate and still-important article here: alistapart.com/article/responsive-web-design. Think about that timing for a moment. In the previous chapter, you learned that the iPhone launch drastically shifted the personal computing market in 2007, three years before. And the mobile tipping point, that is, the point at which mobile devices began to outsell traditional computers, happened in 2011, one year later.
What device were you using at this point, and how regularly did you access the web on it? Largely, the mobile web was still a second-class citizen at this point, but that was a paradigm that was rapidly shifting. The timing of Marcotte’s article shows that the importance of a multidevice Internet had already begun to take hold, and users were no longer willing to settle for subpar web experiences on their mobile devices.
The concept, or goal, of responsive web design is simple: to design a website in such a way that it provides the optimal experience regardless of a user’s device. A website designed responsively adapts to the device’s viewport so that it appears to be designed for that device. This is achieved with a reliance on proportion-based grid systems, CSS @media queries, and flexible media sizes.
Responsive web design is the practice of building a website that is suitable on every device, and every viewport, no matter the size. It is focused on creating intuitive, natural experiences for everyone so that both mobile and desktop (and any other) users feel like a website was tailored for their device.
There are, in essence, two ways to approach building using responsive web design:
● Build for the limited user.
● Build for every user.
Building for the limited user means focusing mainly on building your core experience and enhancing. Building for every user means leveling the playing field for any class of device, and trying to optimize for as many viewports as possible. These two mindsets are not at all mutually exclusive. In fact, the first is encapsulated within the second.
That being said, when working on a project, you should consider your audience and your budget. As romantic as it sounds to create a perfect experience for every user, you will find yourself at one of two points:
● Optimizing for just one person.
● Broke.
The important thing is to know the intended users of your product, and optimize, as much as possible, for their use cases.
The first way to approach responsive web design is to build for the more limited user – that is, the user without a large screen, an ergonomic keyboard, strong WiFi, and a desk in a quiet room to contain all these things.
You’re now building for people such as those on their morning commute, using a phone that’s run out of 4G bandwidth of the month, and whose train is about to enter a tunnel.
While it isn’t necessarily accurate that limited users must be on a phone, it’s a typical example that serves to illustrate how building for a small device with a potentially poor Internet connection is a good place to start. Think of this method as building mobile-first.
Until recently, web designers have approached a project by building out a richly featured desktop site, while leaving the mobile users as a secondary (or skipped) goal. Even as responsive web design has grown in use, often the plan is to begin with a “full” site, and work down by hiding features.
Flip that.
In the previous chapter, you have already seen that the future of the web is mobile, so your design needs to start where your users are. This means beginning with a focus on lightweight, performance-conscious websites built for the mobile user.
It’s important to keep in mind, however, that your users are not just on their phones. Once you are accustomed to thinking about your design from the standpoint of someone looking at a small screen in a tunnel, you then have to remember that people will be consuming your content in more locations than desks and tunnels, and on more devices than smartphones. The fact is, we have absolutely no control over where our websites will be consumed.
That’s the point of the Internet: It’s universal.
This doesn’t mean the scattershot throwing of features that work best on a mobile device alongside those that require five screens in a control room at NORAD. What it means is following the same performance-conscious design that you would when building for the mobile user, then taking the time to enhance your website for different classes of device.
Some of the things you may want to consider include the following:
@font-face
background-size
border-image
border-radius
box-shadow
Flexible Box Model
hsla()
Multiple backgrounds
opacity
rgba()
text-shadow
CSS Animations
CSS Columns
Generated Content
CSS Gradients
CSS Reflections
CSS 2D Transforms
CSS 3D Transforms
CSS Transitions
Feature
applicationCache
Canvas
Canvas Text
Drag and Drop
hashchange Event
History Management
HTML5 Audio
HTML5 Video
IndexedDB
Input Attributes
Input Types
localStorage
Cross-window Messaging
sessionStorage
Web Sockets
Web SQL Database
Web Workers
Feature
Geolocation API
Inline SVG
SMIL
SVG
SVG Clip paths
Touch Events
WebGL
That list contains everything that can be tested for by Modernizr, a tool for feature detection. If it seems daunting, that’s because it is. This is typically far too much to consider in any