Post by avani01 » Tue Jul 19, 2016 11:03 am

Google is always advisable responsive web design (RWD) and is actually due to hold a major update on April 21 that will work for mobile-friendly site rank higher.

Not specify in an update that should you use responsive design though, it's just that the site can be accessed on mobile phones, with a good UX and performance.

With that in mind, let us examine the pros and cons of adaptive vs. responsive design with regard to performance and UX.

One of the biggest debates we've seen since the advent of mobile phones is whether you should choose to develop responsive, adaptive design web (AWD) or a standalone mobile site (with the URL of its own m.). For the purposes of this discussion, we will leave the standalone m. site as it appears to be the most favorite solution for designers and businesses because they have to be made separately (incurred costs more upfront and maintenance costs).
What is the difference?

So first up, what is the main difference between a responsive and adaptive design?

Simply put, responsive are fluid and adjust the screen size does not matter what the target device. Responsive using CSS media queries to change the style is based on the target device such as the display type, width, height etc, and only one of these is required for the site to adapt to different screen.

adaptive design, on the other hand, use a static layout based breakpoints that do not respond after they first appeared. Adaptive work to detect the screen size and load the proper layout for it - generally you will design a site for six wide-screen adaptive general:


On the surface, it appears that the adaptive needs more work because you have to design the layout for a minimum of six wide. However, responsiveness can be more complex because of improper use of the media's questions (or did not use them at all) can create the look and performance problems.

Editor's note: In UXPin, you can use a variety of breakpoints. If you want to play around with them, start a free trial.

The latter in particular has created a lot of discussion over the last few years because it has been the case that many sites provide full desktop model that, even if it does not load on a mobile device, slowing the site down dramatically. To get around this, you can use media queries but there will be some sacrifices since responsive site will never be as fast as a dedicated mobile site.
Why Use Adaptive?

Adaptive useful for retrofitting an existing site to make it more mobile-friendly. It allows you to take control of the design and develop for specific, multiple viewports. The number of viewports you choose to design is entirely up to you, your company and the overall budget. It does, however, pay you some amount of control (eg over the content and layout) that you will not necessarily have to use responsive design.

Generally, you'll start by designing for low resolution viewport and work your way up to ensure that the design not being limited by the content.

As mentioned earlier, it is standard for designing over six resolutions. However, you can make better decisions by looking at your web analytics to the most frequently used and then design for those viewports.

If you want to design an adaptive site from scratch, that's OK too. Start again with designing for the lowest resolution and work your way up. You can then use a media query to expand the layout viewports for a higher resolution. However, if you do the design for multiple resolutions, you may find that this causes the layout to 'jump' when resizing the window.

It can be extra work designing and developing a website with an adaptive for multiple viewports that are usually used for retrofitting.
Why Use Responsive?

The majority of the new sites are now using responsive, which has made it easier for less experienced designers and developers, thanks to the availability of accessible themes through CMS systems like WordPress, Joomla and Drupal.

Responsive does not offer as much control as adaptive, but it takes much less time working to both build and maintain. fluid and responsive layout also can temporarily adaptive and does not use percentages to give the feel of a more liquid when scaling, this again can cause a jump when the window is resized. For example, in the figure below, which shows the layout fluid, designers who use percentage widths so that the display will be customized for each user.

You will design with a responsive layout with all this in mind and of course can be a confusing process and makes it quite complex. This means that you should focus on creating a viewport to mid-resolution and you can then use a media query to adjust the low and high resolution at a later date.

So basically, it's usually better to use responsive to new projects, and adaptive for retrofits.

Responsive also require more in the way of coding to ensure that it fits any screen to access it. However, additional work is debatable (as compared to the adaptive design) for adaptive design requires you to develop and maintain a separate HTML and CSS code for each layout. Modifying the adaptive sites are also more complex because chances are you have to make sure that everything is still all over the site works (such as SEO, content and links) when it is time for implementation.

You must, of course, also consider the user experience. Because essentially responsive rummaged around for seamlessly matches the device window, you will need to pay special attention to the visual hierarchy of the design as it shifted around.

According to Amy Schade, "responsive design often turn into solving the puzzle - how to arrange the elements on larger pages to fit skinny, page again or vice versa. However, make sure that the elements fit within the page is not enough. For responsive design to be success, good design should be used in all screen resolutions and sizes. "

So there are no shortcuts to whichever technique you decide to use - both in need of a job that comes with creating a site that is essentially a one size fits all. Responsive to have a slight edge, because you will not be, in the future, need to spend a lot of time in the maintenance of the site.


When it comes down to it, the key is to consider your audience first and foremost no matter what technique you adopt the design. Once you know exactly who they are and what device they are likely to access the site on, then it is easier to design with them in mind when it comes to the layout, content and so on.

