{"id":13883,"date":"2021-03-01T09:00:00","date_gmt":"2021-03-01T08:00:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=13883"},"modified":"2022-01-05T20:03:11","modified_gmt":"2022-01-05T19:03:11","slug":"adaptive-vs-responsive-web-design","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/","title":{"rendered":"Decoding Adaptive Vs. Responsive Web Design"},"content":{"rendered":"\n

AWD (Adaptive Website Design) and RWD (Responsive Website Design) are trending in website development. However, discussions regarding which technique to choose are trending as well.<\/p>\n\n\n\n

Hence, this article discusses the differences between adaptive vs. responsive web design to help address this confusion. <\/p>\n\n\n\n

Also, if you are interested in determining whether a website follows RWD or AWD, examples of tools are referenced in this article. For example, you can just cite the URL of the website in that particular test automation platform<\/a> and find out which design method is being followed. <\/p>\n\n\n\n

As you read through this article, you will come to understand that the choice between the two designs lies in the customer scenario on which we aim to focus. Ask yourself questions like: What problem are you solving for the customer? How does the solution improve their technique? These are some questions your software organization should ponder before taking the big step and choosing between AWD, RWD, and who knows RESS! Let us explore more on these techniques.<\/p>\n\n\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
  1. What is RWD?<\/a>
  2. What are RWD goals?\u00a0<\/a>
  3. What is AWD?<\/a>
  4. What are the AWD goals?\u00a0<\/a>
  5. How to determine if the web page is responsive?<\/a>
  6. How to determine if the web page is adaptive?<\/a>
  7. How to determine if the web page is responsive and adaptive?<\/a>
  8. How are web pages with adaptive design and responsive design tested?<\/a>
  9. Conclusion – Which design is the best?<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n

    What is RWD?<\/strong><\/h2>\n\n\n\n

    So, what is the goal of a responsive web design<\/a> (RWD)? Let us first understand how this technique works and then understand what the plans are.<\/p>\n\n\n\n

    RWD works by sending the same <\/strong>code associated with the website to every electronic device in the background. After that, it rearranges <\/strong>the content on the client-side, i.e., the device side. Eventually, the same website version<\/strong> is displayed on each of these devices. The implementation of this technology is not straightforward – RWD design has high costs.<\/p>\n\n\n\n

    What are RWD goals? <\/strong><\/h2>\n\n\n\n

    Now, let us understand the goals behind choosing this technology. <\/p>\n\n\n\n

    People access websites from all over the world using different types of devices. With technological advancements, the number of device brands and device types, including mobile, tablet, laptop, etc., is very high. Each of these devices has a different screen size and resolution. Does the website appear the same on every device from which it\u2019s accessed? You\u2019ve probably noticed (especially a few years ago) those instances in which it didn\u2019t work as well.  <\/p>\n\n\n\n

    Now, in the event your organization has customers around the world, your customers are accessing it from many types of devices and not one specific brand or type. <\/strong>Your website developer would need<\/a> to design a site that displays the UI so that the website is “responsive” as per the device it is accessed from.<\/p>\n\n\n\n

    This is what responsive design is all about \u2013 It is a website design that is responsive as per the device from which it\u2019s accessed. <\/p>\n\n\n\n

    What is AWD?<\/strong><\/h2>\n\n\n\n

    An adaptive website design (AWD) is similar to a responsive website. It, too, adjusts the website layout but from a different perspective. Here, we have website layouts that remain static<\/strong>. Still, it generates <\/strong>or adapts <\/strong>the associated required screen size layout when it detects the screen size.<\/p>\n\n\n\n

    Much effort is expended in developing several versions of the website.<\/p>\n\n\n\n

    What are the AWD goals? <\/strong><\/h2>\n\n\n\n

    Eventually, the website developer needs to have multiple design versions created for each website<\/strong>. The content adaptation method<\/strong> detects the device and renders the associated version of the website. A specific website version is sent to the device based on mobile, desktop, tablet, or other types of device configuration.<\/p>\n\n\n\n

    Let us say you wish to launch a website for your e-commerce store. In this case, you would already be aware that your company would fetch a good ROI by designing a mobile dedicated version<\/strong> in the e-commerce world. After all, research<\/a> estimates that in 2021, approximately 73% percent of e-commerce in the retail domain alone is expected to be generated through mobile commerce. Hence, in situations such as these, you may target the mobile users and ask the website designers to build<\/a> a website using AWD. <\/p>\n\n\n\n

    How to determine if the web page is responsive?<\/strong><\/h2>\n\n\n\n

    It’s easy. Just check if the website responds and changes as per the device it is accessed from.<\/p>\n\n\n\n

    Let us try it out now:<\/p>\n\n\n\n

    1. Open a website in your desktop browser.  Bring the browser out of full-screen mode.<\/li>
    2. Place the cursor on the right-side edge of the browser window, and then resize to any size you wish; for example, in the mobile screen display format.<\/li>
    3. Check if the layout changes as per the resize you performed on the web page. If yes, it means the page is responsive.<\/li><\/ol>\n\n\n\n

      Note: You could also use Chrome’s user agent switcher<\/a> extension to try switching to the mobile device user agent on your computer.<\/p>\n\n\n\n

      Here is a link to some sites<\/a> that follow the responsive design.<\/p>\n\n\n\n

      How to determine if the web page is adaptive?<\/strong><\/h2>\n\n\n\n

      This is simple too. Let us try it out now:<\/p>\n\n\n\n

      1. Open a website in your desktop browser.  Bring the browser out of full-screen mode.<\/li>
      2. Place the cursor on the right-side edge of the browser window, and then resize to any size you wish; for example, in the mobile screen display format.<\/li>
      3. Open the same website on your mobile device or tablet.<\/li>
      4. Compare the layout in all three devices – desktop, mobile, tablet. If the layout differs, you can confirm that it follows AWD.<\/li><\/ol>\n\n\n\n

        Here is a link to some sites<\/a> that follow the adaptive design.<\/p>\n\n\n\n

        How to determine if the web page is responsive and adaptive?<\/strong><\/h2>\n\n\n\n

        Do you know that web pages can follow a mix of both designs?  This type of design is called RESS. The complete form is REsponsive with Server Side.  You can have different HTML pages in a website to have either of the techniques in an intermixed fashion!<\/p>\n\n\n\n

        Here, the technology of responsive design and server-side detection adaptive design is intermixed.<\/p>\n\n\n\n

         Let us try it out now:<\/p>\n\n\n\n

        1. Open a website in your desktop browser.  Bring the browser out of full-screen mode.<\/li>
        2. Place the cursor on the right-side edge of the browser window, and then resize to any size you wish; for example, in the mobile screen display format.<\/li>
        3. Open the same website on your mobile device or tablet.<\/li>
        4. Now, compare the layout in all three devices – desktop, mobile, tablet. If the layout differs, you can confirm that it follows AWD.<\/li>
        5. Verify if the website re-sizes to fit the screen when you pull the browser window\u2019s edge or corner. If yes, the website also follows RWD. <\/li><\/ol>\n\n\n\n

          Therefore, we can confirm that it is a RESS-associated website.<\/p>\n\n\n\n

          How are web pages with adaptive design and responsive design tested?<\/strong><\/h2>\n\n\n\n

          There are many testing tools to check for the responsiveness of a website\u2014for example, Browserstack. Try out the tool here<\/a>. In the tool, enter the name of the website to check. You can click between various devices and determine the responsiveness. <\/p>\n\n\n\n

          Similarly, you could try out tools like Responsinator<\/a>. Projects could use software test automation platforms such as TestProject, which has integration capabilities with BrowserStack too.<\/p>\n\n\n\n

          Conclusion – Which design is the best?<\/strong><\/h2>\n\n\n\n

          Well, the answer to this question is pretty simple! The answer is: Listen to the customer to know which design is best as per the use case scenario. Both designs have their own set of unique advantages. Organizations can choose either design or both in the RESS way, as per the customer\u2019s goal. Eventually, your website should be able to generate ROI for the business and satisfy the customer at the same time. <\/p>\n","protected":false},"excerpt":{"rendered":"

          AWD (Adaptive Website Design) and RWD (Responsive Website Design) are trending in website development. However, discussions regarding which technique to choose are trending as well. Hence, this article discusses the differences between adaptive vs. responsive web design to help address this confusion.  Also, if you are interested in determining whether a website follows RWD or… Read more<\/a><\/p>\n","protected":false},"author":67,"featured_media":13892,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":5,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[31],"tags":[6236],"collections":[],"class_list":{"0":"post-13883","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-developer","8":"tag-web-developer","9":"entry"},"yoast_head":"\nDecoding Adaptive Vs. Responsive Web Design - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"AWD (Adaptive Website Design) and RWD (Responsive Website Design) are trending discussions in website development. Know the difference!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Decoding Adaptive Vs. Responsive Web Design\" \/>\n<meta property=\"og:description\" content=\"AWD (Adaptive Website Design) and RWD (Responsive Website Design) are trending discussions in website development. Know the difference!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:author\" content=\"#\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-01T08:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-05T19:03:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Lorenzo Ermigiotti\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@#\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lorenzo Ermigiotti\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/\"},\"author\":{\"name\":\"Lorenzo Ermigiotti\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/e54433adb771f0b877d4127bade34b40\"},\"headline\":\"Decoding Adaptive Vs. Responsive Web Design\",\"datePublished\":\"2021-03-01T08:00:00+00:00\",\"dateModified\":\"2022-01-05T19:03:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/\"},\"wordCount\":1297,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4.jpg\",\"keywords\":[\"Web Developer\"],\"articleSection\":[\"Web Developer\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/\",\"name\":\"Decoding Adaptive Vs. Responsive Web Design - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4.jpg\",\"datePublished\":\"2021-03-01T08:00:00+00:00\",\"dateModified\":\"2022-01-05T19:03:11+00:00\",\"description\":\"AWD (Adaptive Website Design) and RWD (Responsive Website Design) are trending discussions in website development. Know the difference!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4.jpg\",\"width\":1200,\"height\":628,\"caption\":\"Decoding Adaptive Vs. Responsive Web Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Developer\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Decoding Adaptive Vs. Responsive Web Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/e54433adb771f0b877d4127bade34b40\",\"name\":\"Lorenzo Ermigiotti\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f84c267900f04a567ce1305c970bdb4520775aae41992ae028d80e84dc7009a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f84c267900f04a567ce1305c970bdb4520775aae41992ae028d80e84dc7009a9?s=96&d=mm&r=g\",\"caption\":\"Lorenzo Ermigiotti\"},\"sameAs\":[\"#\",\"https:\/\/x.com\/#\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/lorenzo-ermigiotti\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Decoding Adaptive Vs. Responsive Web Design - Codemotion Magazine","description":"AWD (Adaptive Website Design) and RWD (Responsive Website Design) are trending discussions in website development. Know the difference!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/","og_locale":"en_US","og_type":"article","og_title":"Decoding Adaptive Vs. Responsive Web Design","og_description":"AWD (Adaptive Website Design) and RWD (Responsive Website Design) are trending discussions in website development. Know the difference!","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_author":"#","article_published_time":"2021-03-01T08:00:00+00:00","article_modified_time":"2022-01-05T19:03:11+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4.jpg","type":"image\/jpeg"}],"author":"Lorenzo Ermigiotti","twitter_card":"summary_large_image","twitter_creator":"@#","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Lorenzo Ermigiotti","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/"},"author":{"name":"Lorenzo Ermigiotti","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/e54433adb771f0b877d4127bade34b40"},"headline":"Decoding Adaptive Vs. Responsive Web Design","datePublished":"2021-03-01T08:00:00+00:00","dateModified":"2022-01-05T19:03:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/"},"wordCount":1297,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4.jpg","keywords":["Web Developer"],"articleSection":["Web Developer"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/","name":"Decoding Adaptive Vs. Responsive Web Design - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4.jpg","datePublished":"2021-03-01T08:00:00+00:00","dateModified":"2022-01-05T19:03:11+00:00","description":"AWD (Adaptive Website Design) and RWD (Responsive Website Design) are trending discussions in website development. Know the difference!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4.jpg","width":1200,"height":628,"caption":"Decoding Adaptive Vs. Responsive Web Design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/adaptive-vs-responsive-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Web Developer","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/"},{"@type":"ListItem","position":4,"name":"Decoding Adaptive Vs. Responsive Web Design"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/e54433adb771f0b877d4127bade34b40","name":"Lorenzo Ermigiotti","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f84c267900f04a567ce1305c970bdb4520775aae41992ae028d80e84dc7009a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f84c267900f04a567ce1305c970bdb4520775aae41992ae028d80e84dc7009a9?s=96&d=mm&r=g","caption":"Lorenzo Ermigiotti"},"sameAs":["#","https:\/\/x.com\/#"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/lorenzo-ermigiotti\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4-600x600.jpg","author_info":{"display_name":"Lorenzo Ermigiotti","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/lorenzo-ermigiotti\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4.jpg",1200,628,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4-300x157.jpg",300,157,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4-768x402.jpg",768,402,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4-1024x536.jpg",1024,536,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4.jpg",1200,628,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4.jpg",1200,628,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4.jpg",100,52,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/02\/CO_magazine-template-4-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Lorenzo Ermigiotti","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/lorenzo-ermigiotti\/"},"uagb_comment_info":0,"uagb_excerpt":"AWD (Adaptive Website Design) and RWD (Responsive Website Design) are trending in website development. However, discussions regarding which technique to choose are trending as well. Hence, this article discusses the differences between adaptive vs. responsive web design to help address this confusion.  Also, if you are interested in determining whether a website follows RWD or……","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/13883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=13883"}],"version-history":[{"count":6,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/13883\/revisions"}],"predecessor-version":[{"id":15119,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/13883\/revisions\/15119"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/13892"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=13883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=13883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=13883"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=13883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}