Understanding the Fluid Layout


When designers and developers take up a project of creating a website in WordPress theme, the first important decision that they have to take is, ‘whether to create a fixed or fluid design?’ Many internet users have a screen resolution even higher than 1024×768. The main problem with using a fixed layout is that you will see a lot of undesirable white space on either side of the theme’s content. Those using mobile phones or other smaller devices to access internet will see a horizontal scroll bar. Fixed designs are always seen as an easier escape, but they have their share of flaws. These flaws can be fixed by using a fluid layout.

A fluid layout in WordPress development terminology can be defined as a layout which takes proportional values into account while measuring the content, images and other items of a Web page designed in WordPress theme. Hence, the web page can stretch and contract itself to fit the user’s screen size. This is a totally a different take on the screen layout where fixed layout is the most used one. The term “fixed” relates to the fact that every aspect of the theme has a fixed pixel width. Therefore, the width of the content stays consistent regardless of the size of the screen. Fluid layout is different from the fixed layout in the sense that it talks about the percentage by which its element width will grow narrower or wider.

Fluid layout is different from fixed layout in terms of the measurement of sizes. In Fixed type of layout, measurements are in pixels whereas; Dimensions are defined in percentages that offer greater fluidity. So, as you set a percentage for an element, you don’t have to bother about the device screen that is being used to view the content. The site’s design will automatically adapt to the size of the device.

Responsive Development and fluid layout

The term Responsive has grown popular with the increased usage of SmartPhones and Tablets. Responsive design is a “programming” ingenious that can detect the user’s browser or the size of the screen. The idea is to create websites or themes that are ‘Responsive’ to fit the four corners of any display screen. Fluid design techniques are used along with CSS media queries in the making of Responsive websites. In the fluid design technology, the different sections of the site are defined in a relative manner. For example, an element is 60% of the page width. This way, the site you are viewing will look the same with the same proportions no matter which device or which browser you are using to view it. This is because the elements are defined in terms of percent or some other parameter to scale from device to device.

A liquid layout is meant to fill the page irrespective of the width of the browser. Also, liquid layout doesn’t involve a lot of thinking like responsive design. However, the problem with fluid layout arises when it comes to viewing the design on very large or very small screens. Some content gets stretched too far if the browser is very wide. A paragraph might appear as a single line running across the page. On smaller devices, the screen might look too cluttered to view the content.

A WordPress website has a flexible width, if designed with fluid layout technology. The entire viewing area of the content will be decided by a percentage number rather than static pixels. This is very much unlike the fixed width layout, where the width layout is based on the screen resolution on the browser. Fluid width layout empowers you to change the 960 pixels width to 90% in width and that’s quite a number for sure. This way, the view area can take up to 90% of the browser screen irrespective of how big or small it is. Here is an example of a popular 90% fluid width layout. In this case, both the header and footer of the site are 90% wide, the content area is 50% wide and the two side bars are 20% wide. The gap between the content area and the side bar is 5%.As the width is calculated in percentages, Fluid layout actually creates an elastic layout that can easily adjust its width as per the screen size of the site visitor.

Advantages of Fluid layout:

The most important of all is the fact that it effectively uses all the space of the browser. There is no waste of any space. The site adjusts itself to the screen resolution of the browser to give a comfortable feel to the eyes which makes it user friendly. Alternately, the horizontal scroll bars are eliminated if the screen resolution is smaller than 1024 pixels in width which is quite an annoying feature in fixed width layouts.

Even though Fluid design is definitely seen as an answer to the problems associated with multiple screen sizes, it has its own problems. Designers and developers have a very limited control over the content that users wish to see. Some images may need multiple widths to be displayed proportionately on different screen sizes. If the screen size is too big, the fluid design may not look impressive at all. Fluid width does have some disadvantages that one needs to know before going to thinking of going for it. Here are some of these:

Multimedia display:Multimedia files such as videos, images and photographs cannot appear the same on every browser screen. For example, if a video is 400 pixels in width and placed within 50% of the container width, users that don’t have browser resolution more than 400 pixels will see that the video is overlapping with other areas of the site design. Now this is highly undesirable.

Readability:Users having large monitors with high screen resolution settings will find it difficult to read the content of a website. The fluid width may span the entire width of the screen. This can be sorted using CSS solutions to create a minimum or maximum width.