Difference between Responsive and Adaptive web design?

Overview

The rapid spread of mobile devices has turned the world of web design upside down. Users no longer view web content only on traditional desktop systems, but are increasingly using smartphones, tablets, and other devices with a wide range of dimensions. The challenge for web designers is to ensure that their websites look good not only on a big screen, but also on a tiny phone and everything in between.

Media queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user. A part of the CSS3 specification, media queries expand the role of the media attribute that controls how your styles are applied. For example, it's been common practice for years to use a separate style sheet for printing web pages by specifying media="print" . Media queries take this idea to the next level by allowing designers to target styles based on a number of device properties, such as screen width, orientation, and so on. 

Difference between Responsive and Adaptive web design?

The hot topic for web developers and website owners is the way that websites can now automatically respond and adapt to any device with any screen size. This new way of web design optimizes the layout of the site to suit the screen size of the device it is being viewed on. There are two ways in which this can be achieve: with Responsive Web Design (RWD) and with Adaptive Web Design (AWD). Visitors to your site will not be concerned about which of the two methods you have used. This can simply come down to your or your designer’s preference. The user will not really notice a visible difference between the two methods but they do differ slightly.Adaptive is bit time consuming and expensive because you have to design multiple page layouts and render them according to device which renders it.

Responsive Web Design (RWD)

The key and important tool or elements that make up a Responsive website are CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible foundation. It is also fundamental to use flexible images, flexible videos, fluid type and EM’s instead of pixels. All of these key points allow the responsive website to modify its layout to suit the device.
Responsive design is client-side which means the page is sent to the device browser (the client), and the browser then modifies the appearance of the page in relation to the size of the browser window.

The definition of a responsive website is that it will fluidly alter its composition to improve the accessibility of content depending on the screen size of the browser window.

Adaptive Web Design (AWD)

Adaptive web design uses predefined layouts that have been carefully constructed for a variety of screen sizes. A particular layout is activated when the screen size of the device viewing the website is detected and matched with a style sheet.
Adaptive design is predominantly server side. This means that the web server does all of the work of detecting the various devices and loading the correct style sheet depending on the attributes of the device. As well as the layout changing depending on the size of the screen they can also change depending on conditions like whether the device has a retina display or not. The server can detect this and display high quality images for retina display devices like iPads and lower quality images for standard-definition displays.

The downsides to AWD are that initial construction is very costly as you have a lot of layouts to design. Also to maintain and update all of these layouts can be very time consuming which will therefore cost a lot of money.

The definition of an adaptive website is one that has a set of predefined layouts that are activated when best suited to the device detected by the server.

Similarities and differences

The obvious similarity of both methods is that they improve accessibility of website content on mobile devices and various screen sizes. They also both provide visitors with an enhanced mobile-friendly user experience.

They are different in the way that they deliver the responsive / adaptive design to the user. RWD is dependent on fluid grids and AWD is relying on predefined size layouts. Also the fact that they either use client side or server side is another way in which they differ.

The visible difference is that responsive design will fluidly alter its layout while you resize your browser window whilst adaptive design will load a specific layout for the device you’re viewing the site on. If you resize your window with an adaptive website it will jump to a different breakpoint when you reach a screen size that suits another predefined layout.

Responsive Web Design Basics

Truth is that Web started with only webpages. We never thought that there can be anything apart from computers which will access the web page.Simple,We were not ready for other devices,When suddenly  use of mobile devices to browse the web increased ,nothing was visible on small devices properly web isn't optimized for those mobile devices. Mobile devices are often constrained by display size and require a different approach to render data on screen.

 Let us start thinking about how to optimize our existing or new web for mobile devices..
First and foremost thing is to use VIEWPORT TAG .

How to set the viewport

Pages optimized for a variety of devices must include a meta viewport element in the head of the document. A meta viewport tag gives the browser instructions on how to control the page’s dimensions and scaling.

 In order to attempt to provide the best experience, mobile browsers will render the page at a desktop screen width (usually about 980px, though this varies across devices), and then try to make the content look better by increasing font sizes and scaling the content to fit the screen. For users, this means that font sizes may appear inconsistently and they have to double-tap or pinch-zoom in order to be able to see and interact with the content.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Using the meta viewport value width=device-width instructs the page to match the screen’s width in device independent pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.
Some browsers will keep the page’s width constant when rotating to landscape mode, and zoom rather than reflow to fill the screen. Adding the attribute initial-scale=1 instructs browsers to establish a 1:1 relationship between CSS pixels and device independent pixels regardless of device orientation, and allows the page to take advantage of the full landscape width.

Ensure an accessible viewport

