What is: Fluid layout

In WordPress theme development terminology a fluid layout is a layout that uses proportional values as a measuring unit for blocks of content, images, or any other item that is a part of the WordPress theme. This allows the web page to stretch and contract relative to the user’s screen size. This is different from fixed layouts where every aspect of the theme has a fixed width in pixels.

Whilst creating a website or WordPress theme, designers and developers have to decide whether they want to create a fixed or fluid width design. Although fixed width designs are typically seen as easier to create, they have several flaws that are fixed by using a fluid layout. Because many users today have screen resolutions higher than 1024×768 there may be lots of white space on either side of the theme’s content if it uses a fixed layout. For users with smaller screens or those that access your site on mobile they may end up seeing a horizontal scroll bar as well.

Although fluid design is typically seen as solving many problems related to multiple screen sizes it creates some problems of its own. The designer has less control over what the user sees and content such as images may require multiple widths to be displayed on different resolutions. It the user’s screen is extremely large then a lack of content may cause the fluid design to lose some of its appeal again.

With the increase in smartphone and tablet use around the world, the term Responsive Development has grown in popularity. This is not dissimilar to fluid layouts, and it is the process of creating a website or theme with all devices and screen sizes in mind. The techniques of fluid design, along with CSS media queries, will often be used to create a website or theme that is ‘responsive’.

Additional Reading