Developers often make websites responsive only for mobile screens and, perhaps, tablets. Yes, it looks good on different devices and does not lose its functionality. However, such a website is not always fully responsive. The fact is that each screen has its own size, resolution, and even orientation. At the same time, it is necessary to take into account that the user may open the website not in full screen mode, but in a window that occupies only part of the screen. Only if the website looks good on any screen and in any configuration, without losing its functionality, can it be called fully responsive.
But how can this be achieved? Do you really have to write a dozen behavioral scenarios in CSS for each component, spending a lot of time on it? No, you don’t. Modern web development technologies allow you to achieve good results without the need for such meticulous and routine work.
When creating a layout, web designers start with resolutions ranging from HD (1280×720) to Full HD (1920×1080). These are the most popular resolutions for PC monitors and laptops, which means that the website will display correctly on most monitors. For smaller resolutions and different orientations, some blocks will still need to be adapted, but at higher resolutions, the website will look the same as intended. However, this is where problems arise.
For example, you designed a page based on a resolution of 1280×720, but the user opened it on a monitor with a resolution of 4K (4096×3072). Yes, the design, layout, and functionality will remain the same. However, the user faces another problem—the interface elements appear too small. To solve this problem, you will have to zoom in on the page in your browser, but how many people will bother to do that? This means that in order for the user to interact with the site comfortably, it will have to be adapted for higher resolutions as well.
Often, to fix the problem associated with high resolution, special empty “spacers” are added to the page. Then the design looks roughly the same as the layout designer originally intended, but with some nuances:
- Areas of empty space appear on the sides. The higher the user’s screen resolution compared to the original, the more empty space there will be. When there is a lot of it, it looks ugly and even complicates working with the site.
- The content will still look small on a large screen, but at least it won’t spread out in different directions.
There is another problem, but this time for small resolutions. Yes, websites are usually adapted for them: @media() element behavior scripts are written, non-fixed values are set in properties, and so on. The site ends up being adapted to predefined parameters, and yes, it will look good on smartphones, but the problem lies in the intermediate states. Imagine that a user has a non-standard resolution, less than 1280×720, for which you simply did not write a script for the behavior of elements. On such a screen, the site will look bad—a bottom scroll bar will appear, elements may go outside their parent blocks, and so on.
However, most often users encounter another problem—intermediate states. For example, a person has a standard screen with Full HD resolution and the website looks good on it, but the user needs to open it in a window that is not full screen. And this is where the problem begins. The size of the window in which they opened the website can be anything, so it is difficult to predict how the layout will behave in such conditions.