A number of methodologies, technologies, and tools are involved in building responsive sites. Here's an overview of the key strategies:
A first step toward a responsive design is a fluid grid layout. Instead of setting widths for HTML elements like divs in pixels, we will instead use percentages. Instead of a 980-pixel, fixed-width, center-justified design - a page that remains always at 980 pixels wide, regardless of how we view it - we'll use 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.
A flexible grid design, in which elements shrink to accommodate different browser or screen widths, would fail miserably if images and other fixed-width elements didn't scale, too. We'll use the max-width:100% CSS directive to effect this.
CSS3 media queries allow us to target various properties of the user's device - screen size, browser width, and more. We'll use media queries extensively to craft different presentations of our sites - to change a two-column layout for desktop users to a one-column layout for mobile users, for instance.