Fixed, Fluid, Responsive or Adaptive Layout: Which one do you need?


First, let’s go over what these layouts are and how they affect how a site is displayed.

  • Fixed Layout – Regardless of how large your desktop monitor is, if you shrink the window of your browser the site will remain the same. If you were to view it on a mobile device such as a tablet or phone, you would simply see a shrunken version of the site to fit the device’s size. The majority of websites were built this way, but is usually difficult to use one mobile devices since the browser squishes each page to fit the size of the device.

  • Fluid Layout – This is a percentage-based layout, where the size of every element is based on a percentage of it’s container’s size. If you were to view this on a particularly large or small device, each element would adjust it’s size to fit that device’s size (so everything viewed on a large window would be large, and if you were to view it on something small everything would be small).

  • Responsive Layout – Very similar to fluid layouts, responsive layout use general widths to determine how to display the content and design of a site. In example, if the window used to view the site with is smaller than 600px, the site would be displayed differently than a window with the width of 1024px or greater.

  • Adaptive Layout – These layouts determine how the site will be displayed based off of the user’s device and resolution. Both design and content can change based on how the user is viewing the site. In example, if the user is viewing the site on a mobile phone, the content and design would change compared to them viewing the site on a desktop computer.

What Are Your Users Using?

The primary thing to consider when asking for ‘which one should I use’, is how your users are most likely to view your site. Will most of your users be sitting at a large desktop, or will they be checking out your website on their phone? Are they more likely to be using older computers, or newer devices? Google Analytics is a great free tool that can offer you a lot of insight as to how people are interacting with your website.

How Much Control Do You Want?

Because tablets have become extremely popular amongst busy casual users, it’s a good idea to make sure that your site fits nicely on both landscape and portrait views. If a large portion of users are on smaller mobile devices, it’s a good idea to stick with either a responsive or adaptive layout to ensure that their getting the best experience out of your website. The benefit to these is that you have the ability to control how certain elements of the sites display – you may want to remove ads from your site if being viewed on a phone, or you may want to include more elements onto the site when viewed on a desktop. Since there is so much variety in how a user can check out a website, and therefor many different dimensions in which to do so, adaptive layouts offer the greatest amount of control over how your site is viewed. That’s not to say that responsive layouts don’t offer control over how the site is displayed, but this is controlled be general estimates of how large or small the window size is, and won’t adjust strictly based off of the users device.

Maintanance

Something to take into consideration with all of the different types of layouts is the testing and maintenance process for each. With a fixed layout you will only have one ‘version’ of how the website will be displayed, but the others are a bit of a different story. Let’s say that your new responsive or adaptive website just launched, and things are working great. Later on, you may notice that as devices change (such as the introduction of the iPad) that you now have to adjust your site in order for everything to continue functioning properly. You may also notice that a fluid layout works great for most of your site’s visitors, but that everything is too small on a smart phone. This is all part of the ongoing process to ensure that your users are getting the best possible experience from your website, and requires a bit of maintenance to ensure that things are always running smoothly.

If you’re still on the fence on which layout you should ask your developers to create, don’t hesitate to ask! Each of these layout options have their pro’s and con’s, and every business has different needs. I would love to help you find your perfect fit and give your users the best browsing experience possible!