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).

Responsive Design

In responsive design, a website will change its appearance based on the viewport of the browser. Typically developers use the width of the browser as the variable which determines the size of the dynamically changing elements on the page.

Responsive design is straightforward. Because it is fluid, it means that users can access your online world and enjoy as much of it on their handheld device as they would on a massive monitor. For this to be true, responsive design requires a very good conceptualization of the site and a deep knowledge of the needs and wants of the end users!

Adaptive Design

Just like responsive websites, an adaptive site will adjust the layout of the page depending on the width of the browser, but it does so in a different fashion.

Adaptive designs consist of multiple renditions of the same design – one for each size, as chosen by the designer or UI developer.

What’s the Difference ?

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.

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:

320, 480, 760, 960 , 1200, 1600

Responsive Design lets designers show content based on the browser space available. This allows consistency between what a site shows on a desktop and what it shows on a handheld device. Responsive design is the “traditional” option and remains the more popular approach to date.

Adaptive Design, developed in 2011, is more involved in that the designer has several fixed layout sizes. It offers an alternative to the “one-size-stretches-to-all” approach.

So what is the conclusion ?

Choosing between a responsive and an adaptive design takes careful consideration. While it might be prudent to stick to a responsive design for the sake of expedience (saving cost, improving SEO, and keeping users content with a seamless experience between devices), it’s crucial to check the pros and cons of both designs in full. Adaptive design can tune in more to users’ varying needs in the field; thus, it’s vital to keep a finger on the pulse of change.

Think about your product or service. Does it access users in a specific setting? What is it about their behavior that you can use to keep them informed and engaged? Remember, it’s not just mobile devices that are getting smarter. In our homes and offices, we have more than traditional desktops. It’s an age that’s full of smarter objects. We must design with that smartness increasingly in mind.

Writtern by : Navna Punjabi