Web Layout - Fixed or Fluid or Responsive?

In the web world, three words can mean or can take the form of an entire day’s discussion. Want to know what’s the big deal?

Static or Fixed layout

This kind of layout does not change based on browser width. That is how it got its name. It uses a preset page size. This is how web pages were traditionally built for many years until modern influences like media queries and responsive design were introduced around the start of the 2010.

Different devices will treat a static page layout in various ways, so the rendered page could be slightly unpredictable. For example, on a desktop browser, if the window is too small horizontally, then the page will be cut off and horizontal scroll bars will be displayed. On a mobile device like an iPhone, the page will be scaled automatically, allowing the user to zoom in on points of interest (provided that no metatags override this default behavior).

Nowadays no website is built in this layout, because it means that the mobile experience will require a separate website. 

Fluid or Liquid layout

Fluid is in between static and responsive. The proportion remains fixed but the layout changes according to the size of the screen. Typically a liquid layout will use percentages instead of pixels, but any relative unit of measurement will work, such as ems.

A liquid layout often will fill the width of the page, no matter what the width of the browser might be. Liquid layouts don’t require as much thought as a responsive design, but there are some major drawbacks at very large or very small browser widths. If the browser is very wide, some content might be stretched too far. On large screens, a single paragraph might run across the page on a single line. Conversely, a multi-column layout on a small screen could be too crowded for the content.

Responsive layout

This is the queen of all, yes this is what is in trend now and all layouts are developed with responsive design in mind. A responsive page layout uses both relative units and media queries, ostensibly combining the ideas of a liquid layout and an adaptive layout.

As the browser increases or decreases in width, a responsive layout will flex just like a liquid layout. However, if the browser goes beyond certain widths defined by media query breakpoints, then the layout will change more dramatically to accommodate a wide or narrow width.

Typically, responsive designs are built using a mobile-first approach. That means the mobile layout is designed first, and then as the browser becomes wider on tablets and desktops, the designer will find ways to expand the mobile layout. This tends to create better experiences overall, because it’s easier to expand a design than to try and simplify a large layout for mobile screens.

So what is the conclusion, like quoted earlier responsive layout out shines the competition. There are few more layouts that are remote and not popular like elastic layouts. Whatever be the layout, all that web designers need is a beautiful and effective design that can impress people on all screen sizes.