Responsive web design – what are we talking about?

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. 

responsive-web-design

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

boston_globe_624px_1

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.

Is your website responsive yet?

Cecily Kellogg became an accidental designer when she worked at a short-handed non-profit and although she now prefers designing with words, the lessons she learned from doing graphic design make her work in content development more well-rounded. She writes about the intersection of family, technology, and social media for Babble Tech and runs her own web content business. She is also known for her raw tone and humor on various social media platforms including her own blog, Uppercase Woman. Cecily lives in the Philadelphia area, is happily married, is mom to a fierce and amazing daughter, and has occasionally been called a bad ass.

2 Comments

  1. Vinod Thomas

    This is a great inspiring article. I am pretty much pleased with your good work. You put really very helpful information about the designs.Thanks and keep sharing.

    Reply May 28, 2014 at 12:52 am
  2. Kristine Peterson (Web Designer)

    Hello Cecily,
    Very impressive. I must say a very informative post for those, who want to create website- both for personal or professional reasons are- to attract maximum number of visitors and sales conversions.Responsive design is pretty much essential at this point but many designers and webmasters are still asleep to that fact.You have very well explained the ideas regarding web design and features.Thanks

    Reply May 29, 2014 at 12:11 am

Or leave a comment: