Think about your typical desktop browser. Even if it is not maximized, it almost certainly has a width of at least 960 pixels — that is a lot of space to place lots of columns of text and images. If you compare that with a smartphone in portrait mode, you are looking at a device with about 480 pixels of width. That is half the screen space. And a feature phone has even less space, 320 pixels or less in many cases.
If you create a page with a fixed-width layout 960 pixels wide, it will look great on your desktop monitor. But the first time you view it in a tablet, it’s going to look small. And then on a smartphone it will look even more cramped or the customer will have to scroll sideways to see the entire thing. And on a feature phone, the page might not display correctly at all.
Instead, with responsive design you create a design that works for the devices that visit your site. But unlike previous methods for handling mobile designs, you don’t create a separate site for every type of mobile browser that you want to support. You would use a detection script that might or might not work to send the mobile devices to another website that you had to maintain. Responsive design simply looks at the features of the device viewing the page, and delivers the styles appropriate for that device.