What is Responsive Web Design?

My last post on the history of Web Design ended with the current trends of responsive design and flat design. This post will take up the question, “What is responsive web design?

Perhaps the seminal article on this topic is Ethan Marcotte’s “Responsive Web Design” posted on May 25, 2010 in A List Apart. Marcotte suggests that web designers should “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.” He describes features of CSS3 that can query the device that is being used for its physical characteristics. The results of the query can be used to select which style sheet to employ in rendering the site. In this article, Marcotte describes and demonstrates how fluid grids, flexible images, and media queries are key technical ingredients for responsive design. Beyond the technical adaptations needed, Marcotte says that responsive design “also requires a different way of thinking – rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.” This new way of thinking about web design will allow us to design for change, which is sure to come.

Responsive design is fluid, according to John Brownlee’s article “9 GIFs That Explain Responsive Design Brilliantly” in Fast Company’s Co.Design. Brownlee writes that “responsive designs fluidly expand . . . as you expand a browser or viewport.” His article uses several animated GIFs to illustrate nine principles of responsive design.

As I read more on responsive web design, I found this article on “Responsive Web Design Basics” by Pete LePage on Google Developers. LePage informs us that “screen sizes will always be changing, so it’s important that your site can adapt to any screen size, today or in the future.” He suggests that web designers begin their design with a small screen in mind, then “build up” to larger sizes. In a video posted in his article he explains how to optimize for mobile web browsers and how to add breakpoints as the screen size increases.

All these articles suggest that web design has become more free, causing us to focus once again on the content, rather than on the format of our information. Hopefully the information we are trying to transmit will begin to rule the design. In my next post I will explore what this means and how it is resulting in the minimalist “flat design.”

Advertisements
This entry was posted in Mobile Devices, Philosophy, Responsive Design, Uncategorized, Web Content, Web Design Tools. Bookmark the permalink.

One Response to What is Responsive Web Design?

  1. dspearson says:

    Here is an interesting blog post from Eric Rumsey at the University of Iowa about responsive design in academic libraries: http://blog.lib.uiowa.edu/hardinmd/category/responsive-design/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s