Make sure layouts are flexible and fluid
In today’s market, there are many different kinds of resolutions and screen patterns for which designers must design. Many devices have varying densities. Below is a simple dictionary of terms related to density:
- Resolution: The total number of physical pixels on a screen.
- Density-Independent Pixel (DP): A virtual pixel unit that is used to define a UI layout. A DP expresses layout dimensions or position in a density-independent way. The DP is equivalent to 1 physical pixel on a 160 dpi screen, which is the baseline density assumed by a system on a ‘medium’ density screen.
- Screen Size: The actual physical size, measured as the screen’s diagonal.
- Screen Density: The number of pixels within a physical area of the screen; usually referred to as dpi (dots per inch). For example, a ‘low’ density screen has fewer pixels within a given physical area, compared to a ‘normal’ or ‘high’ density screen.
These concepts can be applied to the development of a mobile app. They ensure that interfaces are easily adaptable across devices. This is what is known as a ‘fluid interface.’
In other words, a fluid interface is one in which dimensions are defined in percentage. This way, designers use percentages to determine how much space each part of the interface takes up on the screen. This method makes interfaces easily adaptable to different devices.