Understanding the difference between adaptive, responsive, and fluid layouts

Three layout types can be used to optimize an application for all viewports: adaptive layouts, responsive layouts, and fluid layouts. Let’s look at the similarities and differences and understand the terms.

Adaptive layouts

An adaptive layout consists of ready-made templates for each screen size we want to cover. We saw this a lot at the beginning of the mobile web with the rise of mobile and tablet versions of websites and the redirect popups that asked us whether we wanted a mobile-optimized version.

To illustrate, let’s have a look at the following diagram:

Figure 4.6 – Adaptive design illustrated

We can see that three distinct layouts are used for three different devices. The layouts may not even share the same elements, as we can see that the yellow box is missing on mobile devices. Also, the distinct layouts influence the order of elements:...