How to distinguish between responsive and adaptive design?

Responsive and adaptive design can be confusing because they are not parallel concepts, but rather a subordinate relationship.

If we must distinguish them conceptually:

Adaptive design is a broader concept that includes responsive and code adaptation.

A website that uses responsive or code adaptation is called adaptive.

A responsive website must be adaptive.

An adaptive website may be responsive or code adapted.

So how do we define adaptive design?

Adaptive design refers to a website that maintains the same URL address regardless of the client device used by the user.

That is, the same content of a URL address can be automatically adapted to different client devices, including PCs, mobile phones, tablets, etc.

There are two methods to achieve this "adaptive" goal:

1. Responsive design, which uses only one set of templates that can adapt to different client devices such as PCs, mobile phones, tablets, etc., without changing the template code.

2. Code adaptation, which uses two or more sets of templates. The server analyzes the user's browser (UA) and returns different templates (HTML) according to the type of client device.

In both methods, the website's URL address remains unchanged.

The difference lies in the templates returned to the user.