# Responsive Web Design

In 2010 [Ethan Marcotte][1] coined the term _[responseive
web design][2]_ to describe a process for creating flexible,
versatile websites. By using [media queries][3] 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][4]. Philosophically it embraces the idea that when
designing for the web [we should "accept the ebb and flow of
things"][5].

## Getting Started

A good place to start is [the origional article][6].

Articles on [A List Apart][7] and [other][8] [blogs][9] 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][10] publishes small volumes on different aspects
on creating for the web. I have read several of their books.
They are all good.

 - _[Responsive Web Design][11]_ by [the man himself][1] is a good introduction into this methodology.
 - _[Mobile First][12]_ by [Luke Wroblewski][13] makes the argument that websites should be designed with the mobile viewport in mind.
Only when there is more screen real estate available should
they be enhanced.

## Follow What's Going On

 - [mediaqueri.es][14] is a gallery of responsive sites that illustrate how different approaches to presenting content at varying screen widths.
 - [@RWD][15] has frequent updates to all things related to responsive web design.
 - [Luke Wroblewski's blog][16] is constant source of high-quality information. It mostly pertains to mobile.
   - He wrote [an excellent summary][17] of common patterns employed by sites listed on [mediaqueri.es][14]

## 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.

 - [Brad Frost][18] summarized [common approaches to responsive navigation patterns][19].
 - [Smashing Magazine][8] published [a sample chapter][20] from _[Mobile Design Pattern Gallery][21]_ by [Theresa Neil][22] on patterns for searching, sorting, and filtering in a mobile context.
She recommends two additional titles as background for
designing search interfaces:
   - _[Search Patterns][23]_
   - _[Designing Search; UX Strategies for eCommerce Success][24]_

[1]:  https://x.com/beep
[2]:  http://en.wikipedia.org/wiki/Responsive_Web_Design
[3]:  https://developer.mozilla.org/en/CSS/Media_queries
[4]:  https://web.archive.org/web/20120517030433/http://weedygarden.net/2012/05/a-case-for-ress/
[5]:  http://www.alistapart.com/articles/dao/
[6]:  http://www.alistapart.com/articles/responsive-web-design/
[7]:  http://www.alistapart.com/
[8]:  http://smashingmagazine.com/
[9]:  http://css-tricks.com/
[10]: http://www.abookapart.com
[11]: http://www.abookapart.com/products/responsive-web-design
[12]: http://www.abookapart.com/products/mobile-first
[13]: http://www.lukew.com/
[14]: http://mediaqueri.es/
[15]: https://x.com/rwd
[16]: http://www.lukew.com/ff/
[17]: http://www.lukew.com/ff/entry.asp?1514
[18]: http://bradfrostweb.com/
[19]: http://bradfrostweb.com/blog/web/responsive-nav-patterns/
[20]: http://uxdesign.smashingmagazine.com/2012/04/10/ui-patterns-for-mobile-apps-search-sort-filter/
[21]: http://www.mobiledesignpatterngallery.com/
[22]: http://www.theresaneil.com/
[23]: http://searchpatterns.org/
[24]: http://www.scribd.com/doc/59490696/Designing-Search-UX-Strategies-for-eCommerce-Success