It will also depend on whether you have an existing site to work with or you're starting from scratch. responsive design technique has become the go-to design and it is thought that around 1/8 of websites now use responsive (while there is little to no data on how much the use of adaptive). the rate of adoption for responsive grow fast as well and has almost reached the same level as a standalone mobile site.

With all that in mind, it is safe to say that responsiveness is usually the preferred technique if only because of the ongoing work of adaptive design demands.

However, if the client or the company has a budget, then adaptive might be a better choice, according to tests conducted by Catchpoint. They built two sites in WordPress, one using the standard WP TwentyFourteen and more responsive theme using a plugin called Wiziapp.

This plugin serves mobile themes for users, depending on the device they are accessing the site from and also offers advanced configuration options so that you can further streamline the process.

It must be shown that no optimization is done at all, but it does show that responsive sites is to download everything needed for a desktop. So right from the box, the theme does not offer excellent performance at all.

Again, this can be overcome by using a media query, but above serves as a good example of why responsive design - while becoming a popular option - not always the best for mobile. Until something better comes along though, it's hard to know what we can do about it other than to learn how to properly code and implement a responsive website is great.

So, the conclusion?

responsive design will remain popular, but that's probably because we have not found a decent solution for heavy maintenance which requires adaptive. The adaptive design is not dead, though, despite the obvious love of responsive Web, so it may - at least in theory - that we will see some improvements appeared yet that will blow responsive web design out of the water. |



Tue Oct 13, 2015 6:11 pm

Post by JackQT » Wed Oct 05, 2016 9:26 pm

Thanks for sharing it!

It's really helpful! Also, I have found a comparison of the design strategies, maybe it will help to make decision too:

Responsive web development

  • One URL for all versions of your site makes its promotion much easier.
  • Google considers responsiveness as mobile friendly and helps to improve your SEO rates.
  • Distinctive look on various devices.
  • Creating a responsive site alongside its maintenance is a much easier and cheaper process.
Negative moments
  • Too much content on a mobile screen sometimes.
  • Impossibility to create a customized product for all the diversity of contemporary devices.
Adaptive web development

  • Better targeting process as a server defines the type of device and uploads the appropriate version of your site.
  • The possibility to create a good looking and customized website for the particular type of devices with predictable behavior.
Negative moments
  • More expensive and complicated development process.
  • More complicated update and maintenance process.
If you want to delve deeper into the topic, you could read this article - ... our-choice You will have a much better understanding.
Good luck!



Wed Oct 05, 2016 9:09 pm

Post by MrPhil » Wed Jun 07, 2017 10:34 pm

Well, both require you (the UI designer) to be aware of the possible screen widths you will want to support. With Adaptive, you are explicitly laying out a half dozen or so page designs, but this gives you the opportunity to better customize the layout. With Responsive, you are still considering the half dozen or so page designs, but have to fold them into the interface (xs-, s-, m-, l-, etc. classes), which is more difficult. From the programming point of view, provided you don't have to reinvent the JS code to communicate between the device and the server, Adaptive is conceptually a bit easier -- you come up with a number of screen designs that each work over a narrow range of sizes. Responsive takes care of a lot of interaction stuff (mouse vs. swipe, etc.) under the covers (which Adaptive could do), but has the disadvantage of having to ship more stuff over the wire (higher bandwidth usage) due to bulkier JS and CSS libraries. Finally, if you change the screen (viewport) size or (on mobile devices) orientation, Adaptive has to send a request to the server to refresh the page with the new dimensions, whereas Responsive simply redisplays the page.

Which should you use? Find a library and model that you are most comfortable using. Neither has an overwhelming advantage over the other, and most end-users won't realize which you're using.

Active Member


Wed May 10, 2017 11:52 pm

Post by Owayll » Mon Aug 28, 2017 4:20 pm

I think responsive design is the future - easier, less time consuming, less code, larger community and so on. Tech like life always chooses the path of least resistance.



Fri Aug 25, 2017 6:35 pm

Post by skameykin22 » Fri Sep 08, 2017 10:37 pm

Yes, for such technology, the future.

User avatar


Fri Sep 08, 2017 6:42 pm

Post by karmaseo » Thu Sep 14, 2017 2:24 pm

The contrasts amongst responsive and versatile design approach spotlight critical choices for us as web and application designers. Picking with insight can enable you to design and execute your designs with better point, reason, and results. With the inescapability and assorted variety of cell phones, as designers, we have to take into account the assortment of screen sizes. This is a test that each web and application designers presently confronts. Architects hoping to overcome any issues between gadgets have two alternatives for their design: the versatile site or the responsive site.



Tue Sep 12, 2017 1:37 pm
Who is online

Users browsing this forum: No registered users and 3 guests