fluid layout

In a fluid website layout, also referred to as a liquid layout, the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution.

The image below shows a fluid (liquid) website layout. While some designers may give set widths to certain elements in fluid layouts, such as margins, the layout in general uses percentage widths so that the view is adjusted for each user.

Designers may not use fluid page designs for various reasons, but the layout’s benefits are often overlooked. Below are pros and cons to think about when considering fluid web page design.

Pros:

• Fluid web page design can be more user-friendly, because it adjusts to the user’s setup.

• The amount of extra white space is similar between all browsers and screen resolutions, which can be more visually appealing.

• If designed well, a fluid layout can eliminate horizontal scroll bars in smaller screen resolutions.

Cons:

• The designer has less control over what the user sees and may overlook problems because the layout looks fine on their specific screen resolution.

• Images, video and other types of content with set widths may need to be set at multiple widths to accommodate different screen resolutions.

• With incredibly large screen resolutions, a lack of content may create excess white space that can diminish aesthetic appeal.