responsive vs adaptive design what s the best n.
Skip this Video
Loading SlideShow in 5 Seconds..
What’s the Best Choice for Designers: Responsive vs. Adaptive Design PowerPoint Presentation
Download Presentation
What’s the Best Choice for Designers: Responsive vs. Adaptive Design

Loading in 2 Seconds...

play fullscreen
1 / 14

What’s the Best Choice for Designers: Responsive vs. Adaptive Design - PowerPoint PPT Presentation

  • Uploaded on

In this presentation, there is the explanation for the difference between responsive & adaptive design and conclude it, also describes that which is commonly used nowadays.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'What’s the Best Choice for Designers: Responsive vs. Adaptive Design' - vintagecoders786

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
table of content
Table of Content


What’s the Difference?

Why Use Adaptive?

Why Use Responsive?

Considerations to Take into Account

The Decision


Contact Us


Google has always recommended responsive web design (RWD), especially after rolling out a big update on the 4/21/15 which ranked mobile-friendly sites higher.

It doesn’t specify in the update that you must use responsive design though, just that a site be accessible on mobile, with good UX and performance.

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

One of the biggest debates that we’ve seen since the rise of mobile is whether you should choose to develop a responsive, adaptive web design (AWD) or standalone mobile site (with its own m. URL). 

For the purposes of this discussion, we’ll leave out standalone m. sites as it appears to be the least favorite solution for designers and businesses since they must be created separately (which accrues more upfront cost and maintenance costs).

what s the difference
What’s the Difference?
  • So first up, what’s the key differences between responsive and adaptive design?
  • Put simply, responsive is fluid and adapts to the size of the screen no matter what the target device. 
  • Responsive uses CSS media queries to change styles based on the target device such as display type, width, height etc., and only one of these is necessary for the site to adapt to different screens.
what s the difference 1
What’s the Difference?

Adaptive design, on the other hand, uses static layouts based on breakpoints which don’t respond once they’re initially loaded. 

Adaptive works to detect the screen size and load the appropriate layout for it – generally you would design an adaptive site for six common screen widths:







On the surface, it appears that adaptive requires more work as you have to design layouts for a minimum of six widths. 

However, responsive can be more complex as improper use of media queries (or indeed not using them at all) can make for display and performance issues.

why use adaptive
Why Use Adaptive?

Adaptive is useful for retrofitting an existing site in order to make it more mobile friendly.

This allows you to take control of the design and develop for specific, multiple viewports.

The number of viewports that you choose to design for is entirely up to you, your company and overall budget.

It does, however, afford you a certain amount of control (for example over content and layout) that you won’t necessarily have using responsive design.

Generally, you would begin by designing for a low resolution viewport and work your way up to ensure that the design doesn’t become constrained by the content.

As mentioned previously, it’s standard to design for six resolutions. 

However, you can make a more informed decision by looking at your web analytics for the most commonly used devices and then designing for those viewports.

why use responsive
Why Use Responsive?

The majority of new sites now use responsive, which has been made easier for less experienced designers and developers,  thanks to the availability  of themes accessible through CMS systems such as WordPress, Joomla and Drupal.

Responsive doesn’t offer as much control as adaptive, but takes much less work to both build and maintain.

Responsive layouts are also fluid and whilst adaptive can and does use percentages to give a more fluid feel when scaling, these can again cause a jump when a window is resized. 

For example, in the image below, which shows a fluid layout, the designer is using percentage widths so that the view will be adjusted for each user.

considerations to take into account
Considerations to Take into Account

As discussed earlier, responsive sites can suffer when it comes to site speed (if they aren’t properly implemented).

Responsive also requires more in the way of coding in order to ensure that the site fits each and every screen that access it. 

However, the extra work is debatable (compared to adaptive design) since adaptive design requires that you develop and maintain separate HTML and CSS code for each layout. 

Modifying adaptive sites is also more complex since it’s likely you’ll have to ensure that everything is still working sitewide (such as SEO, content and links) when it’s time for implementation.

You should, of course, also consider the user experience.

Because responsive essentially shuffles the content around in order to fluidly fit the device window, you will need to pay particular attention to the visual hierarchy of the design as it shifts around.

the decision
The Decision

When it comes down to it, the key is to consider your audience first and foremost no matter what design technique you adopt.

Once you know exactly who they are and what devices they tend to access the site on, then it’s easier to design with them in mind when it comes to layout, content and so on. 

the decision 1
The Decision

It will also depend largely on whether you have an existing site to work with or you’re starting from scratch. 

Responsive design has become the go-to design technique and it’s thought that around 1/8 websites now use responsive (while there’s little to no data on how many use adaptive).

Adoption rates for responsive are growing quickly too and have almost reached the same level as standalone mobile sites.

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

However, if a client or company has the budget, then adaptive might be a better choice, according to a test carried out by Catchpoint.

They built two sites in WordPress, one using the standard WP TwentyFourteen responsive theme and the other using a plugin called Wiziapp.


Responsive design will remain popular, but that might be because we have not yet found a decent solution to the heavy maintenance that adaptive demands.   

Adaptive design hasn’t died out though, despite the web’s apparent love of responsive, so it’s possible – in theory at least – that we’ll see some improvements emerge yet that will blow responsive web design out of the water.

contact us
Contact Us

Vintage Coders

Address: SCO : 35F City Center, near Bus Stand

Hoshiarpur, Punjab, India.


Phone: 07837982287

Office Email: