The Different Types of Layouts

In this article we will discuss the four different types of website layouts. However, in my opinion, the only layout a dev should be using is responsive, so if this is what you are looking for, scroll down to number 4.

1. Fixed

The most user unfriendly layout there is. The fixed layout width does not change to screen resolution. The advantages of this layout are not worth mentioning, and its disadvantages include and are not limited to, a lot of white space for larger screens, a horizontal scroll bar of doom, and frustrated users you will lose if you incorporate this layout. If you are still using hard coded pixel sizes on your width without @media, you are flirting with this type of layout and its doom.

2. Fluid

A lot better than fixed layouts, but not as good as adaptive or responsive. We replace our hard coded px with % to get rid of the horizontal bar, and the site starts to look a lot better on different size screens until, we get to a point where our content overruns the screen, and when this happens, it puts us and the user in a very bad place because there is no horizontal scroll bar here.

3. Adaptive

With adaptive layouts we introduce something called media breakpoints. Even though widths are still hard coded into px, they are done so with media queries, @media. For example:

.container {
  width: 800px;
  margin: 0 auto;
  border: 1px solid black;
  padding: 35px;
}

@media(max-width: 500px) {
  .container {
    width: 500px;
    background: #ddd8df;
  }

For a screen size with a max-width of 500px, we’re going to give our .container a max width of 500px, this way there is no horizontal bar on a screen of this size. We can set a different set of styles for screens 500px and under. However, between 800px and 500px, we will get the horizontal scroll bar because this layout is still not fully response to all size screens.

4. Fully Responsive

This is your friend. Fully responsive layouts will give a professional experience on all screen sizes. It takes the good and leaves the bad features of the other layout types above. A responsive layout runs faster than an adaptive layout. We will discuss more about the code for this layout in a future article. For now, know that this is the best one, and the one you should be using for all of your sites.