The concept of web design used to be simple—designers would develop content for a popular desktop screen, using a layout which works for most devices to produce well laid-out and cohesive pages.
With changes in technologies and the introduction of mobile devices, the whole experience changed—gone are the days when a static layout would suffice. In its place came a need for content that responded to the available screen real estate, with elements automatically resized or hidden, according to the device being used. This forms the basis for a technique popularized by Ethan Marcotte, which we now know as responsive web design (RWD). Throughout the course of this chapter, we will begin to explore what this means, and understand some of the principles that are key to this concept.
In this chapter, we will cover the following topics:
Getting started with RWD
Understanding the elements of RWD
Understanding the importance of RWD
Exploring how RWD works
Setting up a development workflow
Exploring best practice and common errors
Curious? Let's get started!