Building Responsive Data Visualization for the Web. Bill Hinderman

Чтение книги онлайн.

      Summary

      The Internet itself is shockingly old – a military invention from the middle of the last century, but the web that we know today is just pushing 25. That web has come a long way since Tim Berners-Lee’s research in the 1980s and first website in 1990. On the back of this technological shift, entire industries have been born, and with it, the medium of the web has grown tools that let us create complicated, beautiful, and all-inclusive experiences.

      All of this history has led to a point at which thousands of different devices can get on the web. For many of these, we can create something unique and beautiful using HTML, CSS, and JavaScript. However, the layers of a web project need to be thought of in exactly that order:

      Interaction is great, but not necessary. Design done 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:

      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:

      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 СКАЧАТЬ