Internet users use a wide variety of monitors with different screen resolutions. Therefore, one of the tasks for web developers is the need to create and optimize a site for its correct display on monitors with any resolution.
Instructions
Step 1
Design your website with the lowest usable resolution - 800 * 600 pixels and use a fixed layout. But with this approach, there is one drawback - for users who have widescreen monitors, wide fields will appear on the screen when viewing your site.
Step 2
Use a fluid layout. In this case, the pages will be stretched horizontally on those monitors, the resolution of which is higher than that used in the development. But this approach is best used when creating sites with a lot of textual information and a minimum amount of graphics. This is because some elements, such as pictures or third-party components, will be distorted when resizing on different monitors.
Step 3
The most correct, but at the same time and more difficult from the point of view of implementation, is the use of a responsive layout. This is a more complex version of the rubber layout, which makes it possible to change the number of columns with information when using the program code.
Step 4
But whichever layout is chosen for the development of the site, do its layout at a screen resolution of 1024 * 768 pixels. This is the most common resolution.
Step 5
Also, for the correct display of the site on monitors with a different resolution, follow some rules. Try to keep the main content of the page on one screen to avoid scrolling. Place text information in a narrow column so that it does not "spread" across the entire width of the screen. Keep track of the overall design of the pages so that everything is proportional.
Step 6
When designing your design, calculate the percentage, not quantity, of page width and height. Then the page will be resized proportionally both on conventional monitors and on widescreen monitors.
