Member-only story
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
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!
