Difference between Fixed website vs. Fluid website vs. Adaptive website vs. Responsive website

Difference between Fixed website vs. Fluid website vs. Adaptive website vs. Responsive website

Now a day, browsing a website has become exceedingly easy as the all modern gadgets like smart phones, laptops, desktops and even a television has an internet connection.  So as a web designer, you just can’t design and code a website by targeting a specific device. Because you will never know devices that people will use to browse your website. In this article, you will find the difference between fixed website layout, Fluid website layout, Adaptive website layout and Responsive website layout, which will help you to decide about the type of layout you want to adopt for your next web designing project.

Fixed website layout

Fixed website layout

This kind of website layout has a set or a fixed width (usually in pixels) which means if you view it in different kinds of devices, the overall look of your website won’t be affected. It may cause the unwanted scrolling in left and right side of the layout as it has set widths which may bigger than the device’s screen resolution.  It is not suitable for small screen devices like Smartphone and sometimes even tablets.

Fluid website layout

Fluid website layout

Fluid website layouts are built using percentages instead of pixels for widths. This makes it more flexible while you are viewing it in different kinds of device. By making the widths in percentages, you will be able to maintain the overall look of your website across all devices. By all means a better method than fixed website layouts.

Adaptive website layouts

Adaptive website layouts

It is a process of making many layouts for a single website whether you are using percentages or pixels for widths. This means there may be 2, 3 or 4 different kind of layouts for the same website and these all are handled by CSS and JavaScript. You will see a completely different layout while you are browsing it on your phone or tablet than on a desktop or a laptop. The JavaScript detects your device type and accordingly displays the relevant CSS. For example, Facebook uses the adaptive website layout. You can also handle an adaptive website by just using CSS media queries from where you will be able to target a specific resolution’s device.

Responsive website layouts

Responsive website layouts

Responsive website layouts use fluid grids (widths in percentages) and CSS media queries to control the website layouts and its contents while you scale it up and down on your browser or browse in different devices. In responsive layouts, everything acts like fluids from images to videos.  It builds up using EMs and Percentages which gives it fluidity across all devices. Responsive layout is probably the most successful web trend till date and you can hope to find it in almost every new upcoming website.

Conclusion

No matter where you are from or what kind of project you are working on, it is always good to keep in mind that your design should be enjoyable from each and every kind of screen size. Whether you use fluid, adaptive or responsive layouts, try to keep it as flexible as possible. It will certainly take some time, but don’t lose hope and keep coding. Let us know which kind of layout you are using for your next project.  If you have any queries regarding types of layouts, you can leave it in the comment box bellow.

Comments

Nilotpal Singha

A professional graphic web designer, blogger, writer.

You may also like...