Send Us A Message

Your message was sent successfully!

Processing Form

Adaptive versus Responsive Design

These two terms are used interchangeably even though they are not the same thing. While Adaptive and Responsive design may have very similar goals, their approaches are different. Adaptive Adaptive design is server-side, meaning the images are optimized for specific screen resolutions before the page is even delivered. The server distinguishes what kind of device is accessing the site and loads the preset layout based on that device. A key component here is that it loads a preset and predefined layout; think of the different layouts for a laptop vs a smartphone, or a smartphone vs a tablet. With adaptive design, the server hosting the website detects the devices making requests to it, and uses this information to deliver different batches of HTML and CSS code based on the characteristics of the device that have been detected.[1] Typically, adaptive websites have faster load time and overall user experience. For example, when a high-density retina display is detected, high-resolution images are transferred and used instead of defaulting to high-resolution images for everyone. Adaptive design is frequently the most cost efficient option.   Responsive Responsive design is client-side, meaning the whole page is delivered to the device browser (the client), and the browser then changes how the page appears in relation to the dimensions of the browser window. In less techie terms, a responsive design doesn’t care how many people access the information; it will respond by re-sizing and reformatting to show content clearly and maintain its full functionality.  “Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries.  The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.” [2]   Taken directly from Google "Responsive web design” or RWD means that the page uses the same URL and the same code whether the user is on a desktop computer, tablet, or mobile phone – only the display adjusts or “responds” according to the screen size. Google recommends using RWD over other design patterns. One of the benefits of RWD is that you’ll only need to maintain one version of your site instead of two (i.e., you won’t need to maintain the desktop site at www.example.com and the mobile version at m.example.com – you’ll maintain only one site, such as www.example.com, for desktop and mobile visitors)." [3] I hope this helps clarify the difference between Adaptive and Responsive Design.  Remember that responsive design is client-side and will provide an ideal experience regardless of what device they view the content on. Adaptive design is server-side and you develop layouts for a few devices rather than for all.           References: [1] http://venturebeat.com/2013/11/19/responsive-design-adaptive/ [2] http://whatis.techtarget.com/definition/responsive-design [3] https://developers.google.com/webmasters/mobile-sites/get-started/key    
12 December,2017 The Obsidian Blog | Adaptive versus Responsive Design Obsidian Learning