What is the difference between fixed, fluid, adaptive and responsive layouts and why should I care?

Blocks of text and screenshots do not cut it when explaining the difference, so here, have some animations

Source: Johan Larsson

A week ago I was asked if we wanted a page N to be implemented as fixed, fluid or responsive. To my embarrassment, I did not have a specific idea what exactly that meant. So I went looking.

There is a ton a lot of textual explanations, half of them are development-oriented. Static images added to the posts are nice, but omit the most important point in the explanation — what exactly happens with the interface when it is viewed not only in small and large but also in the ‘in-between’ screen sizes? How does the interface behave when being resized from the screen size of the computer and the screen of the mobile device?

During my brave search for answers this post came to be. It is intended to help understanding the difference to textual-comprehension-challenged creatures like myself. I’ll try to keep it short and simple.


Fixed

It does not appear that many new websites really use this layout anymore. Describing it provides a nice starting point to explain the differences with the other types of layouts.

Fixed (aka static) layout has a fixed width in pixels. The ‘container’ of the website is programmed to not move (that’s where the name ‘static’ comes from). This width stays the same independently of which screen size or resolution the viewer has. It appears that the width of 960px is the most widely used size for fixed-layout websites

The drawback is that when viewing such layout on smaller screens you get the hideous horizontal scroll, which ruins the overview, experience an usability.

The pros of having full control over how the interface looks… does not really outweigh the cons.


Fluid

With fluid layout you specify sizes not in pixels, but in percentages. Meaning, if the screen size changes, the proportion of elements will stay the same. Neat!

The drawback is that on smaller screens the columns can get really narrow. Now imagine how a block of text in a narrow and very tall cell looks like. Or, adding some elements like images and video which should stay of a fixed size. This combination is asking for trouble.

The pros is that this is a more flexible layout than fixed. But that only seems like a good option when compared to the only option that is worse. It is still borderline impossible to design an interface with fluid layout that would look good on both large and small screens — it can get too busy on small screens and way too empty on big ones.


Adaptive

Adaptive layout means that there are several versions of the layout which are displayed based on the screen size of the viewer. Think of it as several fixed layout designs, layout A is displayed when the screen size is within size range N — NN.

The benefit is obviously that the designer has more certainty that the user will have an optimal experience. Another plus point is that the website with such layout should load pretty fast, because there is not much adjustments of the size and position of elements going on when loading it — the server sends exactly what has to be loaded.

The drawback is that every layout should be designed with care, and that takes time and effort.


Responsive

Responsive design takes the best of the two worlds of fluid and adaptive design. There are several so-called breakpoints, which divide all possible screen sizes in ranges. The interface has slightly (or completely different) layout depending on the screen size it’s viewed on. Also, depending on the screen size, elements will stretch or shrink accordingly. Responsive layout provides a custom experience for whichever screen size it’s viewed on.

Responsive layouts are pretty much an expectation nowadays — consumers are not expecting to get a ‘lesser’ experience or fewer functions just because they are accessing the service from a mobile device. In fact, since 2014 there are more web pages accessed through a mobile device than on the desktop computer (Source: Morgan Stanley Research).

The drawback is needing even more design and testing effort than for adaptive layouts.


So, what’s the conclusion? Well, it looks like these options are interesting to look at as an illustration of the evolution of web layouts rather than real choices to sweat about nowadays.

Adaptive layout can quite withstand the variety of screen sizes, however responsive layout still wins, as it helps avoid the potentially too busy or too empty screen space.