Responsive web design is the process by which we craft the markup and stylesheets for a site to adapt to the user's environment. Users viewing our site on a smartphone, a tablet device, a laptop with a small screen resolution, or a desktop with high-resolution monitor all see pages laid out in a format friendly to their particular device, with minimal (if any) need for scrolling and zooming. Responsive design usually means making use of CSS3 media queries and often means CSS3 flexible images.
A first step toward a responsive design is implementation of a flexible, fluid grid layout. Instead of formatting element widths with pixels, we will instead use percentages: what had been a 980-pixel, fixed-width, center-justified design - that is, a page that remains ever at 980 pixels wide, regardless of the context in which we view it - will become a fluid layout, where the page scales to fill a set percentage of the screen, and elements within the design scale bigger and smaller (but remain in proportion) as the size of the device or browser changes.
Why do this?