What is the difference between adaptive and responsive design?

Both adaptive and responsive design concerns how a website responds to the size of a browser window; There are very many different sizes when it comes to browser/screen sizes e.g. all the different mobile phone models with varying screen sizes, likewise tablets and the same goes for different desktop screen sizes with different screen resolutions.

In order for a website to accommodate and be usable on as many different sizes as possible, adaptive and responsive design were developed.

The main difference between the two is that a website that has been designed to be responsive will respond to any size of browser redrawing it’s layout even as the size changes e.g. when you resize your browser window, you’ll see the layout changing in real time.

A website that has been developed to be adaptive has a number of layouts that correspond to ranges of window sizes and will display the appropriate layout depending on the current screen size. When you resize your browser window and see the same layout for a period before suddenly changing (or snapping) then adaptive design has been used.

Both design models make use of CSS (cascading style sheets), a way to control the display of HTML elements on a web page.