There’s been a lot of buzz lately about responsive web design as an answer to the challenges of designing for the ever-widening array of mobile communications devices. This year’s theme of National Small Business Week is “Making it big: Small Biz Success in a Mobile World,” underscoring its growing importance.
But what exactly are we talking about when we say “responsive design”? What are its features? And how does it change the way web designers approach a project? Here we’ll look at the basics of responsive web design and hopefully demystify some of the terminology integral to this new paradigm.
Origins in Architecture
In 2010, Ethan Marcotte published his seminal article on responsive web design. In it, he clearly defines the major challenge facing web designers the time: how to think outside the laptop screen model when designing for a broadening array of devices. To illustrate, he discusses architecture—the structural kind, not the web variety—and highlights the way a structure’s foundation defines its footprint, which dictates its frame, which shapes its façade, and so forth, each step being defined to some extent by the step preceding it.
But what if, as in the latest trends in architecture, a structure could conform to the way it id used? What if windows could tint based on threshold room occupancy? What if a room’s climate could respond to the density of people inside? These are real challenges being addressed by architects—so why not apply them, Marcotte suggests—to web design?
Suppose a web page that could “know” on what type of device it is asked to be viewed and intuitively accommodate the device’s screen size and the user’s font preferences, as well as the image resolution, layout, and formatting. That would be pretty amazing, right? And that is the core of responsive design.
The Language of Responsive Design
Marcotte’s article mentions a few basic terms of which we should be aware.
- Fluid Grids. As a fluid alters its shape to accommodate its container, the design will continue to adapt to its environment regardless of the screen size on which it is being viewed. With a fluid grid, you have no orphaned text or awkward re-wraps, no ungainly image placement or unwanted stacking.
- Layout agnostic. A layout agnostic design can function without knowing in advance on what device, resolution, or screen size it will be viewed.
- Media Queries. A media query allows not only identification device classes on which a design is to be rendered but to make specific inquiries of the device’s physical characteristics. When a query detects that the user request is coming, for example, from an iPhone (480×480 pixel res), it will be able to adapt to the appropriate screen size and resolution, or, if unable to do so, ignore the link. Media queries, as Marcotte points out, are not limited to links but can be incorporated into cascading style sheets (CSS).
A New Way of Thinking
Responsive web design is, primarily, a new mindset. It allows designers to move away from the patchwork of poorly interconnected and hard-to-translate templates based on adapting a given design from a laptop environment to a tablet or smartphone.
As Marcotte anticipated in his 2010 article, increasing numbers of users – your potential customers -are accessing the web from their mobile device rather than from their home computer or laptop. That means responsive design is not only the newest best solution to an existing problem, but that it is a sustainable and adaptive solution that may yield the kind of permanence sought by architects—yes, the building kind.