Responsive design employs CSS @media  queries on the website to better suit different screen sizes.

Adaptive web design shows a different layout depending on the screen size the viewer is using. Adaptive web designs looks at the header details of incoming request to figure out if the viewer is using a mobile device, it then (usually) redirects mobile users to a sub-domain such as

In recent times the differentiation of responsive and adaptive design are more intertwined as responsive design often incorporates adaptive features.The real question nowadays is when to incorporate adaptive design and the answer is very simple. Adaptive design is needed when mobile users (on smaller screen) and normal users (using large screens) have different needs.

E.g. a financial group notices that mobile visitors uses their website to check account details and transfer money, while desktop users with larger screens are checking interest rates and applying for loans. In this case it’s very clear that account details and transactions should be made more accessible for mobile users, while interest rates and loans should be emphasized for desktop users.