{"id":28617,"date":"2014-10-21T11:00:00","date_gmt":"2014-10-21T11:00:00","guid":{"rendered":"https:\/\/futurelab.digitalmachine.co.nz\/blog\/whats-the-difference-between-adaptive-and-responsive-websites\/"},"modified":"2021-11-09T10:22:23","modified_gmt":"2021-11-08T21:22:23","slug":"whats-the-difference-between-adaptive-and-responsive-websites","status":"publish","type":"post","link":"https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/whats-the-difference-between-adaptive-and-responsive-websites\/","title":{"rendered":"What\u2019s the difference between adaptive and responsive websites?"},"content":{"rendered":"<p>A lot of the business we\u2019re doing at FutureLab is with new clients wanting to upgrade their outdated websites. The really classic \u2018old\u2019 websites are those 1-page sites with a textbox half the width of the page and tiny script inside. You know the ones we mean.<\/p>\n<p>But outdated websites, these days, are also ones that you can\u2019t easily use on a tablet or mobile device. These websites may look alright, but try and use them on your smartphone and you\u2019ll quickly be frustrated \u2013 you can\u2019t see the whole page! You need to scroll metres to the right to read the ends of the sentences! And where on earth is the menu??!<\/p>\n<p>Thankfully, this horrific experience is pretty much non-existent on any medium or large company website worth its salt. However, smaller companies still have some catching up to do. In fact, many small companies probably don\u2019t even realise that their website looks this ugly on a mobile or tablet. Using their desktops at work, they have no need to browse the site on a smartphone, and therefore are just not seeing what is glaringly obvious to any user trying to use their website on the move.<\/p>\n<p>At home experiment for small business owners \u2013 borrow the smartphone of a niece or nephew, \u2018cool\u2019 friend or, these days, a primary school child (even the <a href=\"https:\/\/blog.laptopmag.com\/kids-smartphones-right-age\">5-year-olds<\/a> have one!) \u2013 borrow that phone and have a look at your website. Does the website layout fit onto the screen? Can you reach everything you need without having to navigate left and right? If not \u2013 you might need to have another look at your marketing budget and prioritise an upgrade, pronto.<\/p>\n<h2>Help! My website looks ugly on mobile \u2013 what are my options?<\/h2>\n<p>So you\u2019ve seen the worst side of your website \u2013 what now? Well, perhaps upgrading your website just isn\u2019t a priority for you right now. After all, almost <a href=\"https:\/\/www.stuff.co.nz\/business\/small-business\/9999525\/SMEs-without-a-website-miss-out\">60% of small and medium businesses<\/a> don\u2019t even HAVE a website yet \u2013 so you\u2019re ahead of the game, right! Right?<\/p>\n<p>Well, for a start, we reckon that the worryingly high percentage of small businesses that DON\u2019T have a website are actually falling way, way behind the game in most cases. You may be running a very successful business with no online presence whatsoever, but if you\u2019re planning on expanding \u2013 or keeping up \u2013 your business operations in the next 5 years, and you\u2019re not the unique service provider in your local area with a very loyal customer base \u2013 you\u2019re risking a lot on that website gamble. If you need more convincing, we\u2019ve written about the <a href=\"https:\/\/www.futurelab.co.nz\/good-quality-websites-important-for-roi\/\">benefits of a business website<\/a> before.<\/p>\n<p>But we digress. The reality is, even if you do have a website, more and more Kiwis \u2013 <a href=\"https:\/\/ecommerce.org.nz\/\">1.9 million<\/a>, if you like a good statistic \u2013are choosing to browse products and services online. And as you just checked on that toddler\u2019s smartphone, your website doesn\u2019t cut the mustard in the mobile world, so zip! There goes your potential customer, disgruntled and looking for a website that makes browsing online easy.<\/p>\n<p>There are three options at this point:<\/p>\n<ul>\n<li>Turn your website mobile-responsive (possible if it\u2019s relatively new)<\/li>\n<li>Keep your existing website and get an adaptive (mobile) website<\/li>\n<li>Get a new, responsive website<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_separator type=&#8221;normal&#8221; position=&#8221;center&#8221; down=&#8221;20&#8243;][vc_column_text]<\/p>\n<h2>Adaptive vs Responsive Websites \u2013 which is which?<\/h2>\n<h4>What is a responsive website?<\/h4>\n<p>A responsive website <strong>responds<\/strong>to the width of a screen. So, the same website will shrink to fit a tablet, and shrink again to fit a mobile device. You can easily test responsiveness on a website by reducing the size of your browser window on your desktop. Dragging the window smaller or larger makes the website elements compact or spread out, but always within the width of the window.<\/p>\n<p>A responsive website can be used across all devices and screen-widths, providing an easy and comfortable experience for all users.<\/p>\n<h4>What is an adaptive website?<\/h4>\n<p>An adaptive website <strong>adapts<\/strong>to the device being used. What this usually means is that on a tablet or a mobile, there\u2019s an option to use the mobile version of the website. You may notice that this places an m. in front of a website URL \u2013 for example, <a href=\"https:\/\/www.facebook.com\">facebook.com<\/a> becomes m.facebook.com. The key point about an adaptive website is that it gives two versions of the same website \u2013 one designed for desktop, the other for smartphone and tablet devices. You may notice when browsing websites \u2013 borrow that toddler\u2019s smartphone again \u2013 that there\u2019s an option to switch to the mobile or PC version of the site.<\/p>\n<h4>So what\u2019s better \u2013 an adaptive or a responsive website?<\/h4>\n<p>Well, as always, that depends what you need. We reckon you definitely need to have one of these \u2013 ie, you need to be optimising the website experience for smartphone and tablet users, for sure. For most of our clients, we recommend going down the responsive website route, and all of the <a href=\"https:\/\/www.futurelab.co.nz\/our-work\/\">websites we create<\/a> are now responsive. You can test them out by resizing your browser window and seeing how the website elements reposition themselves as the website view gets more and more restricted.[\/vc_column_text][vc_separator type=&#8221;normal&#8221; position=&#8221;center&#8221;][vc_column_text]<\/p>\n<h4>When your business may benefit from an adaptive website<\/h4>\n<ul>\n<li><strong>Encourage use of a web Application.<\/strong><br \/>\nAll the Apps you use on smartphones and tablets \u2013 Facebook, banking, Gmail, the Herald \u2013 are all mobile, or adaptive, versions of those websites. Unless you\u2019re planning to engage users through an App (so, unless you\u2019re a fairly big, well-known company), this feature would not really signify.<\/li>\n<li><strong>If your website has too much functionality.<\/strong><br \/>\nIf you\u2019ve got a complex website with a large menu, many things to see and do, it might all just be too much viewed on a smartphone. In these cases, it can be preferable to have a mobile version of your website and strip back the functionality for ease of use. That way, you can encourage consumers to use your mobile site for the most important functions, but give the full functionality to consumers browsing from the desktop.<\/li>\n<li><strong>When you want users to see the beauty of your full website.<\/strong><br \/>\nLet\u2019s face it, responsive or adaptive website viewed on mobile just aren\u2019t as pretty or as awe-inspiring as their full-width versions. There\u2019s not a whole lot you can do in terms of complex, awesome design on a tiny screen. So, if you want to provide functionality for consumers browsing your website on their smartphones, but you want them to be able to view the full website if they choose to \u2013then you can go for an adaptive website. That way, consumers will have the option to view the full version of your site and you\u2019ll get to show off your fancy design.<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_separator type=&#8221;normal&#8221; position=&#8221;center&#8221; down=&#8221;20&#8243;][vc_column_text]<\/p>\n<h4>When you should get a responsive website (ie, in all other cases)<\/h4>\n<ul>\n<li><strong>When you don\u2019t want two versions of your site to manage (regular and m.).<\/strong><br \/>\nThere are plugins available that can create your adaptive mobile website from your regular desktop one. However, this may require some customisation, depending on the type of plugin you get.<\/li>\n<li><strong>When your content is going to be essentially the same on both desktop and mobile.<\/strong><br \/>\nIf you don\u2019t need an App, and your content doesn\u2019t need to be stripped back for the mobile site, you should be able to arrange the content so that it works well as a responsive website.<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_separator type=&#8221;normal&#8221; position=&#8221;center&#8221; down=&#8221;20&#8243;][vc_column_text]<\/p>\n<h2>Do I need to hire a professional to make my website responsive?<\/h2>\n<p>Unless you are a whizz on the computer \u2013 and we\u2019re not saying you aren\u2019t \u2013 then yes, hiring a professional will be the best way to make sure your website is properly responsive.<\/p>\n<p>When designing your website, a professional front-end web designer will ensure that the elements rearrange in the right way when you shrink the site or view it on a tablet or smartphone. For example, you might want to make sure that your menu ends up on the left-hand side of the screen, and a designer can code for that.<\/p>\n<p>As we said earlier, unless your website was created recently, in order to make it responsive you will most likely need to recreate it, rather than try to patch it up. So if you\u2019ve decided that now is the time to create that new website, make sure you\u2019re asking for it to be responsive as well \u2013 and shop around, get a few quotes![\/vc_column_text][vc_separator type=&#8221;normal&#8221; position=&#8221;center&#8221; down=&#8221;20&#8243;][vc_column_text]<\/p>\n<h2>A note on ecommerce sites \u2013 why you should be responsive by now<\/h2>\n<p>A couple of months ago, a Nielsen survey showed that in New Zealand, 41% of smartphone owners and 58% of tablet owners actually made a purchase via the respective devices. The number of people shopping on their smartphones increased by 127% compared to the year before, putting the total up to around 650,000 kiwis. Moreover, as we are all surely aware of by now, this isn\u2019t just a passing fad. Year on year, the numbers are rising, and while you may have a staunch client base shopping on their home computers, you\u2019ll be missing out on new business from the growing population of those bypassing the desktop in favour of conveniently shopping while meeting friends, waiting for a bus, or taking long car journeys with their relatives (or any other situation where the wonders of the internet just prove too tempting).<\/p>\n<p>Hopefully we\u2019ve helped clear up some confusing terminology. Web design should be simple and easy to understand. It should fit to you and what you need for your company \u2013 not the other way around. But make sure you\u2019re thinking ahead too. Creating or redesigning a website can be a big change for a company. So do it right the first time and help future-proof your business with a responsive website.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A lot of the business we\u2019re doing at FutureLab is with new clients wanting to upgrade their outdated websites. The really classic \u2018old\u2019 websites are those 1-page sites with a textbox half the width of the page and tiny script inside. You know the ones we mean.<\/p>\n","protected":false},"author":1,"featured_media":28618,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":""},"categories":[242,228],"tags":[336,324],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Difference Between Adaptive And Responsive Websites | FutureLab<\/title>\n<meta name=\"description\" content=\"FutureLab explain the difference between adaptive and responsive websites and which one is best for your type of business.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Difference Between Adaptive And Responsive Websites | FutureLab\" \/>\n<meta property=\"og:description\" content=\"FutureLab explain the difference between adaptive and responsive websites and which one is best for your type of business.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/whats-the-difference-between-adaptive-and-responsive-websites\/\" \/>\n<meta property=\"og:site_name\" content=\"futurelab\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-21T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-08T21:22:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/futurelab.digitalmachine.co.nz\/wp-content\/uploads\/2021\/02\/responsive-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"614\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"futurelab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"futurelab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/whats-the-difference-between-adaptive-and-responsive-websites\/\",\"url\":\"https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/whats-the-difference-between-adaptive-and-responsive-websites\/\",\"name\":\"Difference Between Adaptive And Responsive Websites | FutureLab\",\"isPartOf\":{\"@id\":\"https:\/\/futurelab.digitalmachine.co.nz\/au\/#website\"},\"datePublished\":\"2014-10-21T11:00:00+00:00\",\"dateModified\":\"2021-11-08T21:22:23+00:00\",\"author\":{\"@id\":\"https:\/\/futurelab.digitalmachine.co.nz\/au\/#\/schema\/person\/ff10b1cf7176aa8cd97fb1681fddc3ae\"},\"description\":\"FutureLab explain the difference between adaptive and responsive websites and which one is best for your type of business.\",\"breadcrumb\":{\"@id\":\"https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/whats-the-difference-between-adaptive-and-responsive-websites\/#breadcrumb\"},\"inLanguage\":\"en-AU\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/whats-the-difference-between-adaptive-and-responsive-websites\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/whats-the-difference-between-adaptive-and-responsive-websites\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/futurelab.digitalmachine.co.nz\/au\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What\u2019s the difference between adaptive and responsive websites?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/futurelab.digitalmachine.co.nz\/au\/#website\",\"url\":\"https:\/\/futurelab.digitalmachine.co.nz\/au\/\",\"name\":\"futurelab\",\"description\":\"Digital Technology for businnesses\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/futurelab.digitalmachine.co.nz\/au\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-AU\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/futurelab.digitalmachine.co.nz\/au\/#\/schema\/person\/ff10b1cf7176aa8cd97fb1681fddc3ae\",\"name\":\"futurelab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-AU\",\"@id\":\"https:\/\/futurelab.digitalmachine.co.nz\/au\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2b905414f26ba3faaacf7d9d1a2ccc9f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2b905414f26ba3faaacf7d9d1a2ccc9f?s=96&d=mm&r=g\",\"caption\":\"futurelab\"},\"description\":\"Biographical Info from user settings\",\"sameAs\":[\"https:\/\/futurelab.digitalmachine.co.nz\"],\"url\":\"https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/author\/futurelab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Difference Between Adaptive And Responsive Websites | FutureLab","description":"FutureLab explain the difference between adaptive and responsive websites and which one is best for your type of business.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Difference Between Adaptive And Responsive Websites | FutureLab","og_description":"FutureLab explain the difference between adaptive and responsive websites and which one is best for your type of business.","og_url":"https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/whats-the-difference-between-adaptive-and-responsive-websites\/","og_site_name":"futurelab","article_published_time":"2014-10-21T11:00:00+00:00","article_modified_time":"2021-11-08T21:22:23+00:00","og_image":[{"width":1200,"height":614,"url":"https:\/\/futurelab.digitalmachine.co.nz\/wp-content\/uploads\/2021\/02\/responsive-design.jpg","type":"image\/jpeg"}],"author":"futurelab","twitter_card":"summary_large_image","twitter_misc":{"Written by":"futurelab","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/whats-the-difference-between-adaptive-and-responsive-websites\/","url":"https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/whats-the-difference-between-adaptive-and-responsive-websites\/","name":"Difference Between Adaptive And Responsive Websites | FutureLab","isPartOf":{"@id":"https:\/\/futurelab.digitalmachine.co.nz\/au\/#website"},"datePublished":"2014-10-21T11:00:00+00:00","dateModified":"2021-11-08T21:22:23+00:00","author":{"@id":"https:\/\/futurelab.digitalmachine.co.nz\/au\/#\/schema\/person\/ff10b1cf7176aa8cd97fb1681fddc3ae"},"description":"FutureLab explain the difference between adaptive and responsive websites and which one is best for your type of business.","breadcrumb":{"@id":"https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/whats-the-difference-between-adaptive-and-responsive-websites\/#breadcrumb"},"inLanguage":"en-AU","potentialAction":[{"@type":"ReadAction","target":["https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/whats-the-difference-between-adaptive-and-responsive-websites\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/whats-the-difference-between-adaptive-and-responsive-websites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/futurelab.digitalmachine.co.nz\/au\/"},{"@type":"ListItem","position":2,"name":"What\u2019s the difference between adaptive and responsive websites?"}]},{"@type":"WebSite","@id":"https:\/\/futurelab.digitalmachine.co.nz\/au\/#website","url":"https:\/\/futurelab.digitalmachine.co.nz\/au\/","name":"futurelab","description":"Digital Technology for businnesses","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/futurelab.digitalmachine.co.nz\/au\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-AU"},{"@type":"Person","@id":"https:\/\/futurelab.digitalmachine.co.nz\/au\/#\/schema\/person\/ff10b1cf7176aa8cd97fb1681fddc3ae","name":"futurelab","image":{"@type":"ImageObject","inLanguage":"en-AU","@id":"https:\/\/futurelab.digitalmachine.co.nz\/au\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2b905414f26ba3faaacf7d9d1a2ccc9f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2b905414f26ba3faaacf7d9d1a2ccc9f?s=96&d=mm&r=g","caption":"futurelab"},"description":"Biographical Info from user settings","sameAs":["https:\/\/futurelab.digitalmachine.co.nz"],"url":"https:\/\/futurelab.digitalmachine.co.nz\/au\/blog\/author\/futurelab\/"}]}},"_links":{"self":[{"href":"https:\/\/futurelab.digitalmachine.co.nz\/au\/wp-json\/wp\/v2\/posts\/28617"}],"collection":[{"href":"https:\/\/futurelab.digitalmachine.co.nz\/au\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/futurelab.digitalmachine.co.nz\/au\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/futurelab.digitalmachine.co.nz\/au\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/futurelab.digitalmachine.co.nz\/au\/wp-json\/wp\/v2\/comments?post=28617"}],"version-history":[{"count":1,"href":"https:\/\/futurelab.digitalmachine.co.nz\/au\/wp-json\/wp\/v2\/posts\/28617\/revisions"}],"predecessor-version":[{"id":28622,"href":"https:\/\/futurelab.digitalmachine.co.nz\/au\/wp-json\/wp\/v2\/posts\/28617\/revisions\/28622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/futurelab.digitalmachine.co.nz\/au\/wp-json\/wp\/v2\/media\/28618"}],"wp:attachment":[{"href":"https:\/\/futurelab.digitalmachine.co.nz\/au\/wp-json\/wp\/v2\/media?parent=28617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/futurelab.digitalmachine.co.nz\/au\/wp-json\/wp\/v2\/categories?post=28617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/futurelab.digitalmachine.co.nz\/au\/wp-json\/wp\/v2\/tags?post=28617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}