Building Responsive Data Visualization for the Web. Bill Hinderman
Читать онлайн книгу.
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.
“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.
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.
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 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, and reuse them to send only the content you need.
As a basic example below, the PHP code pulls in a device library to find the width of a user’s device.
Using Google’s PageSpeed, you can dynamically replace the image’s source with a resized version, as referenced in the code below.
You’ll notice in Figures 2-1 and 2-2 that the image is exactly the same, but Figure 2-1 is much larger in both actual size and file size. If you were actually trying to show a giant image next to a small one, this would be what you want. However, when working on a responsive design, your media will most often be some fluid size that takes up a percentage of the device’s screen. As such, the two images would be displayed at the same size while being downloaded at the two very different resolutions.
Figure 2-1: Without RESS to handle image size, this image is massive.
Figure 2-2: With RESS, you can cut the image’s payload by sending a smaller size from the server.
This same technique can be used to send different CSS, JavaScript, or even direct users to entirely different versions of the page.
RESS is a powerful technique to eliminate bloat, but there is really no reason for it to be confused with adaptive web design. It’s simply another tool in your arsenal.
Just as “adaptive web design” can be misused in the broadest sense, it can also be misused as very specific concepts. Again, all of these concepts are part of a greater web optimization scheme which we call adaptive web design.
Think of the limited adaptive design definition as a clunky way of trying to optimize for specific devices. Your goal should be to make something work for not just the screens you recognize and regularly use, but for those that you have never seen, and even those that haven’t yet been invented. Therefore, I’m presenting the following two ideas: device detection and adaptive layouts, only because they will come up in Chapters 3, 4, and 5. This is not an endorsement of either technique.
Device detection, typically transmitted through the device’s user agent string, is exactly what it sounds like: the process of determining an individual type of device and what features it has. While it sounds tempting to start designing by building for an individual device, you then have to build separately for every other device as well.
This concept is usefully abstracted with tools like Modernizr, or methods of RESS, by grouping devices into classes that fit into either a yes or a no category for individual features.
Конец ознакомительного фрагмента.
Текст предоставлен ООО «ЛитРес».
Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.