Friday, 13 June 2014

Difference between Responsive and Adaptive web design?


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.





  • 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