"We're just now starting to think about mobile first and desktop second for a lot of our products."
Kate Aronowitz, Design Director, Facebook
Responsive web design (often abreviated to RWD) is an approach to web design in which a designer intends to provide an optimal viewing experience-easy reading and navigation with a minimum of resizing, panning, and scrolling-across a wide range of devices (from desktop computer monitors to mobile phones).
"Mobile First" layout and alternatives
"Mobile First" refers to layouts that are optimized for very small screens (which is unlikely to be optimal for most mobile devices in use today) and then enhanced for larger screens with media queries (and sometimes scripting). Traditionally, Websites have been written for the desktop first and then slimmed down for smaller screens. The reasons for this include the standard "handheld" media type, which is used to override rules that are less than ideal for very small screens (e.g. large background graphics, multi-column layouts). Media queries came several years later and are not supported by Internet Explorer 8 and under.
Responsive design is a somewhat retro approach to web site design that solves a lot of design problems caused by the proliferation of new types of mobile devices. Responsive design pages use x and y coordinates on a grid for layout and mathematical percentages for images instead of fixed-width parameters. Using percentages instead of fixed-width parameters and a grid layout creates a more fluid layout that will resize itself to fit the size of the display.
Media queries, a feature of cascading style sheets (CSS), allow the developer to specify when a certain style takes effect. With CSS2, for example, a media query will serve printer-friendly style sheets if requested. CSS3 has expanded query capabilities that allow style sheets to be targeted to a device's display and serve a desktop, tablet or smartphone style sheet depending on the query response.
