Learning Responsive Web Design

Preface

When the iPhone was introduced in 2007, it was a turning point for web design. All of a sudden web designers lost control of the canvas on which we designed websites. Previously, websites only had to work on monitor screens, which varied in size, but not all that much. How were we supposed to make our websites work on these tiny little screens?

For a while we made mobile websites, optimized for the size of an iPhone screen, that were separate from our “regular” websites. Two sites to maintain wasn’t that bad, but soon there were many phones of varying sizes, and then tablets, and smaller tablets, and eventually we realized we couldn’t make separate sites for each of the possible screens that our websites could be viewed on.

We needed a solution that would work on all screen sizes, a way to design websites that could adapt to the screens they were being displayed on.

It took a while, and a lot of different ideas, before one stuck. Responsive web design is a method of designing websites that are flexible, that don’t rely on a fixed screen size, and that are also able to detect the size of the screen and adjust the design to provide an optimal viewing experience for that device. Ethan Marcotte first wrote about responsive web design (http://alistapart.com/article/responsive-web-design) in A List Apart in 2010.

Like any other new technique, responsive web design had a rocky start. Many people continued to argue—and some still do—that we needed to create separate websites for mobile ...