Cyber Week Offer: Professional membership now 25% off! Cyber Week Offer: Professional membership now 25% off! 

Popular related searches

Filters

Adaptive Design

Your constantly-updated definition of Adaptive Design and collection of topical content and literature

What is Adaptive Design?

Adaptive designs are a range of pre-made layouts that fit different screen sizes. The device's browser selects the best-fitting design from those options. 

Show Hide video transcript
  1. Transcript loading...

Adaptive design is one method of ensuring webpages function on different-sized devices. Designers might make differently-sized graphical user interfaces (GUIs) ranging from smartwatches to TVs. 

Adaptive design for websites uses multiple fixed layout sizes. The system detects the browser size and selects the most appropriate layout.

Adaptive designs usually include six designs for the six most common screen widths—320, 480, 760, 960, 1200, and 1600 pixels. 

Adaptive and Responsive Design

Adaptive design is like responsive design, which also adapts to different screen sizes. However, responsive designs use a single layout that adjusts in response to screen size. Adaptive design content chooses the best configuration from a selection of fixed layouts.

In this image, you can see a comparison between the responsive design approach and the adaptive design approach.

© Interaction Design Foundation, CC BY-SA 4.0

The advantage of adaptive design is that it is a tailor-made solution. The GUI will appear exactly as intended on different screen sizes. The disadvantage is that adaptive design is expensive. The designer creates up to six versions of a webpage to match the screen specifications a user needs. An adaptive design might leave users with non-standard-sized screens with an unoptimized solution. 

Responsive design is the "default" for accessing web content on any device. Adaptive design is a related technique that allows for UX to be optimized. Which approach you take depends on several factors, the most important of which is your users’ needs and contexts. The trade-off between responsive and adaptive design ultimately comes down to consistency and flexibility. Responsive affords less control over your design on each screen size. 

Adaptive and responsive design are different approaches to deliver device-specific experiences for users. While responsive design focuses on just the device, adaptive design takes both device and the user’s context into account. Sometimes, a hybrid approach is best.

Learn more about Adaptive Design

Take our course: Mobile UX Design: The Beginner's Guide.

Understanding the users’ context of use is crucial to create effective adaptive designs. For more on the context of use for mobile, see this.

When you design for different types of devices, keep in mind the challenges, constraints and opportunities of each device. Here are the key design considerations for smartphones and tablets.


Literature on Adaptive Design

Here’s the entire UX literature on Adaptive Design by the Interaction Design Foundation, collated in one place:

Learn more about Adaptive Design

Take a deep dive into Adaptive Design with our course Mobile User Experience (UX) Design .

Mobile usage overtook that of desktop way back in 2014 according to Comscore; since then, the gap between devices has only widened, with the rise in mobile usage doubling the loss seen on desktop. This increase in mobile traffic has made mobile user experience one of the most important factors in the success of a product or website, and it means that the skills involved are absolutely essential for designers, marketers, and developers if they want to keep up with the times. This course will teach you how to do just that—design great mobile user interfaces, with an emphasis on mobile usability best practices.

When you want to start designing a great user experience on a mobile device, using common sense design approaches or simply learning by doing won’t be enough. With Google reporting that 61% of users were unlikely to return to a mobile site they had trouble accessing and, even worse, 40% choosing to visit a competitor’s site instead, such uneducated approaches could prove disastrous for your product or website. A user’s comprehension is 50% less on a mobile device, which means that content, navigation, and visual design elements must be twice as intuitive as they are on a desktop. With hard facts like that, you must constantly keep in mind the point that little screens mean very little room for error. Designing for mobile means taking the rough of the risk with the smooth of the sheer profit potential, and your need to learn the skills involved in creating an easy-to-use mobile user interface and, consequently, a great mobile user experience is nothing less than vital.

This course is built on evidence-based approaches as well as solid evidence distilled from decades of research and practice. Here, CEO of ExperienceDynamics.com, Frank Spillers, who is a distinguished speaker, author, and internationally respected Senior Usability practitioner, will teach you what you need to know to stay one step ahead as you venture into this exciting, cutting-edge and lucrative field.

All Literature

Please check the value and try again.