Question

Compare and contrast the approach of a static layout versus a fluid/liquid layout. What are the advantages and disadvantages of each?   Please explain your reasoning.

Answer 1

Static layouts(or Fixed Layout) are layouts that start with a specific size as stipulated by the web designer; i.e., the width of the entire page is set to a specific numerical value. Whereas, Fluid/Liquid layouts are layouts that are based on percentages of the current browser window's size that makes width of the page flexible, depending on the width of the viewer’s browser.

Static layouts allow a designer more direct control over how the page will look in most situations. While, Liquid layouts allow an efficient use of the space provided by any given browser window or screen resolution.

Designers with a print background often prefer Static or Liquid layouts, as it remains consistent across browsers. Whereas, Fluid layouts are preferred by designers who have lots of information to be displayed in limited space often prefer these layouts.

Lets take a look at few differences in their properties:-

Property	Static Layout	Fluid/Liquid Layout
Width of wrap	In Pixels (960px, 1200px)	In Percentage or auto, for ex; 80%
Height	In pixels or auto	Automatic
Print Frendly	Yes	No
Device Compatibility	For devices greater than their width	Remains Same. Do not compress
Text Scrolling onf various devices	Remains same	Text scroll down

Static or Fixed Layouts

Advantages :-

1. A static layout allows the designer to build pages that will look identical no matter who is looking at them.

2. They are easy to use and customize.

3. Fixed-width elements like images won't overpower text on smaller monitors because the width of the whole page will include those elements.

4. There is less hassle with videos, images, and other content, as the width is the same for every browser.

5. T he content will be wide enough at larger resolutions, even if the website is designed to be compatible with the smallest screen resolution.

6. There is no need for keeping minimum and maximum width, as anyway, the browser does not support it.

Cons:-

1. Smaller screens may require a horizontal scroll bar.

2. They leave large expanses of white space in larger monitors, resulting in a lot of unused space

3. They have a lower score when it comes to usability.

4. They force horizontal scrolling in smaller browser windows. Most people don't like to scroll horizontally.

5. Fixed-width layouts don't handle customer changes to font sizes very well.

Fluid or Liquid Layouts

Advantages:-

1. The fluid web page design can be more users friendly as it adjusts to user setup.

2. These allows the designer to display more content on larger monitors, but still remain viable on smaller displays.

3. The extra white space is equal between all screen resolutions that are more appealing.

4. A fluid layout can eliminate horizontal scroll bars in smaller screens.

5. Liquid layouts provide consistency in relative widths, allowing a page to respond more dynamically to customer-imposed restrictions like larger font sizes.

Cons:-

1. The designer has less control over what the visitor sees and overlooks problems because the layout seems fine on their screen resolution.

2. They can result in columns of text that are either too wide to comfortably scan, or on smaller browsers too small for the words to show up clearly.

3. With incredibly large screen resolutions, insufficient content may create excess white space.

4. Videos, images, and graphics with defined widths may need to be set with multiple widths so that it can accommodate various screen resolutions.

Happy Learning....Give it a thumps up if you got the answer correctly.....