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.

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 set up.
• 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.

Use Simple Design

Even though fluid layouts can present a few problems, some of those problems can be overcome with a few tricks. The less a fluid Web design depends on graphics and difficult techniques, the easier it will be to create and maintain. It will also be more compatible with alternate screen resolutions. With cleaner code and design, compatibility problems are more easily prevented, found and dealt with. For example, uses a fluid Web page layout, and to make it simple only the top black-and-orange navigation bar expands, depending on the user’s situation. Otherwise, the content area expands and contracts as needed, and smart use of CSS covers situations in which the sidebar and internal content could clash.

Min-width and Max-width

Two CSS properties, min-width and max-width, can be used to create a fixed width if the user’s screen is too small or too big for the layout to be usable. In this case, the layout gets a scroll bar and functions essentially as a fixed-width layout.