Responsive Design: Best Practices
- 865 shares
- 7 mths ago
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.
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 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.
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.
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.
Here’s the entire UX literature on Adaptive Design by the Interaction Design Foundation, collated in one place:
Take a deep dive into Adaptive Design with our course Mobile UX Design: The Beginner's Guide .
In the “Build Your Portfolio” project, you’ll find a series of practical exercises that will give you first-hand experience with the methods we cover. You will build on your project in each lesson so once you have completed the course you will have a thorough case study for your portfolio.
Mobile User Experience Design: Introduction, has been built on evidence-based research and practice. It is taught by the CEO of ExperienceDynamics.com, Frank Spillers, author, speaker and internationally respected Senior Usability practitioner.