---
title: "What types of website layout exist. Advantages and disadvantages."
description: "This article describes the most common types of website layout, pros and cons of each layout."
canonical_url: "https://prostoleo-dev.com/blog/which-types-of-website-layouts-exist"
---

> Index of every page on this site: [llms.txt](https://prostoleo-dev.com/llms.txt)

## Fixed layout

The easiest way to layout a website is a fixed layout. With this type, you create a site with predetermined page sizes - it has a constant width. Fixed layouts adhere to these dimensions regardless of the type of browser or device.

Fixed layouts are slowly disappearing with the increasing use of mobile devices. Because these sites don't adapt to devices, they don't provide a positive user experience on smartphones or tablets. While fixed layouts are still used, you generally don't need to use them unless you are creating a completely separate mobile version of your site.

<video-item-gif-like src="/blog/types-of-web-layouts/fixed.webm">
<template v-slot:caption="">
<span>

Example of fixed layout

</span>
</template>
</video-item-gif-like>

**Pros of a fixed page layout:**

<plus-minus-item icon="plus">
<template v-slot:text="">

Easy to set up

</template>
</plus-minus-item>

**Cons of a fixed page layout:**

<plus-minus-item icon="minus">
<template v-slot:text="">

Not responsive to all devices or browsers

</template>
</plus-minus-item>

<plus-minus-item icon="minus">
<template v-slot:text="">

Requires a separate mobile site

</template>
</plus-minus-item>

## Fluid layout

Next on this list of website layout types is rubber layout. This layout, also known as "fluid" layout, uses flexible layout units rather than the fixed units used in fixed layouts. Because the units are flexible, the page will always fill the width of the device screen, no matter what kind of device it is.

Because user experience is one of the most important things in attracting traffic to your site, fluid layouts have also slowly begun to be used less and less as a viable option for businesses. While you can still use this layout, you run the risk of creating a poor user experience because your site stretches too much or compresses the information on the page.

<video-item-gif-like src="/blog/types-of-web-layouts/fluid.webm">
<template v-slot:caption="">
<span>

Example of fluid layout

</span>
</template>
</video-item-gif-like>

**Pros of a fluid page layout:**

<plus-minus-item icon="plus">
<template v-slot:text="">

Easier to customize than an adaptive design

</template>
</plus-minus-item>

<plus-minus-item icon="plus">
<template v-slot:text="">

No information is cut off on pages

</template>
</plus-minus-item>

**Cons of a fluid page layout:**

<plus-minus-item icon="minus">
<template v-slot:text="">

If the browser is very wide, information is stretched to the size of the
screen and can look unattractive.

</template>
</plus-minus-item>

<plus-minus-item icon="minus">
<template v-slot:text="">

If the browser is small, the information is blended to fit on the screen,
making it difficult to read and browse.

</template>
</plus-minus-item>

## Adaptive website layout

One layout format you can use for your website is the adaptive website layout. As the name implies, this site uses *CSS media quieries* to **adjust the size of the site to the size of the browser**. Adaptive sites automatically change their layout to provide a better user experience for visitors.

Adaptive site layouts have preset parameters for how the website will adjust. For example, a set parameter might look like this: "If the browser is 500 pixels wide, set the main content container to 400 pixels wide. Or, if you have a website with a two-column layout, the adaptive layout would change to a single-column design on a small browser screen.

<video-item-gif-like src="/blog/types-of-web-layouts/adaptive.webm">
<template v-slot:caption="">
<span>

Example of adaptive layout

</span>
</template>
</video-item-gif-like>

**Pros of a adaptive page layout:**

<plus-minus-item icon="plus">
<template v-slot:text="">

Easy to set up

</template>
</plus-minus-item>

<plus-minus-item icon="plus">
<template v-slot:text="">

Takes less time to develop than responsive layout

</template>
</plus-minus-item>

<plus-minus-item icon="plus">
<template v-slot:text="">

Can adjust your site to fit each browser

</template>
</plus-minus-item>

**Cons of a adaptive page layout**

<plus-minus-item icon="minus">
<template v-slot:text="">

The width of the device between setpoints can cause your site to have too much
or not enough space.

</template>
</plus-minus-item>

<plus-minus-item icon="minus">
<template v-slot:text="">

Not a fully responsive layout

</template>
</plus-minus-item>

## Responsive layout

Next on our list of website layout types is responsive layout (responsive layout). This layout format is the *most popular* because it allows your site to **adjust to all devices and fill your browser size perfectly**. Responsive design is built **with a focus on mobile devices**.

A mobile-friendly layout is created first, and then the layout is modified for a larger browser size. So instead of trying to downsize your website and make it smaller, you start small and expand it.

<video-item-gif-like src="/blog/types-of-web-layouts/responsive.webm">
<template v-slot:caption="">
<span>

Example of responsive layout

</span>
</template>
</video-item-gif-like>

**Pros of a responsive page layout:**

<plus-minus-item icon="plus">
<template v-slot:text="">

Get a website designed for mobile users

</template>
</plus-minus-item>

<plus-minus-item icon="plus">
<template v-slot:text="">

Provides a seamless experience on all devices

</template>
</plus-minus-item>

<plus-minus-item icon="plus">
<template v-slot:text="">

No need to build a separate mobile site

</template>
</plus-minus-item>

**Cons of a responsive page layout**

<plus-minus-item icon="minus">
<template v-slot:text="">

Requires more time to create

</template>
</plus-minus-item>

## Conclusion

Given the ever-increasing share of mobile traffic on the Internet, 2 layout options are the most preferred: adaptive and responsive. Which one you choose depends on the project and your preferences.

And that's all for today. Thank you all, bye everyone! 👋

---

## Sitemap

See the full [sitemap](https://prostoleo-dev.com/sitemap.md) for all pages.