Responsive Web Design Tutorial

What Responsive Web Design has in common

Responsive web design is essentially about creating web sites that works on multiple screen sizes, most commonly to work well on at least three different screen sizes — a small mobile screen, a tablet-sized screen, and a larger desktop computer monitor.

What is the difference between responsive and adaptive web design?

  • Responsive designs respond to changes in width of a browser window by fluidly adjusting the placement of elements on a web page to best fit the available space. Thus, as you drag the side of a browser to make it larger or smaller, you’ll see the design change in real time. If you want to see how responsive design works, visit a site that uses responsive design, such as, and if drag the side of the browser window to make it smaller and larger, you’ll see how responsive design works. Visit that site on an iPhone, iPad, or other similar sized device, and you will see the design that is targeted to fit that size device.
  • Adaptive designs , such as the one American Airlines created at, use a sophisticated auto-detection script on the web server to identify each device that visits the site and then deliver the best version of the site, based on the size and capabilities of each device. As a result, the American Airlines site doesn’t change if you drag the browser while you view the site. However, if you visit the American site on different mobile devices, you’ll not only see different designs, you may even see different content because with adaptive design you can send completely different versions of your site to each device.

Why choose responsive design instead of adaptive design?

The simple answer is that adaptive design technology is not supported by real old or limited mobile phones.

Most shoppers today are chooing responsive design because it’s so much more efficient to create one design that adjusts to different screen sizes espcially when smart phones become popular nowadays.