Adaptive Design User Experience (UX) topic overview/definition

Adaptive Design: Concept Definition

Adaptive design refers to graphical user interface (GUI) design that adapts to different screen sizes. Designers apply it in GUIs, such as webpages, which must function on devices of different sizes. Adaptive design typically uses multiple fixed layout sizes—when the system detects the browser size, it selects the layout most appropriate for the screen (e.g., a smartphone’s).

Adaptive design is similar to responsive design, which also adapts to different screen sizes. However, the difference between adaptive and responsive design is that the content follows a fixed layout size in adaptive design, while it moves dynamically in responsive design. In other words, adaptive design uses a few fixed layouts, and then selects the best layout for the current screen size. On the other hand, responsive design uses a single layout, which resizes according to the screen size. In adaptive design, developing six designs for the six most common screen widths—320, 480, 760, 960, 1200, and 1600 pixels—is standard practice for designers.

The advantage of adaptive design is that it allows the designer to tailor-make solutions so the GUI appears optimally on different screen sizes. The disadvantage is that adaptive design is expensive, because, in effect, it requires the designer to create up to six individual GUIs—or, in a nutshell, the equivalent of six versions of a single webpage so as to have the best one ready to latch with the screen specifications a user needs. Another disadvantage is that adaptive design might also leave users who don’t have a standard-sized screen without an optimal solution. Nevertheless, as it remains one of the options in presenting output that might otherwise be unsuited to another approach, no designer should dismiss its value.

For your convenience, we’ve collected all UX literature that deals with Adaptive Design. Here’s the full list: