2 minutes “Text on a website goes beyond the edge of the image instead of continuing on the next line.”
“On one official site, I can’t click the Next button because it’s positioned off-screen.”
“In full-screen video playback, the right edge of the image is not visible.”
These are just a few feedbacks we received about our new post topic, mainly from users of Windows 11 notebooks, when we asked about the most annoying web anomalies they’ve encountered recently. In most cases, the issue was with their device.
High Resolution Doesn’t Suit Everyone
With the proliferation of 4K (3840 x 2160) and higher resolution displays, monitors can now display more pixels. For example, the mentioned 4K monitors display nearly four thousand pixels per line, which is too detailed for a smaller screen to display well. The reason is simple: objects on the screen are sized for a predetermined number of pixels, and if these pixels are compressed into a smaller area (more pixels per frame in higher resolutions), the displayed image becomes smaller, causing readability and navigation issues for many.
Source: Unsplash, Bimbingan Islam
Updates to Windows 10 and 11 address this by setting screen scaling to 125%, enlarging the entire desktop’s visibility by a quarter. However, visibility/readability isn’t a single-parameter property: besides screen size and resolution, it also depends on the distance between the display and the user and the user’s eyesight. Enlarging the display can cause some applications (at best, only their icons), toolbars, or dialog boxes to blur.
This enlargement also poses a significant challenge for studios like ours, which deal with digital development. When designing a website, we create the design in three sizes: first the mobile view, then the desktop, and finally the tablet version. However, if the screen is enlarged, some elements of our design might fall outside the visible screen area, which can cause functional issues for buttons or compromise web ergonomics.
What Can We Do?
If you have a 1080p (1920 x 1080) resolution screen, avoid zooming in because the image will become blurry. If you have a 4K resolution monitor larger than 32 inches, zooming is unnecessary as the screen size is large enough to see everything comfortably. For smaller monitors with 4K or higher resolution, instead of enlarging the display, adjust the view within each application – using the zoom feature in browsers maintains both the visibility and functionality of websites (up to about 125%).
If you use an external monitor, synchronize the resolutions of the different displays – the greater the difference between them, the more problems arise from enlargement.
How to Restore Your Screen to Its Original Size?
In Windows 11, go to the Start menu – Settings – Display – Scaling and Layout to adjust the screen scaling.
More posts
5 Design trends which is essential in 2024
Only days remain of this year, so perhaps it’s not too bold to predict the trends that will guide the hands of designers wielding their mice in 2024. Nostalgia Animated gifs, pixels,[...]
