Types of layouts and their differences

Not all layouts are responsive, and not all responsiveness is fluid. There are also more types of layouts than you might imagine, and it's common to confuse the many terms used in multi-device development.

There are countless screens and devices on the market with different heights and widths, making it impossible to create a single layout that works well for all of them. It's also not possible to create a layout for every device, which is why it's important to think in terms of width ranges rather than fixed layouts.

There are 4 types of layouts on the market, which are:

• Static
• Liquid
• Adaptative
• Responsive

To make this easier to understand, I've made a Figma file available with the settings for all layouts (width), including a working prototype.

---

Static (Static / Fixed)

Static layouts have a fixed width regardless of resolution, and were very common in the past. Today, fortunately, they've mostly disappeared. The container or body is formatted so its width doesn't change (hence the name static).

The disadvantage of this type of layout is that when viewing the site at smaller resolutions, a horizontal scroll bar will appear, and you'll need to scroll to see the full content, as shown in the image below:

Example of a Static or Fixed site

---

Fluid (Fluid / Liquid)

With the fluid or liquid layout, as the name suggests, it behaves according to the movement of its parent element, which is the browser. You specify sizes not in pixels but in percentages, meaning that if the screen size changes, the proportion of the elements stays the same, but the elements adapt internally.

The disadvantage of this layout is that on smaller screens the columns can become so narrow that their content becomes hard to understand. Imagine a long piece of text in a column that's 50 pixels wide or less. The same applies to elements like images and videos, which should stay a fixed size, but in this type of layout they adapt to the width, which can break the experience. In my view, this layout is quite problematic.

This type of layout is only advantageous compared to the fixed one (the previous type). Nowadays it's almost impossible to design 100% fluid interfaces, and both the Static and Fluid approaches are rarely used today.

Example of a Liquid or Fluid site

Adaptive (Adaptative)

Imagine that you have many resolutions (breakpoints), and at each one your layout has to fit the width as the screen shrinks or grows. So each page will have X adaptations based on its breakpoints. In other words, if the configuration has 4 layout breaks, all your pages will have 4 layout adaptations. That's why it's very important to think in terms of containers rather than absolute positions, so each layout adaptation fits its breakpoint within its predetermined dimensions, as shown in the image below:

At each breakpoint, the screen instantly adjusts to the new layout format, with no responsiveness or fluidity. The idea behind the adaptive layout is a switch without movement.

On the positive side, it's easy to work with page templates, since the containers will always change according to their predetermined breakpoints. If the Design System has breakpoint rules like Bootstrap does, it's even better.

The downside (or maybe not) is that you need to understand the standards thoroughly, and it's not advisable to deviate from them for the sake of the project's consistency, since doing so will require changing code for things to work correctly. Still, it is possible to change this rule by evaluating and testing the format and aligning with the Design System team to scale this adjustment across both Design and code.

Example of an adaptive site

Responsive (Responsive)

Responsive design is the best of all approaches (in my opinion), since it combines the two best models into one: fluid and adaptive. This way, the switch between breakpoints is smoother, because the content fits into the containers (fluid) before the layout changes (adaptive), as shown in the image below:

Even though there's a predefined set of Breakpoint rules, the content is always “alive,” adapting to the containers and leaving the impression of a smart site, tailored to every pixel of the screen.

This is the most widely used approach on the market today. There can also be a mix, with Responsive up to a certain width X and Adaptive below that; these mixes can be interesting.

Example of a responsive site

---

Bonus: What can change at each Breakpoint?

Breakpoints (as Responsive Layout is called in the market) are nothing more than CSS blocks grouped according to the device's width or height, which can be a single minimum/maximum value or two values specifying a range, as shown below:

Single minimum or maximum size value:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Minimum and maximum values determining a range:

@media only screen and (min-width: 360px) and (max-width: 768px) {
	// do something in this width range.
}

How does it work in practice?

Let's say we have a base set of styles that will carry across all resolutions, but at a certain width I want to apply a change in width, color and spacing, for example. The code would look like this:

.container {
  display: flex;
  flex-wrap: wrap;
  width: 980px;
  margin: 0 auto;
  margin-top: 40px;
  text-color:black;
}

.boxes {
  width: 100px;
}


@media only screen and (min-width: 320px) and (max-width: 576px) {
  .container {
    width: 100%;
    padding-left: 23px;
    text-color: red;
  }
  .boxes {
    width: 100%;
  }
}

I can change ANY style property with Breakpoints, so we're not limited to just adjusting the width when adapting content and visual elements by width and height, as we're used to doing with market Design tools (like Figma), which don't support this (actually, that's not true, Framer and Webflow do support this, go check them out).

Conclusion

Want to learn a bit more about this? I suggest studying Bootstrap and getting hands-on with its code. Take a look at the site's documentation, which in my opinion is one of the best on the market. Link to Breakpoints

Acknowledgments

*Thanks to Nick Davison who developed the Liqui dap sive website that I use to explain the different examples of applying layout types to websites.

*References for the article and images from the UX Alpaca website.