One of the biggest design headaches from the recent past has been due to what is known as the multi screen problem. There are too many devices with different screen sizes to design for. Designers would create multiple designs just to cover the main three form factors (phone, tablet, computer) and it would look bad on all the other sizes. The solution: responsive design. A design without fixed sizes that would flow even when a browser window is resized. Now with a few lines of code, and a few basic sizes, all devices and screen sizes can be supported. Here are four basic principles to follow in responsive design:
Responsive or adaptive – They both end up the same but are different. Responsive moves with the change in size, whilst adaptive jumps to the next screen size.
Relative units – As pixel density can vary from device to device it is better to use relative units. For example, the most used relative unit is a percentage. For example: the width of an element can be set to 50% of its container.
Max and min – This allows elements to take different sizes but limits the sizes to maintain functional use. 100% width is good except when viewed on a 30” monitor, this remedies such issues.
Nested objects – With the use of relative units, multiple elements can be both messy and complicated. The best way to manage this is to nest elements. Multiple elements nested within others can also use relative units.