Responsive Web Design

In 2010 Ethan Marcotte coined the term responseive web design to describe a process for creating flexible, versatile websites. By using media queries in conjunction with a fluid grid a designer can alter the flow of content within a website to provide a good viewing experience on a phone-sized screen as well as a 70” display. Philosophically it embraces the idea that when designing for the web we should “accept the ebb and flow of things”.

Getting Started

A good place to start is the origional article.

Articles on A List Apart and other blogs are great for an introduction to a technique or idea but concepts that require a degree of nuance are hard to learn from a blog post or two. To help provide that extra depth A Book Apart publishes small volumes on different aspects on creating for the web. I have read several of their books. They are all good.

Follow What’s Going On

  • mediaqueri.es is a gallery of responsive sites that illustrate how different approaches to presenting content at varying screen widths.
  • @RWD has frequent updates to all things related to responsive web design.
  • Luke Wroblewski’s blog is constant source of high-quality information. It mostly pertains to mobile.

Beyond A Simple Page

Applying responsive design principles to a blog or a portfolio site requires a good deal of deliberation to get it right. When websites increase in complexity and start to take on features of a web application the difficulty is compounded. Some of the trickier areas are site navigation and search.