Question

What are the use cases for defining distances in a web layout for pixels and percentages?

Is there any downside to using pixels with respect to multiple resolutions? Will they scale correctly?

Answer 1

Percentage layout

This is generally referred to as fluid layout. Your elements will take a defined percentage of the total space available to them. This available space is determined by the element’s parent.

When using percentage layouts, it’s a good idea to specify a min-width and max-width on your design so that it remains usable at very low and high resolutions.

Pros

1. Scales with screen size, therefore get to use more space if it’s available.

Cons

1. Makes it more difficult to know the exact position of something on screen. As a result, it can make creating precise layouts more difficult.
2. Can lead to unexpected layouts if child elements are fixed width (i.e. an image) and end up being larger than their fluid width parent.

Pixel layout

This is usually known as fixed layout. Your element will always be the same defined pixel size and will not take available parent space into account.

Pros

1. Always know an element’s exact size.
2. Creating precise layout is easier.

Cons

1. You don’t scale with resolutions. Your layout will always be the same width, making for wasted space when people have high resolutions.