While making websites responsive we heard many terms like fixed, fluid, responsive and adaptive. All these terms have different meaning and cannot be interchangeable. Depends on the usability we can decide which layout design suits best for website requirement.
As a web developer or web designer it is a considerable point that how your website will look like on different devices. So we have to keep the layout matching with the devices on which websites will display.
Fixed:
Fixed layouts are made of set width and height and elements inside the fixed width/height container also have a set height and width weather in pixels or percentages. Fixed or static layout designs remain same on different devices because it is set to not move on any resolution. But the web pages requires horizontal and vertical scroll to fit in the browser window or any other devices.
Fluid:
Fluid aka Liquid designs are created using percentage widths so that it can adjust according to the user’s device resolution. As the container’s width and height are in percentages hence child elements also adjust themselves proportionally because columns are relative to each other. On any device the look of fluid design will be same as elements width and height are set in parentage or em’s i.e. it will take “n%” of page width whichever is mention.
Responsive:
Responsive designs are created using media queries that are considered as breakpoints of general screen resolutions from extra small (mobile) to large (large desktop). This scale up images, wrap texts and adjust layout accordingly. Responsive design is mostly considered as mobile friendly approach to design layouts. Responsive design ensures that user will get best user experience of website while browsing on Desktops, Tablets, and Phone etc.
As said
"A fluid site is responsive, but not all responsive sites are fluid." --Sam.
In fluid layout suppose if element is set 50% of the page width then it will expand according to the screen size. This will look better on mobile devices but on desktop it will look unpleasant. So here comes the part of Responsive design where we can set target widths using media queries [@media screen only and (min-width:600px)] and reset width to be a smaller percentage, making it responsive.
Adaptive:
Adaptive layouts are same as responsive layout only difference between them is adaptive layouts changes according to the device only once when it is loading on browser. Adaptive layouts are not smooth as compared to Responsive layout. Adaptive layout always looks for points from where to adapt the change, this is neither fixed nor fluid.
To know more about the difference between Responsive Vs Adaptive.
while i was researching content i found an nicely written article which can help readers a lot to make their decision easy.
As a web developer or web designer it is a considerable point that how your website will look like on different devices. So we have to keep the layout matching with the devices on which websites will display.
Fixed:
Fixed layouts are made of set width and height and elements inside the fixed width/height container also have a set height and width weather in pixels or percentages. Fixed or static layout designs remain same on different devices because it is set to not move on any resolution. But the web pages requires horizontal and vertical scroll to fit in the browser window or any other devices.
Fluid:
Fluid aka Liquid designs are created using percentage widths so that it can adjust according to the user’s device resolution. As the container’s width and height are in percentages hence child elements also adjust themselves proportionally because columns are relative to each other. On any device the look of fluid design will be same as elements width and height are set in parentage or em’s i.e. it will take “n%” of page width whichever is mention.
Responsive:
Responsive designs are created using media queries that are considered as breakpoints of general screen resolutions from extra small (mobile) to large (large desktop). This scale up images, wrap texts and adjust layout accordingly. Responsive design is mostly considered as mobile friendly approach to design layouts. Responsive design ensures that user will get best user experience of website while browsing on Desktops, Tablets, and Phone etc.
As said
"A fluid site is responsive, but not all responsive sites are fluid." --Sam.
In fluid layout suppose if element is set 50% of the page width then it will expand according to the screen size. This will look better on mobile devices but on desktop it will look unpleasant. So here comes the part of Responsive design where we can set target widths using media queries [@media screen only and (min-width:600px)] and reset width to be a smaller percentage, making it responsive.
Adaptive:
Adaptive layouts are same as responsive layout only difference between them is adaptive layouts changes according to the device only once when it is loading on browser. Adaptive layouts are not smooth as compared to Responsive layout. Adaptive layout always looks for points from where to adapt the change, this is neither fixed nor fluid.
To know more about the difference between Responsive Vs Adaptive.
while i was researching content i found an nicely written article which can help readers a lot to make their decision easy.
