What is Adaptive and Responsive Design?

Adaptive design and responsive design: Key differences

Adaptive design and responsive design are two different methods of web design. Adaptive design uses static layout based on breakpoints and does not respond after loading; while responsive design is flowing, using percentages as a unit of measurement, adjusted according to browser width.

Which design to choose for the project depends on the specific requirements. Adaptive design provides a more tailored user experience as it allows for special design for different devices, but requires more work. Responsive design is more flexible and easier to implement, but may not provide the same tailored experience.

Implementing adaptive design may improve website loading speeds because it only loads the resources required by a specific device. However, it requires a deep understanding of the different devices used by the target audience and may increase development time and cost.

The misunderstanding of "responsive design"?

We are all familiar with the term “responsive design”, which means designing websites that can be displayed correctly on all devices and screen sizes. But some people think that "adaptive design" is more appropriate.

Are they the same thing? Or is “adaptive design” a whole other thing? How should “fluid design” be understood?

This question seems simple, but after some research, I found it to be more vague than I thought, and may even be controversial.

There seem to be two definitions of adaptive design:

Definition 1: Responsive design is like a selfie stick, adaptive design is like an umbrella

In this definition, a responsively designed web page—like a selfie stick—can be in various states ranging from full stretch to full retraction and any point between

, etc. use. Of course, some widths or breakpoints are more important than others, but each different width produces a slightly different layout.

Adaptive design is more like an umbrella. It has a preset "status" - on to block the rain and off for portability. "Intermediate state" doesn't matter.

Self-stick with umbrella

Many GIF animations illustrate this concept well.

In 2015, Geoff Graham outlined his views on the differences between the two, saying that responsive layouts adapt to the browser width at any given moment , while "adaptive layout" Only at specific breakpoint

to adapt to the width of the browser.

Geoff says responsive design is based on percentage (i.e. the same as fluid design), while adaptive design is based on fixed units of measurement

. Both are powered by CSS media queries.

Definition 2: Adaptive design itself responds to the entire device environment (not just the screen)

However, as you can see from the comments below the Geoff article, not everyone agrees with this definition.

The following are the top comments:

"Responsive design can be flowing or fixed, and adaptive design can be too. The difference is that responsive design does not care which browser is used, it responds to the browser size and readjusts the layout accordingly. On the other hand, self- Adaptation design is designed specifically to adapt to the browser environment, and may or may not consider the current size of the browser." ⏤ zzzzBov.

According to zzzzBov's definition, adaptive design is powered by JavaScript, which reacts as much to the device's type and is also related to the screen size. For example, a tablet may have a high-resolution screen, but requires a larger touch target. The phone may require a different navigation system.

Many famous people have expressed their opinions, from UXPin to Mozilla, but it still seems to be open.

My opinion

Let's use adjustable desk lamps as a real-world example: a responsive design is when you turn the switch, the desk lamps respond to

and turn on the light. Adaptive design is that you can adjust /adapt the table lamp for better viewing. If the website is not responsive to your interaction, it is not very responsive if it cannot adapt to its surroundings (i.e. device screens) it is not very adaptive. Both of these will seriously affect the user experience.

Why responsive design is not a true responsive design

Response is the result of another action, for example, if a website button changes its background color when the user hovers over it—the action is hover, and the response is the background color change.

Usually when we say that a website is responsive, we mean that it fits in any screen size on any device, but in reality, it should mean that it responds to user interactions. The reasons are as follows:

Users cannot resize browsers on their mobile devices. While users can change the browser size on their desktop computers, they usually don't need to do this to interact with the website - this is not a normal user interaction . Of course, our web designers often resize their browsers to test the website, but this is not a normal action for users.

Why do I think "adaptive design" is more accurate

