Building Responsive Data Visualization for the Web. Bill Hinderman

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

СКАЧАТЬ 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 one design (and any one reasonable budget). The important thing to remember is that none of these opportunities for enhancement are contingent upon another; and if you begin in the most accessible state, by building for the limited user, you have already jumped the first hurdle of enabling users to reach your content.

      Adaptive vs. Responsive

      The term responsive is still in its youth. Adaptive web design (at least as a phrase) can be seen as its older brother. Responsive and adaptive web design are very closely related, and are often used interchangeably.

      The design techniques we use are encapsulated within responsive web design, which is a subset of adaptive web design, in order to create designs that dynamically adapt to different viewports and device features. Adaptive design can encompass numerous definitions, and it’s important to nail these down so that we can differentiate our more limited definition of responsive design.

The Broad Adaptive

      “Adaptive Web design,” as I use it, is about creating interfaces that adapt to the user’s capabilities (in terms of both form and function).

      Aaron Gustafson, Adaptive Web Design

      The term adaptive web design is used in many ways that stretch and broaden its definition. Most accurately, it can be thought of as a big bucket into which we place all of our ways to adapt a website to the user.

Progressive Enhancement

      In Chapter one, you were introduced to the concept of progressive enhancement. With its close ties to mobile-first web design, it’s easy to see why adaptive web design has been used interchangeably with that term. The basic structure of progressive enhancement is a website with content as its core, with everything else built upon that, progressively rising to meet a user’s needs.

      At the base level, this is absolutely accurate. You are using a whole slew of client-side and server-side tools to build the best experience across any different environment. This means that interfaces adapt to the capabilities of the device and its browser.

Responsive Web Design

      Unfortunately, the terms adaptive web design and responsive web design are typically used interchangeably. This is wrong and bad, and anyone I catch doing it will be removed from my Christmas card list.

      As Ethan Marcotte defined it in his seminal 2010 article (http://alistapart.com/article/responsive-web-design), responsive web design consists of three things: grids, @media queries, and flexible media. That’s it.

      Creating responsive layouts that work on any device is a crucial part of adaptive design, but it is just one part of a bigger mindset. If adaptive web design is the county fair, responsive web design is the pie eating contest – loud and important, and you’ll get your picture with the governor if you do it well enough, but it’s not the only part.

RESS

      RESS stands for responsive design with server-side components. The bulk of what we’re doing responsively will be handled on the client. However, as much as possible, moving solutions to the server can not only make our pages more lightweight, it makes them more automatable. RESS techniques involve offloading some of the responsive work to the backend.

      The RESS experience is created through normal responsive strategies, relying on progressive enhancement. The difference is that while under the same URL, the interface is changed in certain ways based on device classes.

      At a high level, RESS works by recognizing the device’s user agent string (what kind of device it is) and sending that information back to the server when first making contact with the website. The server has a large library of different user agents. Connected to the data of these user agents are lists of properties that are then referenced to determine what type of payload should be given to the client.

      We move this logic to the server in order to avoid sending unnecessary (or unused) content to a device. Using a tool like Google’s PageSpeed installed on the server, you can set variables from the device’s properties, СКАЧАТЬ