Sizing the screen resolution

A number of pixels the display of device has, horizontally and vertically, and the color depth measuring the number of bits representing the color of each pixel makes up the screen resolution. The higher the screen resolution, the higher the productivity we get.

In the past, the screen resolution of a display was important since it determined the amount of information displayed on the screen. The lower the resolution, the fewer items would fit on the screen; the higher the resolution, the more items would fit on the screen. The resolution varies according to the hardware in each device.

Nowadays, the screen resolution is considered a pleasant visual experience, since we would rather see more quality than more stuff on the screen. That is the reason why the screen resolution matters. There might be different display sizes where the screen resolutions are the same, that is to say, the total number of pixels is the same. If we compare a laptop (13'' screen with a resolution of 1280 x 800) and a desktop (with a 17'' monitor with the same 1280 x 800 resolution), although the monitor is larger, the number of pixels is the same; the only difference is that we will be able to see everything bigger on the monitor. Therefore, instead of seeing more stuff, we see higher quality.

Screen resolution chart

Code	Width	Height	Ratio	Description
QVGA	320	240	4:3	Quarter Video Graphics Array
FHD	1920	1080	~16:9	Full High Definition
HVGA	640	240	8:3	Half Video Graphics Array
HD	1360	768	~16:9	High Definition
HD	1366	768	~16:9	High Definition
HD+	1600	900	~16:9	High Definition plus
VGA	640	480	4:3	Video Graphics Array
SVGA	800	600	4:3	Super Video Graphics Array
XGA	1024	768	4:3	Extended Graphics Array
XGA+	1152	768	3:2	Extended Graphics Array plus
XGA+	1152	864	4:3	Extended Graphics Array plus
SXGA	1280	1024	5:4	Super Extended Graphics Array
SXGA+	1400	1050	4:3	Super Extended Graphics Array plus
UXGA	1600	1200	4:3	Ultra Extended Graphics Array
QXGA	2048	1536	4:3	Quad Extended Graphics Array
WXGA	1280	768	5:3	Wide Extended Graphics Array
WXGA	1280	720	~16:9	Wide Extended Graphics Array
WXGA	1280	800	16:10	Wide Extended Graphics Array
WXGA	1366	768	~16:9	Wide Extended Graphics Array
WXGA+	1280	854	3:2	Wide Extended Graphics Array plus
WXGA+	1440	900	16:10	Wide Extended Graphics Array plus
WXGA+	1440	960	3:2	Wide Extended Graphics Array plus
WQHD	2560	1440	~16:9	Wide Quad High Definition
WQXGA	2560	1600	16:10	Wide Quad Extended Graphics Array
WSVGA	1024	600	~17:10	Wide Super Video Graphics Array
WSXGA	1600	900	~16:9	Wide Super Extended Graphics Array
WSXGA	1600	1024	16:10	Wide Super Extended Graphics Array
WSXGA+	1680	1050	16:10	Wide Super Extended Graphics Array plus
WUXGA	1920	1200	16:10	Wide Ultra Extended Graphics Array
WQXGA	2560	1600	16:10	Wide Quad Extended Graphics Array
WQUXGA	3840	2400	16:10	Wide Quad Ultra Extended Graphics Array
4K UHD	3840	2160	16:9	Ultra High Definition
4K UHD	1536	864	16:9	Ultra High Definition

Considering that 3840 x 2160 displays (also known as 4K, QFHD, Ultra HD, UHD, or 2160p) are already available for laptops and monitors, a pleasant visual experience with high DPI displays can be a good long-term investment for your desktop applications.

The DPI setting for the monitor causes another common problem: the change in the effective resolution. Consider the 13.3" display that offers a 3200 x1800 resolution and is configured with an OS DPI of 240 DPI. The high DPI setting makes the system use both larger fonts and UI elements; therefore, the elements consume more pixels to render than the same elements displayed in the resolution configured with an OS DPI of 96 DPI. The effective resolution of a display that provides 3200 x1800 pixels configured at 240 DPI is 1280 x 720. The effective resolution can become a big problem because an application that requires a minimum resolution of the old standard 1024 x 768 pixels with an OS DPI of 96 would have problems with a 3200 x 1800-pixel display configured at 240 DPI, and it wouldn't be possible to display all the necessary UI elements. It may sound crazy, but the effective vertical resolution is 720 pixels, lower than the 768 vertical pixels required by the application to display all the UI elements without problems.

The formula to calculate the effective resolution is simple: divide the physical pixels by the scale factor (OS DPI / 96). For example, the following formula calculates the horizontal effective resolution of my previous example: 3200 / (240 / 96) = 3200 / 2.5 = 1280; and the following formula calculates the vertical effective resolution: 1800 / (240 / 96) = 1800 / 2.5 = 720.

The effective resolution would be of 1800 x 900 pixels if the same physical resolution were configured at 192 DPI. Effective horizontal resolution: 3200 / (192 / 96) = 3200 / 2 = 1600; and vertical effective resolution: 1800 / (192 / 96) = 1800 / 2 = 900.

Calculating the aspect ratio

The aspect radio is the proportional relationship between the width and the height of an image. It is used to describe the shape of a computer screen or a TV. The aspect ratio of a standard-definition (SD) screen is 4:3, that is to say, a relatively square rectangle. The aspect ratio is often expressed in W:H format, where W stands for width and H stands for height. 4:3 means four units wide to three units high. With regards to high-definition TV (HDTV), they have a 16:9 ratio, which is a wider rectangle.

Why do we calculate the aspect ratio? The answer to this question is that the ratio has to be well defined because the rectangular shape that every frame, digital video, canvas, image, or responsive design has, makes shapes fit into different and distinct devices.