• 1
  • 2
Home > Tips

Fixed Layout or Fluid Layout? Which one do you choose?

 Differences between fixed layout and fluid layout

 

What is Fixed Layout?

A fixed layout is a kind of layout with a width-fixed container outside and each box inside is fixed by width rather than percent. More importantly, elements in this container are set as cannot be moved, so the webpage will display the same width to visitors no matter what their screen resolution is.

 

 

The image above is the basic skeleton of a fixed layout. The widths of the three boxes are 520 pixels, 200 pixels and 200 pixels. 960 pixel is becoming the standard of web design now.

 

What is Fluid Layout?

 Fluid layout, which is also called liquid layout, is a kind of layout using percent widths, so it can adapt to visitors different screen resolutions.

 

 

The image above is the basic skeleton of a fluid layout. Some designers may set some elements in this layout as fixed widths (such as margin), but fluid layout can still adapt any resolution if only the general elements are percent widths.

 

 

 Advantages and Disadvantages of Fixed Layout and Fluid Layout

 

Advantages and Disadvantages of Fixed Layout

 

 

Many designers prefer to use fixed layout rather than fluid layout because the fixed layout is easier to achieve and it can make sure that what designers see is what visitors see.

 

Pros

Fixed layout is easier to use and more convenient to customize for designers.

Because of the same width in all browsers, it will not be bothered by images, forms, videos and other contents with fixed width.

No need min-width and max-width, so it can be supported by all browsers.

 

 

Cons

For the visitors using large screen resolution, fixed layout will leave too much space. Thats where the divine proportion, the Rule of Thirds, overall balance and other design principles come from.

Horizontall scroll bar will come out when the screen resolution is too small.

Seamless textures, patterns and image continuation need to adapt to larger resolution.

Fixed layout doesnt perform so well in terms of usability.

 

Advantages and Disadvantages of Fluid Layout

 

 

Designers may have thousands of reasons not to use a fluid layout, but there are still some advantages in this kind of layout cannot be ignored.

 

Pro

The webpage made by a fluid layout is more friendly to visitors because it can adapt to users settings automatically.

The space area around webpage contents is the same in all the screen resolutions and browsers, which can be more visually appealing.

Fluid layout can avoid horizontal scroll bar in small screen resolutions.

 

 

Cons

Designers will find its more difficult to control what visitors see, which will cause some mistakes because the layout looks nice in the specific resolution.

Images, videos and other contents may need multiple widths to adapt to users using different screen resolutions.
In some particularly large screen resolutions, the contents will be drawn into a line, which is hard for visitors to read.

 

Contact Us for Help

 

If you have problems when using our software, we want to hear from you. Send us an email that describes the problem you're having and include a screenshot if possible. [Support Email Address: support@slicemaker.com]

We promise to you we will solve whatever problem youre having within 24 hours.

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0