{"id":4560,"date":"2019-10-07T08:00:06","date_gmt":"2019-10-07T15:00:06","guid":{"rendered":"https:\/\/www.numinix.com\/blog\/?p=4560"},"modified":"2019-10-23T13:20:42","modified_gmt":"2019-10-23T20:20:42","slug":"mobile-web-design-responsive-vs-adaptive","status":"publish","type":"post","link":"https:\/\/www.numinix.com\/blog\/mobile-web-design-responsive-vs-adaptive\/","title":{"rendered":"Mobile web design: Responsive vs. adaptive"},"content":{"rendered":"<p><a href=\"https:\/\/www.numinix.com\/wordpress\/wp-content\/uploads\/2019\/09\/mobile-web-design.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4561\" src=\"https:\/\/www.numinix.com\/wordpress\/wp-content\/uploads\/2019\/09\/mobile-web-design.jpg\" alt=\"mobile web design \" width=\"600\" height=\"375\" srcset=\"https:\/\/www.numinix.com\/wordpress\/wp-content\/uploads\/2019\/09\/mobile-web-design.jpg 600w, https:\/\/www.numinix.com\/wordpress\/wp-content\/uploads\/2019\/09\/mobile-web-design-300x188.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">The growing prevalence of mobile traffic has made it important for businesses to invest in the development of a <\/span><a href=\"https:\/\/www.numinix.com\/index.php?main_page=advanced_search_result&amp;search_in_description=1&amp;zenid=aa97b5eccc8c667e4de203c0737789a0&amp;keyword=mobile%20optimization&amp;utm_source=Blog_October2019_ResponsiveAdaptive\"><span style=\"font-weight: 400;\">mobile-optimized website<\/span><\/a><span style=\"font-weight: 400;\">. After all, more purchases than ever before as being made through the use of smartphones. So, with two primary methods of mobile optimization currently being used to service developing websites, the question remains whether you should invest in responsive or adaptive web design.\u00a0<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"#\" data-href=\"https:\/\/www.numinix.com\/blog\/mobile-web-design-responsive-vs-adaptive\/#What_is_the_difference_between_these_two_designs\" >What is the difference between these two designs?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"#\" data-href=\"https:\/\/www.numinix.com\/blog\/mobile-web-design-responsive-vs-adaptive\/#Breaking_down_the_characteristics_of_a_responsive_web_design\" >Breaking down the characteristics of a responsive web design\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"#\" data-href=\"https:\/\/www.numinix.com\/blog\/mobile-web-design-responsive-vs-adaptive\/#Breaking_down_the_characteristics_of_an_adaptive_web_design\" >Breaking down the characteristics of an adaptive web design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"#\" data-href=\"https:\/\/www.numinix.com\/blog\/mobile-web-design-responsive-vs-adaptive\/#So_which_method_will_you_go_for\" >So, which method will you go for?\u00a0<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"What_is_the_difference_between_these_two_designs\"><\/span><b>What is the difference between these two designs?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Responsive and adaptive web designs both serve a purpose when it comes to the functionality and fluidity of a professional website. But how do they differ?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you break down the fundamentals of the following designs, some subtle elements affect the fluidity of the webpage. For example, if you take your fingers and drag the corners of the browser to adjust the size of the window, note what happens to the content on the page. If the text boxes and images scale down or shuffle upon this action, you have a responsive design. However, if nothing changes or moves until you the browser reaches a certain size, then you have an adaptive design.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Breaking_down_the_characteristics_of_a_responsive_web_design\"><\/span><b>Breaking down the characteristics of a responsive web design\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Developers building a <\/span><a href=\"https:\/\/www.numinix.com\/index.php?main_page=advanced_search_result&amp;search_in_description=1&amp;zenid=aa97b5eccc8c667e4de203c0737789a0&amp;keyword=responsive#utm_source=Blog_October2019_ResponsiveAdaptive\"><span style=\"font-weight: 400;\">responsive web design<\/span><\/a><span style=\"font-weight: 400;\"> use a single layout, allowing them to scale it up or down based on the needs of the device resolution and through techniques like media queries and CSS manipulation. For example, they can build it so that the image on the page will always take up 30% which would guarantee to catch all current and future optimization possibilities. While responsive web designs are a lot of work at first, designing layouts for what seems like infinite screen sizes, it\u2019s far easier to maintain in the long-run. As long as the responsive design implementation is made successful, the changes will seamlessly work across all resolutions and ensure that your efforts are counterbalanced against the need for any ongoing maintenance.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Breaking_down_the_characteristics_of_an_adaptive_web_design\"><\/span><b>Breaking down the characteristics of an adaptive web design<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Developers building an adaptive website will often create a handful of static layout designs for the pages, allowing the website to load the relevant one based on the resolution or screen size of the user. This will allow the defined layout build for varying screens to be seen clearly and concisely regardless of the device or monitor size that\u2019s being used. Although one of the drawbacks of this method is that there are always new devices being developed, thus screen sizes of favored devices will continue to change over time. So, if you choose to use an adaptive design, you will need to keep on top of new developments in the industry to avoid imperfections or inconsistencies with your mobile web design.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"So_which_method_will_you_go_for\"><\/span><b>So, which method will you go for?\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Ultimately, the ideal mobile web design method comes down to your budget and preference. If you\u2019re starting a website from scratch, responsive is the way to go. However, if you\u2019re simply trying to make your current website optimize across varied screens, an adaptive approach is best suited for your needs.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, are you ready to <\/span><a href=\"https:\/\/www.numinix.com\/development-c-397#utm_source=Blog_October2019_ResponsiveAdaptive\"><span style=\"font-weight: 400;\">hire a developer<\/span><\/a><span style=\"font-weight: 400;\"> to build you something truly unique?\u00a0<\/span><\/p>\n<p><strong>What did you find most interesting about this blog submission? Drop a comment below to share your thoughts. <\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The growing prevalence of mobile traffic has made it important for businesses to invest in the development of a mobile-optimized website. After all, more purchases than ever before as being made through the use of smartphones. So, with two primary methods of mobile optimization currently being used to service developing websites, the question remains whether&#8230;<\/p>\n","protected":false},"author":269,"featured_media":4561,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[558,6,586],"tags":[1035,1033,1034,9,589],"class_list":["post-4560","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-responsive","category-visual-design","category-web-development","tag-adaptive-web-design","tag-mobile-web-design","tag-responsive-web-design","tag-web-design","tag-web-development-2"],"modified_by":"Numinix Developer","jetpack_featured_media_url":"https:\/\/www.numinix.com\/wordpress\/wp-content\/uploads\/2019\/09\/mobile-web-design.jpg","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/posts\/4560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/users\/269"}],"replies":[{"embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/comments?post=4560"}],"version-history":[{"count":0,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/posts\/4560\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/media\/4561"}],"wp:attachment":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/media?parent=4560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/categories?post=4560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/tags?post=4560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}