Flexibility does not only help dancers, ballerinas and gymnasts, but it is also very important for UX designers to have flexible muscles to create a beautiful and efficient design, although designers should work more on the flexibility of their brain muscles! Adaptive and responsive design, which are also called adaptive and interactive design, respectively, have differences that we will explain in the following.
Did you know that flexibility itself is considered a type of intelligence? Have you ever thought about what jobs are suitable for people who have a lot of this type of intelligence? Those who have high flexibility intelligence are the most suitable people for crisis management and will become excellent crisis managers, because in the moment of crisis they can easily use their intellectual flexibility and instead of insisting on old and usual solutions, they are able to quickly see a new solution to the problem and act accordingly.
Therefore, having flexible thinking is effective not only in design but also in solving all the problems and challenges of life. See, in fact, the design should act like the element of water and be flexible in any container and take the shape of the same container.
Before we could access the internet through cell phones and tablets, things were simpler. Being online meant designing a website that only needed to be displayed on a desktop screen and maybe a laptop. But now there are many sizes to consider, from desktop and laptop screens to smaller mobile and tablet screens, and if the web page is not displayed correctly on the screen, the user will quickly leave the page. There are two methods to ensure website optimization for mobile, tablet, laptop and computer: responsive design and adaptive design, while both are intended to solve the same problem, from the strategy they use different.
Knowing the difference between these two approaches will help you decide which one makes the most sense for your next UX project.
In this article, we define adaptive design and responsive design (which is also translated as responsive design in some texts) and then examine the pros and cons of each. So stay with the article “Adaptive Design compared to Responsive Design” until the end, which is a series of user experience design training articles.
Table of Contents
What is responsive design?
A website created with responsive design renders a site correctly for any device, that is, the site is fluid and changes its layout and appearance based on the size and orientation of the device.
Developers use CSS to ensure that every page of the site can be reformatted based on the size of the user’s viewport, and they only need to create a single codebase for the site. They use something called breakpoints to tell the site when to adjust to accommodate different screen sizes.
Result? A site may have a four-column layout on a large desktop computer screen, a three-column layout on a smaller laptop screen, a two-column layout on a tablet screen, and a one-column layout on a mobile phone. Regardless of what device you’re viewing a responsive website on, you’ll find the same content and design.
According to Amy Schade of the Nielsen Norman Group, UX designers involved in creating a responsive design must work closely with developers to ensure that the design works on different screen sizes. The user experience changes along with the page elements, so it is important for the UX designer to ensure that the site maintains its usability as it changes shape. One way to do this is to make sure the most important content is prioritized on different devices, especially on the smallest screen sizes.
What is adaptive design?
In adaptive design, a different website layout is created for each device page. Upon loading, the website detects the page size and renders the desired layout for that viewport. You can actually create a different user experience for each of six common screen sizes from extra small to extra-large: 320px, 480px, 760px, 960px, 1200px, and 1600px.
However, because designing a website for six different screen sizes is very time-consuming, you can refer to the user analysis for the existing version of the website and adjust yourself to the screen size that users have access to the most. limited For example, if the analysis shows that the majority of users use the site on their Apple iPad and Samsung Galaxy mobile phones, you design the user experience for these two screen sizes specifically instead of all six possible screen sizes.
Advantages of responsive design
From a UX designer’s point of view, the biggest advantage of responsive design is that it requires significantly less work than adaptive design, both to create it initially and to maintain it.
Responsive sites also accommodate an unlimited number of screen sizes, which is good news considering that devices with new and strange screen sizes seem to be released regularly.
Responsive sites also perform better in search engine rankings because they are mobile-friendly.
Disadvantages of responsive design
Responsive websites, on the other hand, require more programming for developers, and even when the UX designer and developer work together to make sure the design works on most devices. It is impossible to control the layout on all devices. As a result, there may be certain devices on which the web page is not set up to provide the best user experience. In addition, because the entire website code is sent regardless of the device the site is accessed from, the responsive site loads slower.
This can also compromise the user experience. Due to the flexibility of responsive design, it is often the preferred solution for optimizing a website for different devices, especially when the site is being created from scratch and consists of a large number of web pages.
Advantages of adaptive design
For a UX designer, the different layouts required for an adaptive design can be made easier because it simply requires creating wireframes for a fixed width of each screen size. This means that the UX designer has full control over each layout and can ensure that the user experience is optimal for any screen size.
Consequently, if the UX designer believes in showing different content for different screen sizes, he can do so. For example, an adaptive site for a food delivery service might include a home page for a desktop computer that displays restaurant options and different food categories, along with a restaurant location search feature. Meanwhile, the home page of the same site on mobile may only have a restaurant location search feature. It is easier for developers to implement adaptive sites because they only provide the necessary code for the displayed screen size, they have a much faster loading time than responsive sites. It is said that adaptive design can be very useful for UX designers.
Disadvantages of adaptive design
While you may limit yourself to only two or three of the six common page sizes with adaptive design, this means that the site will not be formatted correctly if users access a device it was not designed for.
Even though all six screen sizes are designed for them, unusual screen sizes are still not covered. Adaptive design is often better for redesigning or improving a website. For example, if a customer needs a mobile design for an existing website that does not intend to change it, adaptive design can be the best option for him.
6 key points of adaptive design compared to responsive design
You should now have a basic understanding of responsive design and adaptive design and the advantages and disadvantages of both approaches. As you decide which method works best for your next UX project, remember that:
1- A responsive design can change the layout and appearance of the page based on the screen size of the device you are accessing it from, from a large desktop computer to a small mobile phone.
2- Adaptive design requires creating a different layout for each device that the website accesses.
3- Responsive design often requires less work for a UX designer to create, but they have to work with the developer to make sure the site design is usable on any screen size.
4- Adaptive design requires a UX designer to create up to six different versions of a website for screens of different sizes. While this takes a lot of work, it enables the UX designer to optimize the user experience for each device these layouts cover.
5- Responsive design is often the best option for larger sites that are designed from scratch
6- Adaptive design is often the best option for smaller sites that are reloading.
“You put water into a cup, it becomes the cup
You put water into a bottle it becomes the bottle
You put water in a teapot, it becomes the teapot”