What is: Fluid Layout?

The term fluid layout in WordPress refers to a certain way that developers can design themes. Normally, a certain area of a WordPress website like the header is measured in an absolute number of pixels (i.e. 740 pixels wide by 192 pixels high), also known as a fixed layout. A fluid layout, on the other hand, uses proportions (i.e. 16:9) so that the webpage will display correctly depending on the user’s screen size.

Originally, websites were designed exclusively to be viewed by desktop computer browsers which all used more or less the same screen size. With the advent of tablets, mobile phones, and a variety of different monitor resolutions, users are now viewing websites from a wide range of screen sizes.

Fluid layout is designed to compensate for that automatically. Previously, a fixed layout header of 740 by 192 would become foreshortened or cut off if the user’s screen size was too small. Now, however, fluid layout means that the same header (740 by 192) is represented by a proportion (16 to 9) so that it will shrink proportionally in order to fit into a smaller screen.

While fluid layouts are beneficial for creating responsive themes that instantly adapt to different user screen sizes, there are some downsides. For example, with a fluid layout, there’s no way to predict exactly how the website will display. Furthermore, some images won’t look good if they are displayed at a different resolution or size. And when users have very large screens, the website can appear to look empty and unappealing.

Learning how to create responsive websites that look good and display properly regardless of the user’s screen size is a true art. Today, most WordPress themes with a fluid layout are labeled “Responsive” to distinguish them from fixed layout themes.