{"id":35486,"date":"2016-06-13T05:00:51","date_gmt":"2016-06-13T12:00:51","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=35486"},"modified":"2024-04-11T03:36:14","modified_gmt":"2024-04-11T10:36:14","slug":"whats-the-difference-between-fluid-adaptive-and-responsive-design","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/whats-the-difference-between-fluid-adaptive-and-responsive-design","title":{"rendered":"What's the Difference Between Fluid, Adaptive, and Responsive Design?"},"content":{"rendered":"There was a time when a website was just that: a website. It contained whatever its owner wanted it to contain, without any qualms about what the public wanted. As for the people browsing the internet, they only had two choices: take it or leave it.<\/span>

\nFortunately, web design and development have evolved over the years, empowering users to demand real, relevant, comfortably-served content. No more frustrating layouts. No more headache-inducing designs. No more throw-your-mouse-out-the-window<\/em> confusion over where to go and what to do.\nToday, the users matter the most.<\/em>\nBecause of this, web designers have experimented with different approaches with a primary purpose in mind: to keep their audience happy. It’s not about the website owner’s personal preferences anymore – it’s all about what their target audience needs.\nIn order to keep your visitors happy and adjust to their screen resolution, three types of different web design solutions come to mind: fluid design, adaptive design, and responsive design. Since they can be a bit tricky to wrap your head around, let’s go over the pros and cons of each one.\n<\/p>

<\/span>Fluid Design<\/span><\/h2>When you use fluid design, you use percentages to measure widths, instead of the usual fixed measurements used in static websites. According to Smashing Magazine<\/a>, fluid design is also often referred to as liquid. This was conceptualized way before the term ‘responsive design’ made headlines, so a lot of designers believe that this actually paved the way to the other design concepts we use today.\n

<\/span>What’s good about it?<\/span><\/h3>\nA fluid design is very adaptable. Because it uses a percentage of space instead of fixed widths, it adjusts according to the screen you’re viewing the pages from. Of course, this means that fluid design is also user-friendly. Instead of the usual static design that does not budge no matter how many times you switch gadgets or computers, this at least cooperates according to where the users are coming from.<\/span>\n

<\/span>What’s not so good about it?<\/span><\/h3>\nThe biggest problem with fluid design is the fact that although the width of the page adjusts according to the user’s screen, the elements on the page may not adjust accordingly. This means that when you move to a widescreen monitor, the page and its content might look stretched. Move to a smaller screen like that of a tablet or a smartphone and everything will crowd up in the middle.<\/span>\nBasically, fluid design is great if you think your target audience will only have a limited range of screen sizes they will be viewing the page from. But knowing how fast people are switching from one gadget to another, this can pose a few problems especially when it comes to customer satisfaction.<\/span>\n

<\/span>Adaptive Design<\/span><\/h2>\nWith adaptive design, the media queries match specific device sizes. It’s like having a menu of different versions of a single website, each version catering to a different device and operating system. When the server detects what kind of device the user is viewing the page from, it sends the right version of the website for optimal viewing. If you need more clarity about the difference between fluid, adaptive, and responsive layouts, make sure to check out liquidapsive.com<\/a> — a live demo of various types of web design layouts.\n\"Liquid-Responsive-Adaptive\"<\/a>\n

<\/span>What’s good about it?<\/span><\/h3>\nWhen you use adaptive design, there’s a huge chance that the pages will load more quickly simply because very little adjustments will be done. The server only needs to pinpoint what specific elements each user needs and sends nothing more, nothing less. You can also provide tailor-fit solutions that will make each user’s experience even better, especially if your target audience is composed of different people using different devices all at the same time (which is most likely the case).<\/span>\nWith adaptive design you won’t have to keep creating revisions to your current site as the range of gadgets your audience uses expands. All you have to do is keep creating newer versions as more devices are added to the list.<\/span>\n

<\/span>What’s not so good about it?<\/span><\/h3>\nFrom the process alone, you pretty much have an idea how much work is put into creating an adaptive design. Especially if you consider how many gadgets people use today, you would also have to consider the number of different versions you would have to create.<\/span>\nOf course, because of all the work that it requires, this also means that you’ll have to use more resources, making it a more expensive solution. If you’re working with a tight budget, this may not be the right solution for you no matter how appealing it sounds.<\/span>\n

<\/span>Responsive Design<\/span><\/h2>\nIn working with responsive design, you break down all media queries into different break points<\/em>. This means that all images, text, and layouts used will be scaled accordingly as the user changes devices. This animated GIF, created by Sandijs Ruluks for Froont, illustrates the difference between adaptive and responsive design brilliantly:\n\"3038367-inline-i-1-9-gifs-that-explain-responsive-design-brilliantly-01responsive-vs-adaptive-copy\"Check out the rest of their article on the 9 principles of responsive web design here<\/a>.<\/q>\n

<\/span>What’s good about it?<\/span><\/h3>\nResponsive design uses CSS3 and HTML5 – this means that you don’t have to write separate codes for every possible operating system out there. Because there is a single code base that uses a universal language, maintenance is easier and more cost-effective.<\/span>\nBecause responsive design also considers the way each element will adjust according to the device being used, this means that you don’t have to worry about making separate versions for every device. Each element will move according to the screen size and the device being used, whether it’s an older device or a newer one that was just released.<\/span>\nThis kind of design also benefits those who are after better SEO results. Normally, websites that have separate mobile and desktop versions also use two separate folders, one for each version. This means that when Google does its usual sweep, it detects duplicate content, which will immediately pull down a site’s quality score. When it comes to responsive design however, only one domain is used for mobile, desktop or tablet. This definitely gives you additional brownie points from Google.<\/span>\nAnother great thing about responsive design is the fact that updates are applied real-time. This means that you wouldn’t have to put the website you’re working on out of commission for some time. You can fix bugs, add pages, change content, and a lot more in the background, then push these changes onto the actual website real time.<\/span>\n

<\/span>What’s not so good about it?<\/span><\/h3>\nOf course, with responsive design every single element will move seamlessly as it adapts to its environment, this also means that it requires for longer planning and development time. You’ll also need a longer period of time to test each page just to make sure that usability is not compromised.<\/span>\nCompared to adaptive design, responsive websites also take longer to load simply because they need more time for all the elements to figure out where they should go and how they will adjust.<\/span>\nAsk any designer and most of them will tell you to choose among the two: responsive or adaptive. Of course, the biggest factors here would be the budget you have and the amount of time you’re willing to give.<\/span>\n

<\/span>The bottom line <\/span><\/h2>\nFigure out what your goals are and how many resources you’re willing to put into this. From there, you can easily decide which option fits your needs the most. At the end of the day, it should always be about the people viewing the pages. You should always provide the kind of user experience that will make them keep coming back for more.\n
\n

Products Seen In This Post:<\/strong><\/p>\n

<\/figure>\n \n
<\/figure>\n \n<\/p>\n<\/span><\/b>\n","protected":false},"excerpt":{"rendered":"

There was a time when a website was just that: a website. It contained whatever its owner wanted it to contain, without any qualms about what the public wanted. As for the people browsing the internet, they only had two choices: take it or leave it. Fortunately, web design and development have evolved over the […]<\/p>\n","protected":false},"author":85,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[34],"tags":[305,323,719,1263],"topics":[],"class_list":["post-35486","post","type-post","status-publish","format-standard","hentry","category-creative-inspiration","tag-web-design","tag-responsive","tag-ux","tag-adaptive"],"acf":[],"yoast_head":"\nWhat's the Difference Between Fluid, Adaptive, and Responsive Design? - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/whats-the-difference-between-fluid-adaptive-and-responsive-design\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What's the Difference Between Fluid, Adaptive, and Responsive Design?\" \/>\n<meta property=\"og:description\" content=\"There was a time when a website was just that: a website. It contained whatever its owner wanted it to contain, without any qualms about what the public\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/whats-the-difference-between-fluid-adaptive-and-responsive-design\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-13T12:00:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-11T10:36:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/06\/11023319\/Liquid-Responsive-Adaptive.jpg.webp\" \/>\n<meta name=\"author\" content=\"Igor Ovsyannykov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Igor Ovsyannykov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/whats-the-difference-between-fluid-adaptive-and-responsive-design\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/whats-the-difference-between-fluid-adaptive-and-responsive-design\",\"name\":\"What's the Difference Between Fluid, Adaptive, and Responsive Design? - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/whats-the-difference-between-fluid-adaptive-and-responsive-design#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/whats-the-difference-between-fluid-adaptive-and-responsive-design#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2016\\\/06\\\/11023319\\\/Liquid-Responsive-Adaptive.jpg.webp\",\"datePublished\":\"2016-06-13T12:00:51+00:00\",\"dateModified\":\"2024-04-11T10:36:14+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/51c825a5f6e7d07e39cb6b4674e2a4f1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/whats-the-difference-between-fluid-adaptive-and-responsive-design#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/whats-the-difference-between-fluid-adaptive-and-responsive-design\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/whats-the-difference-between-fluid-adaptive-and-responsive-design#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2016\\\/06\\\/11023319\\\/Liquid-Responsive-Adaptive.jpg.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2016\\\/06\\\/11023319\\\/Liquid-Responsive-Adaptive.jpg.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/whats-the-difference-between-fluid-adaptive-and-responsive-design#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What's the Difference Between Fluid, Adaptive, and Responsive Design?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What's the Difference Between Fluid, Adaptive, and Responsive Design? - Creative Market Blog","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:\/\/creativemarket.com\/blog\/whats-the-difference-between-fluid-adaptive-and-responsive-design","og_locale":"en_US","og_type":"article","og_title":"What's the Difference Between Fluid, Adaptive, and Responsive Design?","og_description":"There was a time when a website was just that: a website. It contained whatever its owner wanted it to contain, without any qualms about what the public","og_url":"https:\/\/creativemarket.com\/blog\/whats-the-difference-between-fluid-adaptive-and-responsive-design","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2016-06-13T12:00:51+00:00","article_modified_time":"2024-04-11T10:36:14+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/06\/11023319\/Liquid-Responsive-Adaptive.jpg.webp","type":"","width":"","height":""}],"author":"Igor Ovsyannykov","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Igor Ovsyannykov","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/whats-the-difference-between-fluid-adaptive-and-responsive-design","url":"https:\/\/creativemarket.com\/blog\/whats-the-difference-between-fluid-adaptive-and-responsive-design","name":"What's the Difference Between Fluid, Adaptive, and Responsive Design? - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/whats-the-difference-between-fluid-adaptive-and-responsive-design#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/whats-the-difference-between-fluid-adaptive-and-responsive-design#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/06\/11023319\/Liquid-Responsive-Adaptive.jpg.webp","datePublished":"2016-06-13T12:00:51+00:00","dateModified":"2024-04-11T10:36:14+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/51c825a5f6e7d07e39cb6b4674e2a4f1"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/whats-the-difference-between-fluid-adaptive-and-responsive-design#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/whats-the-difference-between-fluid-adaptive-and-responsive-design"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/whats-the-difference-between-fluid-adaptive-and-responsive-design#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/06\/11023319\/Liquid-Responsive-Adaptive.jpg.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/06\/11023319\/Liquid-Responsive-Adaptive.jpg.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/whats-the-difference-between-fluid-adaptive-and-responsive-design#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What's the Difference Between Fluid, Adaptive, and Responsive Design?"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/35486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=35486"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/35486\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=35486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=35486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=35486"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=35486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}