What's the Difference Between Fluid, Adaptive, and Responsive Design?

By on Jun 13, 2016 in Inspiration
What's the Difference Between Fluid, Adaptive, and Responsive Design?

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 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 confusion over where to go and what to do.

Today, the users matter the most.

Because 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.

In 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.

Fluid Design

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, 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.

What’s good about it?

A 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.

What’s not so good about it?

The 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.

Basically, 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.

Adaptive Design

With 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 live demo of various types of web design layouts.

Liquid-Responsive-AdaptiveSave

What’s good about it?

When 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).

With 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.

What’s not so good about it?

From 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.

Of 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.

Responsive Design

In working with responsive design, you break down all media queries into different break points. 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:

3038367-inline-i-1-9-gifs-that-explain-responsive-design-brilliantly-01responsive-vs-adaptive-copySaveCheck out the rest of their article on the 9 principles of responsive web design here.

What’s good about it?

Responsive 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.

Because 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.

This 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.

Another 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.

What’s not so good about it?

Of 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.

Compared 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.

Ask 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.

The bottom line

Figure 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.


Products Seen In This Post:

No Comments

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →