Difference between Adaptive Design And Responsive Design

There seems to be some confusion about what adaptive and responsive web designs mean, so here’s an article on the subject to make it clear. While similar in their goal, these two methods are different.                                   

Adaptive web design is a simple set of design methods that concentrate on the user experience of a site on devices rather than the browsser itself. It’s all about layering your design through defined layout sizes, CSS and JavaScript allowing the user to have the best experience with the technology they are equipped with.  Adaptive web design is just another term for “progressive enhancement” which means pretty much the same.

Unlike adaptive design that means fluid layout that will change to fit a predetermined set of screen and device sizes, responsive design is actually a subset of adaptive design, which means a fluid layout only i.e. the design that will fluidly change and respond to fit any screen or device size.

The biggest similarity between these two is that they both allow websites to be viewed on mobile devices and various screen sizes, ultimately providing visitors with a better mobile user experience. Where the two methods differ is in their delivery of the responsive/adaptive structures.

Sites based on responsive web design serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. Sites based on adaptive web design dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.