Fixed, Fluid, Elastic, Responsive, or Adaptive Layout?

[A question came up recently in a discussion group on Facebook about the differences between fixed, fluid, elastic, responsive, and adaptive website design. Here’s my response.]

A fixed design is where the layout uses absolute values (usually pixels) for everything. Sites used to be designed for minimum screen widths of 640px, then 1024px, and so on. A common convention today is to set up a grid that’s 960px wide, configure it to center within the browser window, and design the layout within that grid. And hope that a goofy browser doesn’t break it.

Elastic design is similar to Fixed except that sizes are expressed as percentages (based on window width). The layout will shrink or stretch with the window, but things will remain in the same relative positions.

Fluid design refers to the way text can rearrange itself around floating elements (usually images or icons). In this case those images/icons don’t resize when the window does, but rather float in a sea of text which flows around them.

Responsive is when the layout changes to respond to the characteristics of different devices, particularly mobile devices. A common example is to have a multi-column layout when viewed on a laptop, but single-column when viewed on a smart phone. Menus also change to be touch sensitive, and so on.

Adaptive is like responsive (used almost interchangeably) but keys off the screen width rather than device type. At least that’s my take on it.

If I got any of this wrong please feel free to educate me further in the comments below.

Did you like this? Take a second to support me on Patreon!