Now a days, web designers will often use terms like fixed, static, liquid, adaptive, responsive, and a few others. If you’re a web designer, a web developer, or even a project stakeholder or client, it’s important to understand what these terms mean and when each type of layout should be utilized.

Depending on the window the horizontal width of the browser could change because the website is being viewed on different devices (mobile phones, tablets, desktops, and so on), the website visitor could simply resize the browser window on a desktop device, or the visitor might change their phone from portrait to landscape mode, and so on. These concepts can be difficult to grasp at first, but only because they’re so closely related to one another. Understanding the differences between each one is the key to understanding them individually.

Static Page Layout

A static page layout (sometimes called a “fixed” layout or “fixed width” layout) uses a preset page size and does not change based on the browser width. In other words, the page layout might have a permanent width of 960 pixels no matter what. 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 2010s.

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).

When new websites are built, most of them don’t opt for a static layout, because it means that the mobile experience will require a separate website. There are major exceptions, such as the online Apple.com store, but Apple is a unique case because a selling point of their mobile devices is that they can view static layouts. In other words, Apple doesn’t seem to be adopting responsive design just yet.

Please check the preview to understand the difference. Also don't forget to resize the browser.

HTML

  
Static Layout Example
  
HEADER
  
  
SECTION

CSS

/**************************************
Author : Faisal Russel
STATIC LAYOUT CSS
**************************************/

.wrapper {
  width: 960px;
  margin: 0 auto;
}

header {
 width: 960px;
}

nav, section {
  float: left;
}

nav {
  width: 200px;
  margin-right: 10px;
}

section {
  width: 750px;
}



/**************************************
CSS TO MAKE THE EXAMPLE LOOK PRETTY
**************************************/

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #000;
  color: #FFF;
  font-family: Helvetica;
  text-align: center;
  margin: 0;
}

header,
nav,
section {
  border: 1px solid rgba(255,255,255,0.8);
  margin-bottom: 10px;
  border-radius: 3px;
}

header {
  padding: 20px 0;
}

nav, section {
  padding: 200px 0;
}

Static Page Layout - Demo

Liquid Page Layout

A liquid page layout (sometimes called “fluid” or “fluid width”) uses relative units instead of fixed units. 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.

HTML

  
Liquid Layout Example
  
HEADER
  
  
SECTION

CSS

/**************************************
Author : Faisal Russel
LIQUID LAYOUT CSS
**************************************/

.wrapper {
  width: 100%;
}

nav, section {
  float: left;
}

nav {
  width: 20.83333%;
  margin-right: 1.041667%;
}

section {
  width: 78.125%;
}



/**************************************
CSS TO MAKE THE EXAMPLE LOOK PRETTY
**************************************/

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #000;
  color: #FFF;
  font-family: Helvetica;
  text-align: center;
  margin: 0;
}

header,
nav,
section {
  border: 1px solid rgba(255,255,255,0.8);
  margin-bottom: 10px;
  border-radius: 3px;
}

header {
  padding: 20px 0;
}

nav, section {
  padding: 200px 0;
}

Please check the preview to understand the difference. Also don't forget to resize the browser.

Liquid Page Layout - Demo

Adaptive Page Layout

An adaptive page layout uses CSS media queries to detect the width of the browser and alter the layout accordingly. Adaptive layouts will use fixed unit like pixels, just like a static layout, but the difference is that there are essentially multiple fixed widths defined by specific media queries.

A media query is an expression of logic, and when used in combination with other media queries, they form a basic algorithm. So for example, an adaptive page layout might say something like, “If the browser 500 pixels wide, set the main content container to be 400 pixels wide. If the browser is 1000 pixels wide, then set the main content container to be 960 pixels wide.” Beyond the main content container, other parts of the page might change in width, swap places, or be removed. For example, a two column layout might become a single column layout if the browser is too narrow.

Adaptive layouts are a good stop-gap solution if a legacy static layout needs to be converted to support mobile devices. They also typically require less development time than a responsive layout. The major drawback is that device widths in-between the explicit breakpoints are often less than ideal, with either too much space or not enough space.

Please check the preview to understand the difference. Also don't forget to resize the browser.

HTML

  
Adaptive Layout Example
  
HEADER
  
  
SECTION

CSS

/**************************************
Author : Faisal Russel
ADAPTIVE LAYOUT CSS
**************************************/

.wrapper {
  width: 400px;
  margin: 0 auto;
}

header {
 width: 400px;
}

nav {
  width: 400px;
}

section {
  width: 400px;
}

@media screen and (min-width: 800px) {

  .wrapper {
    width: 640px;
  }
  
  header {
    width: 640px;
  }
  
  nav, section {
    float: left;
  }

  nav {
    width: 133px;
    margin-right: 10px;
  }

  section {
    width: 497px;
  }
  
}


@media screen and (min-width: 1000px) {

  .wrapper {
    width: 960px;
  }
  
  header {
    width: 960px;
  }

  nav {
    width: 200px;
  }

  section {
    width: 750px;
  }
  
}



/**************************************
CSS TO MAKE THE EXAMPLE LOOK PRETTY
**************************************/

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #000;
  color: #FFF;
  font-family: Helvetica;
  text-align: center;
  margin: 0;
}

header,
nav,
section {
  border: 1px solid rgba(255,255,255,0.8);
  margin-bottom: 10px;
  border-radius: 3px;
}

header {
  padding: 20px 0;
}

nav, section {
  padding: 200px 0;
}

Liquid Page Layout - Demo

Responsive Page Layout

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.

Please check the preview to understand the difference. Also don't forget to resize the browser.

HTML

  
Responsive Layout Example
  
HEADER
  
  
SECTION

CSS

/**************************************
Author : Faisal Russel
RESPONSIVE LAYOUT CSS
**************************************/

.wrapper {
  max-width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 800px) {

  .wrapper {
    max-width: 90%;
  }
  
  header {
    width: 100%;
  }
  
  nav, section {
    float: left;
  }

  nav {
    width: 20.83333%;
    margin-right: 1.041667%;
  }

  section {
    width: 78.125%;
  }
  
}


@media screen and (min-width: 1000px) {

  .wrapper {
    max-width: 66.66667%;
  }
  
}



/**************************************
CSS TO MAKE THE EXAMPLE LOOK PRETTY
**************************************/

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #000;
  color: #FFF;
  font-family: Helvetica;
  text-align: center;
  margin: 0;
}

header,
nav,
section {
  border: 1px solid rgba(255,255,255,0.8);
  margin-bottom: 10px;
  border-radius: 3px;
}

header {
  padding: 20px 0;
}

nav, section {
  padding: 200px 0;
}

Responsive Page Layout - Demo