Quick Guide to Different Types of Website Layouts

When we Google anything or enter the URL to a website, the website we view as a design with the correct arrangement of tabs and information is the website layout, in simpler terms. These layouts have categories, menus, multimedia elements, and a lot of backend programming to put it all in a proper place.

When websites are viewed at different browser widths, we get to see the variation regarding the arrangement of website components. How this arrangement changes or not across browsers constitutes the types of website layouts. Hence we have mobile websites, responsive websites, dynamic websites and static websites.

Types of website layouts

Today we look at a few key types of layout and look at the pros and cons for each. The aim is to help you make a better decision on which layout to finally select for your website.

1. Static/fixed web layout

This one is the oldest form of website layout. Much before the idea of a responsive layout was even conceived, let alone executed, static websites were highly prevalent (simply because it was the only choice available in those days). A fixed web layout is the one wherein the components do not change or shrink due to altered browser width or screen size.

It is more like the preset page width which is designed and then remains universal under any number of viewing pixels. Hence, termed fixed. The user may have to scroll through the entire length to access the bottom components.

Pros

• Easier to develop and a universal layout works for all.

• Lesser hassle having to design for different widths.

• No need of having to work on maximum and minimum widths as the page is designed to the same width for all browser sizes.

• Provides like-mindedness regarding users get to see the exact layout as on a desktop computer and hence find it easier to associate.

Cons

• Less user-friendly. A user may have to scroll through the entire width to get to another corner of the page.

• A lot of white gaps/spaces may induce that it appear small on large screens but seem too large on small screens.

• Sometimes, a horizontal scroll bar may be required to provide usability.

• Takes time downloading on smaller devices.

2. Fluid/liquid web layout

Fluid, as we imagine, can adapt to any shape, browser width, or screen size in this scenario. A fluid website layout exactly fills the width of the browser it is provided with. The user may have to zoom in or zoom out to access easily, but that can be done without much effort than the static layout.

Pros

• More user-friendly

• The white spaces are uniform across all browser widths and hence, doesn’t look odd.

• The need for a horizontal bar can be eliminated if proper care is taken in the design process.

Cons

• Takes more time in development.

• Different screen widths have to be taken into account, and this increases hassle.

3. Adaptive web layout

Much like the fluid page layout where the website fits itself into the browser width, the adaptive website layout too fits itself but has some pre-defined sized layouts and this layout only uses these sizes to expand (in case of greater widths) or contract (in smaller widths). An adaptive web layout uses CSS media queries to detect the browser width that is available for a particular website and accordingly adjusts as per space.

Pros

• Requires less development time than responsive layout.

• Provides a stop gap solution in case of varying browser widths.
  
  

Cons

• The device widths may not always be ideal, and this causes ‘either too much space between characters or no space at all’ sorts of situations.

4. Responsive web layout

A page layout that provides the user with an ideal experience of web access is the responsive layout. It uses both media queries and relative units to develop on the lines of a liquid layout. Just like a fluid layout, these layouts stretch or contract depending on the browser widths available. However, if the browser width happens to be defined by media breakpoints, then the size of the page changes more considerably reaching out to widths and corners to cover the full length and width of the window.

A web developement is designed keeping the mobile as the primary basis for design. The web page is first designed for the mobile screen width and then for larger browser widths. This eases out the web page development as expanding a compact design is easier than trying to tailor-fit an elaborate design into a compact one.

Pros

• More user-friendly

• Zoom in and zoom out doesn’t blur out the characters

• In this age of smartphones of different screen sizes and different mobile ecosystems, a responsive layout is the best form to provide a seamless web browsing experience across multiple devices and multiple screen sizes.
  
  

Cons

• Takes more time in development.

Hope this guide helps you get started with your web development activity in the right direction, by helping you choose the right type of layout for your website.