LITMIR.BIZ

Скачать книгу

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.

Building for the Limited User

      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.

Building for Every 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

Скачать книгу