Fixed vs Fluid vs Adaptive vs Responsive Websites
In April of 2015, Google made a major update dubbed "Mobilegeddon". The update was meant to boost mobile-friendly pages in Google’s mobile search results. The debate that has been around it was whether one has to build a stand alone mobile website(Adaptive) or a responsive website. Some publisher went for a full responsive while others opted for a stand alone (responsive) but loads on request depending on the device.
As a Web Designer/Developer or just some client who wants a good website, you might have come across the following terminologies on the internet ie fixed, fluid, adaptive and responsive.
Below is a break down of these terminologies, their advantages and disadvantages:
1. Fixed Website
Fixed websites are those that do not resize when you load them in different devices. The width and height will be maintained.
Advantage
It maintains the original design of the website therefore it won't confuse your visitor.
Disadvantage
It's not mobile friendly as users will be forced to magnify the website for content to be viewed.
2. Fluid Website
This may involve several columns that are relative to one another. The width of the columns may be a percentage of the total width of the website.
Advantage
It will fit on any screen size as the columns will be reduced as a percentage of the screen
Disadvantage
Content on smaller screens will be squeezed and the screen may look busy.
3. Adaptive Website
In this case, the server decides the website to load depending on the device making a request. Adaptive website can also be client side and the design loaded is determined by Javascript.
Advantage
Just like responsive, you are assured that the website will fit on screen depending on the device.
Disadvantage
Some browsers don't support javascript and my not work properly. In instances where validation is done from the server side may not load properly on devices that have not been specified in the validation code.
4. Responsive Website
Responsive website mostly use the CSS to determine the screen size. They are build on a grid and each grid may be loaded in different sizes depending on the screen side.
Advantage
Its flexible, excellent user experience and it's recommended by Google.
Disadvantage
Disrupts advertising as a banner that may appear above fold on desktop will be forced to a different location on mobile.