In addition to setting an initial-scale, you can also set the minimum-scale, maximum-scale and user-scalable attributes on the viewport. When set, these can disable the user’s ability to zoom the viewport, potentially causing accessibility issues.

Size content to the viewport

On both desktop and mobile devices, users are used to scrolling websites vertically but not horizontally, and forcing the user to scroll horizontally or to zoom out in order to see the whole page results in a poor user experience.

FINALLY -----

 

 

POINTS TO REMEMBER WHILE DESIGNING RESPONSIVE WEBSITE

• Use meta viewport tag to control the width and scaling of the browsers viewport.
• Include width=device-width to match the screen's width in device independent pixels.
• Include initial-scale=1 to establish a 1:1 relationship between CSS pixels and device independent pixels.
• Ensure your page is accessible by not disabling user scaling.
• Do not use large fixed width elements.
• Content should not rely on a particular viewport width to render well.
• Use CSS media queries to apply different styling for small and large screens.
• Media queries can be used to apply styles based on device characteristics.
• Use min-width over min-device-width to ensure the broadest experience.
• Use relative sizes for elements to avoid breaking layout.
• Media queries can be used to apply styles based on device characteristics.
• Use min-width over min-device-width to ensure the broadest experience.
• Use relative sizes for elements to avoid breaking layout.

Below is a list of  most popular devices, along with their resolutions and display sizes.

Manufacturer	Model	Screen Size	Resolution	Type
Acer	Iconia Tab	10.1″	1280×800	Tablet
Amazon	Kindle Fire	7″	1024×600	Tablet
Apple	iPad	9.7″	1024×768	Tablet
Apple	iPad 2	9.7″	1024×768	Tablet
Apple	iPad 3	9.7″	2048×1536	Tablet
Apple	iPhone 3GS	3.5″	480×320	Smartphone
Apple	iPhone 4S	3.5″	960×640	Smartphone
Apple	iPhone 5	4″	640×1136	Smartphone
ASUS	Transformer TF101	10.1″	1280×800	Tablet
ASUS	Transformer Prime TF201	10.1″	1280×800	Tablet
Barnes & Noble	NOOK	7″	1024×600	Tablet
BlackBerry	Playbook	7″	1024×600	Tablet
BlackBerry	Torch 9800	3.2″	480×360	Smartphone
BlackBerry	Torch 9810	3.2″	640×480	Smartphone
Colby	Kyros	7″	800×480	Tablet
HP	TouchPad	9.7″	768×1024	Tablet
HTC	Amaze 4G	4.3″	960×540	Smartphone
HTC	Evo 3D	4.3″	960×540	Smartphone
HTC	Flyer	7″	1024×600	Tablet
HTC	Sensation 4G	4.3″	960×540	Smartphone
HTC	Thunderbolt	4.3″	480×800	Smartphone
Lenovo	IdeaPad A1	7″	1024×600	Tablet
Lenovo	ThinkPad	10.1″	1280×800	Tablet
LG	G2x 4G	4″	800×400	Smartphone
LG	G-Slate	8.9″	768×1280	Tablet
Motorola	Droid BIONIC	4.3″	540×960	Smartphone
Motorola	Droid RAZR	4.3″	540×960	Smartphone
Motorola	Droid Xyboard 10.1	10.1″	1280×800	Tablet
Motorola	Xoom	10.1″	1280×800	Tablet
Nokia	Lumia 900	4.3″	480×800	Smartphone
Samsung	Brightside	3.1″	240×320	Smartphone
Samsung	Epic 4G Touch	4.52″	800×480	Smartphone
Samsung	Exhibit 4G	3.5″	480×800	Smartphone
Samsung	Focus Flash	3.7″	480×800	Smartphone
Samsung	Galaxy S 4G	4″	480×800	Smartphone
Samsung	Galaxy S II	4.52″	800×480	Smartphone
Samsung	Galaxy S III	4.8″	1280×720	Smartphone
Samsung	Galaxy Tab	7″	1024×600	Tablet
Samsung	Galaxy Tab 7.7	7.7″	1280×800	Tablet
Samsung	Galaxy Tab 10.1	10.1″	1280×800	Tablet
Samsung	Gravity Smart	3.2″	320×480	Smartphone
Samsung	Sidekick 4G	3.5″	800×480	Smartphone
Sony	Tablet S	9.4″	1280×800	Tablet
T-Mobile	MyTouch 4G Slide	3.8″	800×480	Smartphone
T-Mobile	SpringBoard	7″	1280×800	Tablet
Toshiba	Thrive	10.1″	1280×800	Tablet

Hope you will enjoy...
Shabir Hakim