One Web approach:responsive vs adaptive daptive

We live in a world today where mobile devices are the most used mode of communication. People are increasingly using their mobile phones for browsing the internet to the extent that 30 to 50% of the internet traffic today comes from mobile devices. Developers have to reconcile themselves to the advent of One web. As W3C defines it, One web is ‘making, as far as is reasonable, the same information and services available to users irrespective of the device they are using’. But that does not mean that exactly the same information is available in exactly the same representation across all devices. The context of mobile use, device capability variations, bandwidth issues and mobile network capabilities all affect the representation. Furthermore, some services and information are more suitable for and targeted at particular user contexts.

As smartphones revolutionized the web over the last few years, the industry has collectively developed a shortlist of common best practices. All of these practices can generally be categorized as either responsive or adaptive layouts.

Responsive Web Design

Responsive web design provides the optimal viewing experience of a website, no matter what type of device the user is seeing it on. It is currently, the most popular One web design.

Responsive design works on the idea of flexibility. The principle is that a single fluid design based upon CSS media queries, flexible grids, EMs and responsive images can be used to create a user experience that changes based on a multitude of factors.

In this approach, designers can use a single template for all devices, and just use CSS to determine how content is rendered on different screen sizes.Also, developers can still work in HTML and CSS, technologies they’re already familiar with. So, Responsive layers generally perform better than adaptive layouts(with exceptions) providing for easy reading and navigation with a minimum of resizing, panning, and scrolling.

But performance can be an issue in responsive sites. This is because a responsive approach covers all devices though the user uses only one device. Responsive is also harder to make. It requires a developer to take all viewports into consideration when designing, so there is more work involved on the design side. It also requires extra attention to the site’s CSS and organization to make sure it functions well for any possible size, but gives you advantages in the long run.

Adaptive web design

Adaptive design is more like the modern definition of progressive enhancement. It involves a set of design methods that focus on the user and not the browser.Instead of one flexible design, adaptive design detects the device and other features, and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. This may result in a lack of consistency across platforms and devices, but the load time tends to be faster.

It is a high level design philosophy that can be achieved through a variety of execution tactics including server side user agent detection, or client side responsive web design. Adaptive design is fairly easy, as you only have to design for specific viewports, and browsers only display the highest one that will fit in its width.

The three layers that make up the Adaptive design approach are:

Content layer- rich semantic HTML markup

Presentation layer- CSS and styling

Client-side scripting layer- JavaScript or jQuery behaviors

While Responsive site designs are guaranteed to work well on any screen size, including new ones continually coming out, Adaptive designs only work on as many screens as its layouts are able to. Responsive sites are flexible enough to keep working on their own, but Adaptive sites will likely need some occasional maintenance. Adaptive may be good for newer, smaller websites being easier to make with a lesser load time.