Responsive Web Design is based on the idea that a website design and layout should respond to the device it’s being viewed on. This is usually accomplished by using techniques, such as:

  • Adapting the layout to suit different screen sizes, from phones, to tablets, to laptops. to widescreen desktops
  • Resizing images to suit the screen resolution/size
  • Serving up smaller, lower-bandwidth images to mobile devices
  • Simplifying page elements for mobile
  • Providing only essential elements on smaller screens
  • Progressively enhancing elements for larger screens

Responsive Design is all the rage these days and for good reason: Designing a web site for every possible device (an Adaptive design) very quickly becomes an exercise in futility as more and more devices with varying display sizes are introduced seemingly every day. You could, of course, have a separate Mobile web site in addition to your normal one but keeping the content on both sites in synch is difficult and more likely impossible. Generally speaking, unless you need some specific functionality for your site that is only provided by a mobile device, a responsive design is usually more efficient and easier to maintain.

If you’d like to learn more about the concepts of Responsive Design you should take a few minutes to read Ethan Marcotte’s landmark article that coined the term and started the Responsive revolution. See also, the Resources section below.

When laying out your site need to consider and determine the media breakpoints based on your site’s content and the layout and look you’re attempting to achieve. These breakpoints and the media queries that enable them will make your site responsive to the devices it’s being viewed on.

This site has a responsive, mobile-first layout.

Resources

Article by Ethan Marcotte. The article that started it all.

Article by Brad Frost.

Article from Smashing Magazine.

Article from Mashable.com

Description of The Responsinator web site.