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.
