Websites work differently on mobile devices than they do on laptops and desktop computers. Adaptive design is a term that covers a range of solutions and approaches in which the design and content of a website or app adapts to the context in which it is used. The goal is to improve user experience, which can then lead to higher conversion rates.

There are several ways in which an adaptive design can respond to its context. Here is an overview of the best-known forms.

Responsive Design

The best-known form of adaptive design is responsive design. In a responsive design, the website design itself, and the content, adapt to the screen format of the device in which it is used. In this way, the design keeps a consistent look and feel, both on large desktops and on small smartphones.
This is the approach we take with most of our projects, including the new OH! CMS. By taking this approach we can ensure that our clients can easily manage the content on their website from any device.

Graceful Degradation

Graceful degradation is the process in which developers build a design for use in "ideal" conditions, such as modern browsers, large displays, and fast Internet connections. Later on in the development process they will look for “fixes” for each problem that arises when the design is viewed in less ideal conditions. The risk of this approach is that functionality may be lost in these conditions. In the most favorable case the design will hold up, but that is very different from having a design that is optimizing to deal with these circumstances, such as a responsive design.

Progressive Enhancement

A term that is being used more often, and a more recent form of adaptive design, is progressive enhancement. In this approach, developers build a design for use in the least ideal circumstances. As they continue, they add visual and functional enhancements to the design for use in better circumstances. A disadvantage of this approach is that a progressive design is based on restrictions instead of possibilities, and because of this, could hinder innovation. The great advantage of progressive enhancement, however, is that the essential functionality is always present in the design, regardless of the context in which it is being used.

Mobile First

The mobile first approach is a well-known example of progressive enhancement. This is the process where designers /developers build a design that is meant to be used on a smartphone. The screen of a smartphone is small, and the internet connection can be slow. As a result, they are forced to focus mainly on the essential functionality of a website or application. Later on the design can be manipulated and expanded for use on larger screens.

Each approach has its advantages, and some disadvantages, but they are all focused on the key goal of providing a better user experience.

Written By: Scott Whitehead