Since screen sizes are often used in their default state (in a sense you can't or don't need to resize them), the term "adaptive design" may be more appropriate. A website (at least a well-designed website) will modify its layout to fit the user's device; this is a non-autonomous behavior, which means that the user does not have to interact with the website to adapt. Adaptive design can also describe how we optimize load time and perceived performance of small handheld devices. So what is fluid design?

In the early 2000s, the biggest debate was “fixed layout vs. fluid layout.” The fluid design layout uses percentage settings to fit the browser framework. Fixed layout is set as a single layout determined by the pixel width. Neither of them are ideal. The fixed layout looks great on the right screen, but it doesn't work on a small monitor. The fluid layout is more flexible, but looks slender on a widescreen display. Responsive design is Ethan Marcotte’s direct response to these design puzzles—not puns—. The classic “retractable” RWD is like a mature version of fluid design – stretching to fill the window, but reorganizing itself if necessary. Geoff’s definition of adaptive design—although many people disagree—like the “mature version of fixed design”—is not a single fixed layout, but 3, 4 or more layouts.

Conclusion

This is what I think of responsive design and adaptive design. After reading this article, will you change the way you talk about these terms or continue to use responsive design as a way to adapt your website to multiple screen sizes a little easier?

Have you ever used the term "adaptive design" but only got a blank look?

I would like to know, please let me know in the comments below!

(Do not argue!)

FAQs for Adaptive and Responsive Design (FAQ)

What are the main differences between adaptive design and responsive design?

The main difference between adaptive and responsive design is their approach to user experience. Adaptive designs use static layouts based on breakpoints, and once initially loaded, they won't respond. Responsive design, on the other hand, is flowing, which uses percentages instead of pixels as units of measurement to adjust based on browser width.

Is adaptive design better than responsive design?

The choice of adaptive design and responsive design depends on the specific needs of the project. Adaptive design can provide a more tailored user experience as it allows for the creation of specialized designs for different devices. However, it requires more work because you need to create a design for each screen size. Responsive design, on the other hand, is more flexible and easier to implement, but it may not provide the same tailor-made experience as adaptive design.

How does adaptive design affect the loading speed of a website?

Adaptive design may increase the loading speed of the website. This is because it only loads the resources required by a particular device, which can reduce the amount of data that needs to be downloaded.

What are the challenges of implementing adaptive design?

Implementing adaptive design can be more complex and time-consuming than responsive design. It requires a deep understanding of the different devices used by the target audience and creating a specific design for each device. This increases development time and cost.

Can adaptive design improve the user experience?

Yes, adaptive design can significantly improve the user experience. By creating designs tailored to a specific device, you can ensure that your content is displayed on each device in the optimal way. This can lead to a more pleasant and efficient user experience.

Is adaptive design suitable for all types of websites?

While adaptive design may be beneficial for many types of websites, it may not be the best choice for all websites. Websites that require highly customized for different devices can benefit from adaptive design. However, for simpler websites, responsive design may be a more cost-effective option.

How does adaptive design affect SEO?

Adaptive design may have a positive impact on SEO. By providing a better user experience and faster load times, it can improve your website's ranking in search engine results. However, it is important to make sure all versions of your website have the same content and meta tags to avoid any potential SEO issues.

What skills are required to implement adaptive design?

Implementing adaptive design requires a deep understanding of the principles of web design, as well as knowledge of HTML, CSS and JavaScript. It also needs to be able to design for different devices and screen sizes and understand how to optimize resources for different devices.

Can adaptive design be used with responsive design?

Yes, adaptive design and responsive design can be used together. This approach is called "RESS" (responsive design with server-side components), which combines the flexibility of responsive design with device-specific optimization for adaptive design.

What is the future of adaptive design?

As the number of different devices and screen sizes continues to grow, the demand for adaptive design may increase. However, as technology advances, new design approaches that combine the best aspects of adaptive design and responsive design may emerge.

The above is the detailed content of What is Adaptive and Responsive Design?. For more information, please follow other related articles on the PHP Chinese website!