ON 25 MAY 2010, when Ethan Marcotte coined the phrase “responsive web design,” he defined it as using fluid grids, flexible images, and media queries to deliver elegant visual experiences (e.g. layouts and type treatments) that accommodate the reality of our post-iPhone, post-Android, post-iPad digital landscape:
Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.
Ethan expanded his vision in Responsive Web Design, a book I consider so important I published it. I and many others think it is a landmark book, an evolutionary milestone in the development of web and interaction design as a practice and as an industry.
But I also think it may be an even bigger idea than we initially realized—an idea too big to be limited to a single, technical approach to the problem of multiple, disparate viewing environments.
I understand well why Ethan favors his fluid grid/flexible image approach. When you see a fully responsive design at work, it often seems magical.
But the purpose behind “responsive design”—the concept of what it strives to achieve—should be separated from the specific techniques used to achieve it. As the worldwide community embraces his idea (and as new methods of CSS layout become practical), the techniques of responsive design will continue to improve and, dare I say it, adapt. (See flexbox, etc.) Along the same lines, “adaptive layout,” a practice that combines the benefits of fixed-width design with the realities of multiple screen sizes, is no longer an alternative to responsive design; instead, it becomes a form of responsive design, albeit a less robust one than the fully responsive (fluid) method Ethan describes in his book.
Our understanding of “responsive design” should be broadened to cover any approach that delivers elegant visual experiences regardless of the size of the user’s display and the limitations or capabilities of the device.
