Excerpt
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.
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 saw 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 after.
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 multi-device internet had already begun to take hold, and users were no longer willing to settle for sub-par 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.